28 lines
863 B
CSS
28 lines
863 B
CSS
.loader-spinner {
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
border-radius: 50%;
|
|
position: relative;
|
|
animation: loader-spinner-rotate 1s linear infinite
|
|
}
|
|
.loader-spinner::before {
|
|
content: "";
|
|
box-sizing: border-box;
|
|
position: absolute;
|
|
inset: 0px;
|
|
border-radius: 50%;
|
|
border: 3px solid #FFF;
|
|
animation: loader-spinner-prixClipFix 2s linear infinite ;
|
|
}
|
|
|
|
@keyframes loader-spinner-rotate {
|
|
100% {transform: rotate(360deg)}
|
|
}
|
|
|
|
@keyframes loader-spinner-prixClipFix {
|
|
0% {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
|
|
25% {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
|
|
50% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
|
|
75% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
|
|
100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
|
|
} |