Loader by Ratinax
#e8e8e8
1.loader { 2 --dim: 3rem; 3 width: var(--dim); 4 height: var(--dim); 5 position: relative; 6 animation: spin988 2s linear infinite; 7} 8 9.loader .circle { 10 --color: #333; 11 --dim: 1.2rem; 12 width: var(--dim); 13 height: var(--dim); 14 background-color: var(--color); 15 position: absolute; 16} 17 18.loader .circle:nth-child(1) { 19 top: 0; 20 left: 0; 21} 22 23.loader .circle:nth-child(2) { 24 top: 0; 25 right: 0; 26} 27 28.loader .circle:nth-child(3) { 29 bottom: 0; 30 left: 0; 31} 32 33.loader .circle:nth-child(4) { 34 bottom: 0; 35 right: 0; 36} 37 38@keyframes spin988 { 39 0% { 40 transform: scale(1) rotate(0); 41 } 42 43 20%, 44 25% { 45 transform: scale(1.3) rotate(90deg); 46 } 47 48 45%, 49 50% { 50 transform: scale(1) rotate(180deg); 51 } 52 53 70%, 54 75% { 55 transform: scale(1.3) rotate(270deg); 56 } 57 58 95%, 59 100% { 60 transform: scale(1) rotate(360deg); 61 } 62} 63
354 views
Variation of aloader
MIT License