#e8e8e8
1.spinner { 2 --size-of-spinner: 50px; 3 --spinner-border-width: 4px; 4 --spinner-color: #08c18a; 5 --circle-color: #8bc34a24; 6 --speed-of-animation: 2s; 7 --scale: 1.3; 8 width: var(--size-of-spinner); 9 height: var(--size-of-spinner); 10 background: var(--circle-color); 11 border-radius: 50%; 12 position: relative; 13} 14 15.spinner::after { 16 content: ""; 17 display: block; 18 position: absolute; 19 border-radius: 50%; 20 inset: 0; 21 border: var(--spinner-border-width) solid var(--spinner-color); 22 border-left-color: transparent; 23 border-right-color: transparent; 24 animation: spinny var(--speed-of-animation) linear infinite; 25} 26 27@keyframes spinny { 28 0% { 29 transform: rotate(0deg) scale(1) 30 } 31 32 50% { 33 transform: rotate(45deg) scale(var(--scale)) 34 } 35 36 100% { 37 transform: rotate(360deg) scale(1) 38 } 39}
1K views
1K views
Comments
MIT License