/*loader*/
.loader {
width: 3rem;
height: 3rem;
display: flex;
align-items: center;
justify-content: center;
position: fixed;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
background-color: #fff;
z-index: 999;
box-shadow: 0px 0px 1rem 1rem #0001;
border-radius: 1rem;
}

.loader span {
width: 1.5rem;
height: 1.5rem;
padding: 0;
margin: 0;
display: block;
position: absolute;
border: .25rem solid rgb(31, 20, 75);
border-top-color: transparent;
border-radius: 100%;
animation: spin linear infinite 1s;
}

@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}

.dot {
display: inline-block;
width: 10px;
height: 10px;
margin-right: 6px;
border-radius: 50%;
-webkit-animation: dot-pulse2 1.5s ease-in-out infinite;
animation: dot-pulse2 1.5s ease-in-out infinite;
}

.dot-1 {
background-color: #4285f4;
-webkit-animation-delay: 0s;
animation-delay: 0s;
}

.dot-2 {
background-color: #34a853;
-webkit-animation-delay: 0.3s;
animation-delay: 0.3s;
}

.dot-3 {
background-color: #fbbc05;
-webkit-animation-delay: 0.6s;
animation-delay: 0.6s;
}

.dot-4 {
background-color: #ea4335;
-webkit-animation-delay: 0.9s;
animation-delay: 0.9s;
}

.dot-5 {
background-color: #4285f4;
-webkit-animation-delay: 1.2s;
animation-delay: 1.2s;
}

/* Variasi baru */
.dot-6 {
background-color: #0f9d58;
-webkit-animation-delay: 1.5s;
animation-delay: 1.5s;
}

.dot-7 {
background-color: #673ab7;
-webkit-animation-delay: 1.8s;
animation-delay: 1.8s;
}

.dot-8 {
background-color: #ff5722;
-webkit-animation-delay: 2.1s;
animation-delay: 2.1s;
}

@keyframes dot-pulse2 {
0% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
opacity: 0.5;
}

50% {
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
}

100% {
-webkit-transform: scale(0.5);
transform: scale(0.5);
opacity: 0.5;
}
}