Loader by TemRevil
#e8e8e8
1loading { 2 width: 100%; 3 display: flex; 4 justify-content: center; 5 align-items: center; 6} 7.loading-box { 8 width: 250px; 9 height: 100px; 10 display: flex; 11 justify-content: space-around; 12 align-items: center; 13 position: relative; 14} 15 16.color { 17 background-color: #3395ff; 18} 19.WH { 20 width: 10px; 21 height: 70px; 22 position: absolute; 23} 24 25.l1 { 26 left: 0; 27 animation: l1 4s infinite linear; 28} 29.l2 { 30 right: 0; 31 animation: l2 4s infinite linear; 32} 33.ball { 34 width: 15px; 35 height: 15px; 36 border-radius: 50%; 37 position: absolute; 38 animation: ball 4s infinite linear; 39} 40 41@keyframes l1 { 42 0% { 43 top: 0%; 44 } 45 10% { 46 top: -20%; 47 } 48 20% { 49 top: 0%; 50 } 51 30% { 52 top: 40%; 53 } 54 40% { 55 top: 0%; 56 } 57 50% { 58 top: 30%; 59 } 60 60% { 61 top: 40%; 62 } 63 70% { 64 top: 60%; 65 } 66 80% { 67 top: -10%; 68 } 69 90% { 70 top: 10%; 71 } 72 100% { 73 top: 0%; 74 } 75} 76@keyframes l2 { 77 0% { 78 bottom: 0%; 79 } 80 10% { 81 bottom: -20%; 82 } 83 20% { 84 bottom: 40%; 85 } 86 30% { 87 bottom: 60%; 88 } 89 40% { 90 bottom: 20%; 91 } 92 50% { 93 bottom: 30%; 94 } 95 60% { 96 bottom: 40%; 97 } 98 70% { 99 bottom: 60%; 100 } 101 80% { 102 bottom: -10%; 103 } 104 90% { 105 bottom: 10%; 106 } 107 100% { 108 bottom: 0%; 109 } 110} 111@keyframes ball { 112 0% { 113 top: 80%; 114 left: 96%; 115 } 116 10% { 117 top: 10%; 118 left: 3%; 119 } 120 20% { 121 top: 10%; 122 left: 90%; 123 } 124 30% { 125 top: 60%; 126 left: 3%; 127 } 128 40% { 129 top: 10%; 130 left: 90%; 131 } 132 50% { 133 top: 50%; 134 left: 3%; 135 } 136 60% { 137 top: 10%; 138 left: 90%; 139 } 140 70% { 141 top: 93%; 142 left: 3%; 143 } 144 80% { 145 top: 83%; 146 left: 90%; 147 } 148 90% { 149 top: 10%; 150 left: 3%; 151 } 152 100% { 153 top: 80%; 154 left: 90%; 155 } 156} 157
222 views
222 views
MIT License