Skip to content

Commit 831403c

Browse files
Ayushparikh-codeAyushparikh-code
authored
Merge pull request #761 from ARVINDH-CT06/patch-9
Update style.css
2 parents 7c65a5b + 6750d09 commit 831403c

File tree

1 file changed

+97
-147
lines changed

1 file changed

+97
-147
lines changed

‎wavy-Loader/style.css‎

Lines changed: 97 additions & 147 deletions
Original file line numberDiff line numberDiff line change
@@ -1,157 +1,107 @@
1+
/* Global Reset */
12
* {
23
padding: 0;
34
margin: 0;
4-
}
5-
body {
5+
box-sizing: border-box;
6+
}
7+
8+
/* Body Styling */
9+
body {
610
background-color: blueviolet;
711
display: flex;
812
justify-content: center;
913
align-items: center;
1014
min-height: 100vh;
11-
}
12-
.circle {
13-
height: 300px;
15+
}
16+
17+
/* Circle Container Styling */
18+
.circle {
1419
width: 300px;
20+
height: 300px;
1521
position: relative;
16-
transform-style:preserve-3d ;
17-
/* transform: perspective(500px) rotateX(60deg); */
18-
}
19-
.circle span {
20-
border: 5px solid white;
21-
border-radius: 50%;
22-
position: absolute;
23-
display: block;
24-
box-shadow: 0 5px 0 #ccc,
25-
inset 0 5px 0 #ccc;
26-
box-sizing: border-box;
27-
animation: load 3s ease-in-out infinite ;
28-
}
29-
@keyframes load{
30-
0%, 100%{
31-
transform: translateY(-100px);
32-
}
33-
50%{
34-
transform: translateY(100px);
35-
}
36-
}
37-
.circle span:nth-child(1)
38-
{
39-
top: 0;
40-
bottom: 0;
41-
left: 0;
42-
right: 0;
43-
animation-delay: 1.4s;
44-
}
45-
.circle span:nth-child(2)
46-
{
47-
top: 10px;
48-
bottom: 10px;
49-
left: 10px;
50-
right: 10px;
51-
animation-delay:1.3s;
52-
}
53-
.circle span:nth-child(3)
54-
{
55-
top: 20px;
56-
bottom: 20px;
57-
left: 20px;
58-
right: 20px;
59-
animation-delay: 1.2s;
60-
}
61-
.circle span:nth-child(4)
62-
{
63-
top: 30px;
64-
bottom: 30px;
65-
left: 30px;
66-
right: 30px;
67-
animation-delay: 1.1s;
68-
}
69-
.circle span:nth-child(5)
70-
{
71-
top: 40px;
72-
bottom: 40px;
73-
left: 40px;
74-
right: 40px;
75-
animation-delay: 1.0s;
76-
}
77-
.circle span:nth-child(6)
78-
{
79-
top: 50px;
80-
bottom: 50px;
81-
left: 50px;
82-
right: 50px;
83-
animation-delay: 0.9s;
84-
}
85-
.circle span:nth-child(7)
86-
{
87-
top: 60px;
88-
bottom: 60px;
89-
left: 60px;
90-
right: 60px;
91-
animation-delay: 0.8s;
92-
}
93-
.circle span:nth-child(8)
94-
{
95-
top: 70px;
96-
bottom: 70px;
97-
left: 70px;
98-
right: 70px;
99-
animation-delay: 0.7s;
100-
}
101-
.circle span:nth-child(9)
102-
{
103-
top: 80px;
104-
bottom: 80px;
105-
left: 80px;
106-
right: 80px;
107-
animation-delay: 0.6s;
108-
}
109-
.circle span:nth-child(10)
110-
{
111-
top: 90px;
112-
bottom: 90px;
113-
left: 90px;
114-
right: 90px;
115-
animation-delay: 0.5s;
116-
}
117-
.circle span:nth-child(11)
118-
{
119-
top: 100px;
120-
bottom: 100px;
121-
left: 100px;
122-
right: 100px;
123-
animation-delay: 0.4s;
124-
}
125-
.circle span:nth-child(12)
126-
{
127-
top: 110px;
128-
bottom: 110px;
129-
left: 110px;
130-
right: 110px;
131-
animation-delay: 0.3s;
132-
}
133-
.circle span:nth-child(13)
134-
{
135-
top: 120px;
136-
bottom: 120px;
137-
left: 120px;
138-
right: 120px;
139-
animation-delay: 0.2s;
140-
}
141-
.circle span:nth-child(14)
142-
{
143-
top: 130px;
144-
bottom: 130px;
145-
left: 130px;
146-
right: 130px;
147-
animation-delay: 0.1s;
148-
}
149-
.circle span:nth-child(15)
150-
{
151-
top: 140px;
152-
bottom: 140px;
153-
left: 140px;
154-
right: 140px;
155-
animation-delay: 0s;
156-
}
157-
22+
transform-style: preserve-3d;
23+
}
24+
25+
/* Circle Span Styling */
26+
.circle span {
27+
border: 5px solid white;
28+
border-radius: 50%;
29+
position: absolute;
30+
display: block;
31+
animation: load 3s ease-in-out infinite;
32+
box-shadow: 0 5px 0 rgba(0, 0, 0, 0.2), inset 0 5px 0 rgba(255, 255, 255, 0.5);
33+
}
34+
35+
/* Keyframe Animation for Wavy Effect */
36+
@keyframes load {
37+
0%, 100% {
38+
transform: translateY(-100px);
39+
}
40+
50% {
41+
transform: translateY(100px);
42+
}
43+
}
44+
45+
/* Span Position and Animation Delay */
46+
.circle span:nth-child(1) {
47+
top: 0;
48+
bottom: 0;
49+
left: 0;
50+
right: 0;
51+
animation-delay: 1.4s;
52+
}
53+
54+
.circle span:nth-child(2) {
55+
top: 10px;
56+
bottom: 10px;
57+
left: 10px;
58+
right: 10px;
59+
animation-delay: 1.3s;
60+
}
61+
62+
.circle span:nth-child(3) {
63+
top: 20px;
64+
bottom: 20px;
65+
left: 20px;
66+
right: 20px;
67+
animation-delay: 1.2s;
68+
}
69+
70+
.circle span:nth-child(4) {
71+
top: 30px;
72+
bottom: 30px;
73+
left: 30px;
74+
right: 30px;
75+
animation-delay: 1.1s;
76+
}
77+
78+
.circle span:nth-child(5) {
79+
top: 40px;
80+
bottom: 40px;
81+
left: 40px;
82+
right: 40px;
83+
animation-delay: 1.0s;
84+
}
85+
86+
.circle span:nth-child(6) {
87+
top: 50px;
88+
bottom: 50px;
89+
left: 50px;
90+
right: 50px;
91+
animation-delay: 0.9s;
92+
}
93+
94+
.circle span:nth-child(7) {
95+
top: 60px;
96+
bottom: 60px;
97+
left: 60px;
98+
right: 60px;
99+
animation-delay: 0.8s;
100+
}
101+
102+
.circle span:nth-child(8) {
103+
top: 70px;
104+
bottom: 70px;
105+
left: 70px;
106+
right: 70px;
107+
anima

0 commit comments

Comments
 (0)