Loader by Praashoo7 made with CSS

#212121

1.loader {
2  display: flex;
3  align-items: center;
4  margin-left: -0.65em;
5}
6
7.load1 {
8  position: absolute;
9  content: "";
10  margin-right: 1em;
11  height: 1.2em;
12  width: 1.2em;
13  border-radius: 5px;
14  background-color: white;
15  box-shadow: 0 1px 7px rgba(0,0,0,0.3);
16}
17
18.load2 {
19  position: absolute;
20  margin-right: 1em;
21  content: "";
22  height: 1.2em;
23  width: 1.2em;
24  border-radius: 5px;
25  background-color: white;
26  animation: 2s flow2 infinite;
27}
28
29.load3 {
30  position: absolute;
31  margin-right: 1em;
32  content: "";
33  height: 1.2em;
34  width: 1.2em;
35  border-radius: 5px;
36  background-color: white;
37  animation: 2s flow3 infinite;
38}
39
40.load4 {
41  position: absolute;
42  margin-right: 1em;
43  content: "";
44  height: 1.2em;
45  width: 1.2em;
46  border-radius: 5px;
47  background-color: white;
48  animation: 2s flow4 infinite;
49}
50
51.load5 {
52  position: absolute;
53  margin-right: 1em;
54  content: "";
55  height: 1.2em;
56  width: 1.2em;
57  border-radius: 5px;
58  background-color: white;
59  animation: 2s flow5 infinite;
60}
61
62.load6 {
63  position: absolute;
64  margin-right: 1em;
65  content: "";
66  height: 1.2em;
67  width: 1.2em;
68  border-radius: 5px;
69  background-color: white;
70  animation: 6s flow6 infinite;
71}
72
73.load7 {
74  position: absolute;
75  margin-right: 1em;
76  content: "";
77  height: 1.2em;
78  width: 1.2em;
79  border-radius: 5px;
80  background-color: white;
81  animation: 6s flow7 infinite;
82}
83
84.load8 {
85  position: absolute;
86  margin-right: 1em;
87  content: "";
88  height: 1.2em;
89  width: 1.2em;
90  border-radius: 5px;
91  background-color: white;
92  animation: 6s flow8 infinite;
93}
94
95.load9 {
96  position: absolute;
97  content: "";
98  height: 1.2em;
99  width: 1.2em;
100  border-radius: 5px;
101  background-color: white;
102  animation: 6s flow9 infinite;
103}
104
105@keyframes flow2 {
106  50% {
107    transform: translateX(3em);
108    box-shadow: 0 1px 7px rgba(0,0,0,0.3);
109  }
110
111  100% {
112    transform: translateX(0em);
113  }
114}
115
116@keyframes flow3 {
117  50% {
118    transform: translateX(-3em);
119    box-shadow: 0 1px 7px rgba(0,0,0,0.3);
120  }
121
122  100% {
123    transform: translateX(0em);
124  }
125}
126
127@keyframes flow4 {
128  50% {
129    transform: translateY(3em);
130    box-shadow: 0 1px 7px rgba(0,0,0,0.3);
131  }
132
133  100% {
134    transform: translateY(0em);
135  }
136}
137
138@keyframes flow5 {
139  50% {
140    transform: translateY(-3em);
141    box-shadow: 0 1px 7px rgba(0,0,0,0.3);
142  }
143
144  100% {
145    transform: translateY(0em);
146  }
147}
148
149@keyframes flow6 {
150  30% {
151    transform: translateX(3em);
152    box-shadow: 0 1px 7px rgba(0,0,0,0.3);
153  }
154
155  60% {
156    transform: translateX(3em) translateY(-3em);
157    box-shadow: 0 1px 7px rgba(0,0,0,0.3);
158  }
159
160  100% {
161    transform: translateX(0em) translateY(0em);
162  }
163}
164
165@keyframes flow7 {
166  30% {
167    transform: translateX(-3em);
168    box-shadow: 0 1px 7px rgba(0,0,0,0.3);
169  }
170
171  60% {
172    transform: translateX(-3em) translateY(3em);
173    box-shadow: 0 1px 7px rgba(0,0,0,0.3);
174  }
175
176  100% {
177    transform: translateX(0em) translateY(0em);
178  }
179}
180
181@keyframes flow8 {
182  30% {
183    transform: translateY(3em);
184    box-shadow: 0 1px 7px rgba(0,0,0,0.3);
185  }
186
187  60% {
188    transform: translateY(3em) translateX(3em);
189    box-shadow: 0 1px 7px rgba(0,0,0,0.3);
190  }
191
192  100% {
193    transform: translateX(0em) translateY(0em);
194  }
195}
196
197@keyframes flow9 {
198  30% {
199    transform: translateY(-3em);
200    box-shadow: 0 1px 7px rgba(0,0,0,0.3);
201  }
202
203  60% {
204    transform: translateY(-3em) translateX(-3em);
205    box-shadow: 0 1px 7px rgba(0,0,0,0.3);
206  }
207
208  100% {
209    transform: translateX(0em) translateY(0em);
210  }
211}

