Loader by SelfMadeSystem
#212121
1.dots { 2 width: var(--size); 3 height: var(--size); 4 position: relative; 5} 6 7.dot { 8 width: var(--size); 9 height: var(--size); 10 animation: dwl-dot-spin calc(var(--speed) * 5) infinite linear both; 11 animation-delay: calc(var(--i) * var(--speed) / (var(--dot-count) + 2) * -1); 12 rotate: calc(var(--i) * var(--spread) / (var(--dot-count) - 1)); 13 position: absolute; 14} 15 16.dot::before { 17 content: ""; 18 display: block; 19 width: var(--dot-size); 20 height: var(--dot-size); 21 background-color: var(--color); 22 border-radius: 50%; 23 position: absolute; 24 transform: translate(-50%, -50%); 25 bottom: 0; 26 left: 50%; 27} 28 29@keyframes dwl-dot-spin { 30 0% { 31 transform: rotate(0deg); 32 animation-timing-function: cubic-bezier(0.390, 0.575, 0.565, 1.000); 33 opacity: 1; 34 } 35 36 2% { 37 transform: rotate(20deg); 38 animation-timing-function: linear; 39 opacity: 1; 40 } 41 42 30% { 43 transform: rotate(180deg); 44 animation-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950); 45 opacity: 1; 46 } 47 48 41% { 49 transform: rotate(380deg); 50 animation-timing-function: linear; 51 opacity: 1; 52 } 53 54 69% { 55 transform: rotate(520deg); 56 animation-timing-function: cubic-bezier(0.445, 0.050, 0.550, 0.950); 57 opacity: 1; 58 } 59 60 76% { 61 opacity: 1; 62 } 63 64 76.1% { 65 opacity: 0; 66 } 67 68 80% { 69 transform: rotate(720deg); 70 } 71 72 100% { 73 opacity: 0; 74 } 75}
1.1K views
1.1K views
MIT License