src/containers/Processing.css
.Processing {
align-items: center;
background-color: #0003;
display: flex;
height: 100%;
justify-content: center;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 9;
}
.Processing:not([data-active="true"]) {
display: none;
}
.Processing-box {
height: 100px;
position: relative;
width: 100px;
}
.Processing-dot {
animation: processing-rotate 2s infinite;
color: var(--color-main-bg);
height: 100%;
left: 0;
position: absolute;
text-align: center;
top: 0;
width: 100%;
}
.Processing-dot:nth-child(1) {
animation-delay: 400ms;
opacity: 0.3;
}
.Processing-dot:nth-child(2) {
animation-delay: 200ms;
opacity: 0.6;
}
.Processing-dot:nth-child(3) {
animation-delay: 0;
/* opacity: 1; */
}
@keyframes processing-rotate {
0% { transform: rotate(0) }
70% { transform: rotate(360deg) }
100% { transform: rotate(360deg) }
}