#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 border-radius: 50%; 16 position: absolute; 17} 18 19.loader .circle:nth-child(1) { 20 top: 0; 21 left: 0; 22} 23 24.loader .circle:nth-child(2) { 25 top: 0; 26 right: 0; 27} 28 29.loader .circle:nth-child(3) { 30 bottom: 0; 31 left: 0; 32} 33 34.loader .circle:nth-child(4) { 35 bottom: 0; 36 right: 0; 37} 38 39@keyframes spin988 { 40 0% { 41 transform: scale(1) rotate(0); 42 } 43 44 20%, 25% { 45 transform: scale(1.3) rotate(90deg); 46 } 47 48 45%, 50% { 49 transform: scale(1) rotate(180deg); 50 } 51 52 70%, 75% { 53 transform: scale(1.3) rotate(270deg); 54 } 55 56 95%, 100% { 57 transform: scale(1) rotate(360deg); 58 } 59}
6.3K views
6.3K views
Comments
Variations
1 MIT License