/* spin loading */
.spin-loading-box { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); }
.spin-loading-box.is-active { display: block; }
.spin-loading-box.is-complete .spin-loading { display: none; }
.spin-loading { position: absolute; left: 50%; top: 50%; margin-left: -40px; margin-top: -40px; width: 80px; height: 80px; border-top: 10px solid #555; border-right: 10px solid #ddd; border-bottom: 10px solid #ddd; border-left: 10px solid #ddd; border-radius: 500px; animation: spin_loading 0.8s infinite linear; }
@keyframes spin_loading {
    100% { transform: rotate(360deg); }
}