Loader by bociKond
#e8e8e8
1.spinner { 2 position: relative; 3 width: 24.6px; 4 height: 24.6px; 5 animation-name: rotateSpin; 6 animation-duration: 2s; 7 animation-timing-function: ease-in-out; 8 animation-iteration-count: infinite; 9 animation-direction: normal; 10 --clr: #3E885B; 11} 12 13@keyframes rotateSpin { 14 0% { 15 transform: rotate(0deg); 16 } 17 18 100% { 19 transform: rotate(360deg); 20 } 21} 22 23.spinner div { 24 width: 100%; 25 height: 100%; 26 background-color: var(--clr); 27 border-radius: 50%; 28 animation: spinnerAni 1s infinite backwards; 29} 30 31.spinner div:nth-child(1) { 32 animation-delay: 0.12s; 33 background-color: var(--clr); 34 opacity: .9; 35} 36 37.spinner div:nth-child(2) { 38 animation-delay: 0.24s; 39 background-color: var(--clr); 40 opacity: .8; 41} 42 43.spinner div:nth-child(3) { 44 animation-delay: 0.36s; 45 background-color: var(--clr); 46 opacity: .7; 47} 48 49.spinner div:nth-child(4) { 50 animation-delay: 0.48s; 51 background-color: var(--clr); 52 opacity: .6; 53} 54 55.spinner div:nth-child(5) { 56 animation-delay: 0.60s; 57 background-color: var(--clr); 58 opacity: .5; 59} 60 61@keyframes spinnerAni { 62 0% { 63 transform: rotate(0deg) translateY(-200%); 64 } 65 66 60%, 100% { 67 transform: rotate(360deg) translateY(-200%); 68 } 69}
613 views
613 views
MIT License