Loader by NlghtM4re
#212121
1.container { 2 position: absolute; 3 top: 50%; 4 left: 50%; 5 transform: translate(-50%, -50%); 6 display: flex; 7} 8 9.dash { 10 margin: 0 15px; 11 width: 35px; 12 height: 15px; 13 border-radius: 8px; 14 background: rgb(82, 159, 246); 15 box-shadow: rgb(82, 159, 246) 0 0 15px 0; 16} 17 18.first { 19 margin-right: -18px; 20 transform-origin: center left; 21 animation: spin 3s linear infinite; 22} 23 24.seconde { 25 transform-origin: center right; 26 animation: spin2 3s linear infinite; 27 animation-delay: .2s; 28} 29 30.third { 31 transform-origin: center right; 32 animation: spin3 3s linear infinite; 33 animation-delay: .3s; 34} 35 36.fourth { 37 transform-origin: center right; 38 animation: spin4 3s linear infinite; 39 animation-delay: .4s; 40} 41 42@keyframes spin { 43 0% { 44 transform: rotate(0deg); 45 } 46 47 25% { 48 transform: rotate(360deg); 49 } 50 51 30% { 52 transform: rotate(370deg); 53 } 54 55 35% { 56 transform: rotate(360deg); 57 } 58 59 100% { 60 transform: rotate(360deg); 61 } 62} 63 64@keyframes spin2 { 65 0% { 66 transform: rotate(0deg); 67 } 68 69 20% { 70 transform: rotate(0deg); 71 } 72 73 30% { 74 transform: rotate(-180deg); 75 } 76 77 35% { 78 transform: rotate(-190deg); 79 } 80 81 40% { 82 transform: rotate(-180deg); 83 } 84 85 78% { 86 transform: rotate(-180deg); 87 } 88 89 95% { 90 transform: rotate(-360deg); 91 } 92 93 98% { 94 transform: rotate(-370deg); 95 } 96 97 100% { 98 transform: rotate(-360deg); 99 } 100} 101 102@keyframes spin3 { 103 0% { 104 transform: rotate(0deg); 105 } 106 107 27% { 108 transform: rotate(0deg); 109 } 110 111 40% { 112 transform: rotate(180deg); 113 } 114 115 45% { 116 transform: rotate(190deg); 117 } 118 119 50% { 120 transform: rotate(180deg); 121 } 122 123 62% { 124 transform: rotate(180deg); 125 } 126 127 75% { 128 transform: rotate(360deg); 129 } 130 131 80% { 132 transform: rotate(370deg); 133 } 134 135 85% { 136 transform: rotate(360deg); 137 } 138 139 100% { 140 transform: rotate(360deg); 141 } 142} 143 144@keyframes spin4 { 145 0% { 146 transform: rotate(0deg); 147 } 148 149 38% { 150 transform: rotate(0deg); 151 } 152 153 60% { 154 transform: rotate(-360deg); 155 } 156 157 65% { 158 transform: rotate(-370deg); 159 } 160 161 75% { 162 transform: rotate(-360deg); 163 } 164 165 100% { 166 transform: rotate(-360deg); 167 } 168}
1K views
1K views
MIT License