Skip to content

Commit 910df08

Browse files
Its-NmkIts-Nmk
authored
Add loading animations with HTML and CSS
This file contains HTML and CSS for three different loading animations, including styles and structure for each loader.
1 parent 843b6a6 commit 910df08

File tree

1 file changed

+278
-0
lines changed

1 file changed

+278
-0
lines changed

‎Client-Side Components/UI Pages/Progress Loader/loaderHTML.html‎

Lines changed: 278 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,278 @@
1+
<style>
2+
/* Loader 1 CSS */
3+
.lds-ring,
4+
.lds-ring div {
5+
box-sizing: border-box;
6+
}
7+
8+
.lds-ring {
9+
display: inline-block;
10+
position: relative;
11+
width: 80px;
12+
height: 80px;
13+
}
14+
15+
.lds-ring div {
16+
box-sizing: border-box;
17+
display: block;
18+
position: absolute;
19+
width: 64px;
20+
height: 64px;
21+
margin: 8px;
22+
border: 8px solid blue;
23+
border-radius: 50%;
24+
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
25+
border-color: blue transparent transparent transparent;
26+
}
27+
28+
.lds-ring div:nth-child(1) {
29+
animation-delay: -0.45s;
30+
}
31+
32+
.lds-ring div:nth-child(2) {
33+
animation-delay: -0.3s;
34+
}
35+
36+
.lds-ring div:nth-child(3) {
37+
animation-delay: -0.15s;
38+
}
39+
40+
@keyframes lds-ring {
41+
0% {
42+
transform: rotate(0deg);
43+
}
44+
45+
100% {
46+
transform: rotate(360deg);
47+
}
48+
}
49+
50+
/* Loader 2 CSS */
51+
52+
.lds-roller,
53+
.lds-roller div,
54+
.lds-roller div:after {
55+
box-sizing: border-box;
56+
}
57+
58+
.lds-roller {
59+
display: inline-block;
60+
position: relative;
61+
width: 80px;
62+
height: 80px;
63+
}
64+
65+
.lds-roller div {
66+
animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
67+
transform-origin: 40px 40px;
68+
}
69+
70+
.lds-roller div:after {
71+
content: " ";
72+
display: block;
73+
position: absolute;
74+
width: 7.2px;
75+
height: 7.2px;
76+
border-radius: 50%;
77+
background: currentColor;
78+
margin: -3.6px 0 0 -3.6px;
79+
}
80+
81+
.lds-roller div:nth-child(1) {
82+
animation-delay: -0.036s;
83+
}
84+
85+
.lds-roller div:nth-child(1):after {
86+
top: 62.62742px;
87+
left: 62.62742px;
88+
}
89+
90+
.lds-roller div:nth-child(2) {
91+
animation-delay: -0.072s;
92+
}
93+
94+
.lds-roller div:nth-child(2):after {
95+
top: 67.71281px;
96+
left: 56px;
97+
}
98+
99+
.lds-roller div:nth-child(3) {
100+
animation-delay: -0.108s;
101+
}
102+
103+
.lds-roller div:nth-child(3):after {
104+
top: 70.90963px;
105+
left: 48.28221px;
106+
}
107+
108+
.lds-roller div:nth-child(4) {
109+
animation-delay: -0.144s;
110+
}
111+
112+
.lds-roller div:nth-child(4):after {
113+
top: 72px;
114+
left: 40px;
115+
}
116+
117+
.lds-roller div:nth-child(5) {
118+
animation-delay: -0.18s;
119+
}
120+
121+
.lds-roller div:nth-child(5):after {
122+
top: 70.90963px;
123+
left: 31.71779px;
124+
}
125+
126+
.lds-roller div:nth-child(6) {
127+
animation-delay: -0.216s;
128+
}
129+
130+
.lds-roller div:nth-child(6):after {
131+
top: 67.71281px;
132+
left: 24px;
133+
}
134+
135+
.lds-roller div:nth-child(7) {
136+
animation-delay: -0.252s;
137+
}
138+
139+
.lds-roller div:nth-child(7):after {
140+
top: 62.62742px;
141+
left: 17.37258px;
142+
}
143+
144+
.lds-roller div:nth-child(8) {
145+
animation-delay: -0.288s;
146+
}
147+
148+
.lds-roller div:nth-child(8):after {
149+
top: 56px;
150+
left: 12.28719px;
151+
}
152+
153+
@keyframes lds-roller {
154+
0% {
155+
transform: rotate(0deg);
156+
}
157+
158+
100% {
159+
transform: rotate(360deg);
160+
}
161+
}
162+
163+
/* Loader 3 CSS */
164+
165+
body {
166+
display: flex;
167+
justify-content: center;
168+
align-items: center;
169+
height: 100vh;
170+
margin: 0;
171+
}
172+
173+
/**************/
174+
175+
body {
176+
/* background-color: #202628; */
177+
}
178+
179+
.loader-circle-11 {
180+
position: relative;
181+
width: 70px;
182+
height: 70px;
183+
transform-style: preserve-3d;
184+
perspective: 400px;
185+
}
186+
187+
.loader-circle-11 .arc {
188+
position: absolute;
189+
content: "";
190+
top: 0;
191+
left: 0;
192+
width: 100%;
193+
height: 100%;
194+
border-radius: 50%;
195+
border-bottom: 5px solid #f00;
196+
}
197+
198+
.loader-circle-11 .arc:nth-child(1) {
199+
animation: rotate1 1.15s linear infinite;
200+
}
201+
202+
.loader-circle-11 .arc:nth-child(2) {
203+
animation: rotate2 1.15s linear infinite;
204+
}
205+
206+
.loader-circle-11 .arc:nth-child(3) {
207+
animation: rotate3 1.15s linear infinite;
208+
}
209+
210+
.loading .arc:nth-child(1) {
211+
animation-delay: -0.8s;
212+
}
213+
214+
.loader-circle-11 .arc:nth-child(2) {
215+
animation-delay: -0.4s;
216+
}
217+
218+
.loader-circle-11 .arc:nth-child(3) {
219+
animation-delay: 0s;
220+
}
221+
222+
@keyframes rotate1 {
223+
from {
224+
transform: rotateX(35deg) rotateY(-45deg) rotateZ(0);
225+
}
226+
227+
to {
228+
transform: rotateX(35deg) rotateY(-45deg) rotateZ(1turn);
229+
}
230+
}
231+
232+
@keyframes rotate2 {
233+
from {
234+
transform: rotateX(50deg) rotateY(10deg) rotateZ(0);
235+
}
236+
237+
to {
238+
transform: rotateX(50deg) rotateY(10deg) rotateZ(1turn);
239+
}
240+
}
241+
242+
@keyframes rotate3 {
243+
from {
244+
transform: rotateX(35deg) rotateY(55deg) rotateZ(0);
245+
}
246+
247+
to {
248+
transform: rotateX(35deg) rotateY(55deg) rotateZ(1turn);
249+
}
250+
}
251+
</style>
252+
253+
<!-- Loader 1 HTML -->
254+
<div class="lds-ring">
255+
<div></div>
256+
<div></div>
257+
<div></div>
258+
<div></div>
259+
</div>
260+
261+
<!-- Loader 2 HTML -->
262+
<div class="lds-roller">
263+
<div></div>
264+
<div></div>
265+
<div></div>
266+
<div></div>
267+
<div></div>
268+
<div></div>
269+
<div></div>
270+
<div></div>
271+
</div>
272+
273+
<!-- Loader 3 HTML -->
274+
<div class="loader-circle-11">
275+
<div class="arc"></div>
276+
<div class="arc"></div>
277+
<div class="arc"></div>
278+
</div>

0 commit comments

Comments
 (0)