components/loader/checkmark.module.scss
.checkmark {
width: 80px;
height: 80px;
border-radius: 50%;
display: block;
stroke-width: 4;
stroke: var(--background);
stroke-miterlimit: 10;
margin: 10% auto;
animation: spinner 0.4s linear infinite;
}
.checked {
animation: fill 0.3s ease-in-out 0.15s forwards,
scale 0.4s ease-in-out 0.6s both;
}
.checked .circle {
animation: stroke 0.2s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.checked .check {
animation: stroke 0.4s cubic-bezier(0.65, 0, 0.45, 1) 0.5s forwards;
}
.circle {
stroke-dasharray: 166;
stroke-dashoffset: 80;
stroke-width: 3;
stroke-miterlimit: 10;
stroke: var(--on-background);
fill: none;
}
.check {
transform-origin: 50% 50%;
stroke-dasharray: 50;
stroke-dashoffset: 50;
}
@keyframes spinner {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes stroke {
100% {
stroke-dashoffset: 0;
}
}
@keyframes scale {
0%,
100% {
transform: none;
}
50% {
transform: scale3d(1.1, 1.1, 1);
}
}
@keyframes fill {
100% {
box-shadow: inset 0px 0px 0px 40px var(--on-background);
}
}