.loader {
  display: flex;
  align-items: center;
  margin-left: -0.65em;
}

.load1 {
  position: absolute;
  content: "";
  margin-right: 1em;
  height: 1.2em;
  width: 1.2em;
  border-radius: 5px;
  background-color: white;
  box-shadow: 0 1px 7px rgba(0,0,0,0.3);
}

.load2 {
  position: absolute;
  margin-right: 1em;
  content: "";
  height: 1.2em;
  width: 1.2em;
  border-radius: 5px;
  background-color: white;
  animation: 2s flow2 infinite;
}

.load3 {
  position: absolute;
  margin-right: 1em;
  content: "";
  height: 1.2em;
  width: 1.2em;
  border-radius: 5px;
  background-color: white;
  animation: 2s flow3 infinite;
}

.load4 {
  position: absolute;
  margin-right: 1em;
  content: "";
  height: 1.2em;
  width: 1.2em;
  border-radius: 5px;
  background-color: white;
  animation: 2s flow4 infinite;
}

.load5 {
  position: absolute;
  margin-right: 1em;
  content: "";
  height: 1.2em;
  width: 1.2em;
  border-radius: 5px;
  background-color: white;
  animation: 2s flow5 infinite;
}

.load6 {
  position: absolute;
  margin-right: 1em;
  content: "";
  height: 1.2em;
  width: 1.2em;
  border-radius: 5px;
  background-color: white;
  animation: 6s flow6 infinite;
}

.load7 {
  position: absolute;
  margin-right: 1em;
  content: "";
  height: 1.2em;
  width: 1.2em;
  border-radius: 5px;
  background-color: white;
  animation: 6s flow7 infinite;
}

.load8 {
  position: absolute;
  margin-right: 1em;
  content: "";
  height: 1.2em;
  width: 1.2em;
  border-radius: 5px;
  background-color: white;
  animation: 6s flow8 infinite;
}

.load9 {
  position: absolute;
  content: "";
  height: 1.2em;
  width: 1.2em;
  border-radius: 5px;
  background-color: white;
  animation: 6s flow9 infinite;
}

@keyframes flow2 {
  50% {
    transform: translateX(3em);
    box-shadow: 0 1px 7px rgba(0,0,0,0.3);
  }

  100% {
    transform: translateX(0em);
  }
}

@keyframes flow3 {
  50% {
    transform: translateX(-3em);
    box-shadow: 0 1px 7px rgba(0,0,0,0.3);
  }

  100% {
    transform: translateX(0em);
  }
}

@keyframes flow4 {
  50% {
    transform: translateY(3em);
    box-shadow: 0 1px 7px rgba(0,0,0,0.3);
  }

  100% {
    transform: translateY(0em);
  }
}

@keyframes flow5 {
  50% {
    transform: translateY(-3em);
    box-shadow: 0 1px 7px rgba(0,0,0,0.3);
  }

  100% {
    transform: translateY(0em);
  }
}

@keyframes flow6 {
  30% {
    transform: translateX(3em);
    box-shadow: 0 1px 7px rgba(0,0,0,0.3);
  }

  60% {
    transform: translateX(3em) translateY(-3em);
    box-shadow: 0 1px 7px rgba(0,0,0,0.3);
  }

  100% {
    transform: translateX(0em) translateY(0em);
  }
}

@keyframes flow7 {
  30% {
    transform: translateX(-3em);
    box-shadow: 0 1px 7px rgba(0,0,0,0.3);
  }

  60% {
    transform: translateX(-3em) translateY(3em);
    box-shadow: 0 1px 7px rgba(0,0,0,0.3);
  }

  100% {
    transform: translateX(0em) translateY(0em);
  }
}

@keyframes flow8 {
  30% {
    transform: translateY(3em);
    box-shadow: 0 1px 7px rgba(0,0,0,0.3);
  }

  60% {
    transform: translateY(3em) translateX(3em);
    box-shadow: 0 1px 7px rgba(0,0,0,0.3);
  }

  100% {
    transform: translateX(0em) translateY(0em);
  }
}

@keyframes flow9 {
  30% {
    transform: translateY(-3em);
    box-shadow: 0 1px 7px rgba(0,0,0,0.3);
  }

  60% {
    transform: translateY(-3em) translateX(-3em);
    box-shadow: 0 1px 7px rgba(0,0,0,0.3);
  }

  100% {
    transform: translateX(0em) translateY(0em);
  }
}

Toggle prefixes

783 views

Comments

No variations yet

MIT License

Copyright - 2023 Praashoo7 (Prashant) 

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.