Skip to content

Commit 3bbe755

Browse files
perveen-nehaperveen-neha
committed
wavy loader to understand css animations
1 parent c7e3afd commit 3bbe755

File tree

3 files changed

+217
-0
lines changed

3 files changed

+217
-0
lines changed

‎wavy-Loader/README.md

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<h1>wavy loader css animation</h1>
2+
3+
4+
5+
### Use of the Project:
6+
7+
<p> learn about css animations</p>
8+
9+
<h3>Used Technologies</h3>
10+
<ul>
11+
<li>HTML5</li>
12+
<li>CSS3</li>
13+
</ul>
14+
15+
#### Steps to Use:
16+
17+
---
18+
19+
- Download or clone the repository
20+
21+
```
22+
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
23+
```
24+
25+
- Go to the directory
26+
- Run the index.html file
27+
- Start Typing!
28+
29+
<h3> Screenshots </h3>
30+
<img src = "https://github.com/ayushseth07/Web-dev-mini-projects/blob/patch/Virtual%20Keyboard/snap.PNG" />
31+
<br>

‎wavy-Loader/index.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Wavy Circle Loader Using CSS Animations</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
11+
<div class="circle">
12+
<span></span>
13+
<span></span>
14+
<span></span>
15+
<span></span>
16+
<span></span>
17+
<span></span>
18+
<span></span>
19+
<span></span>
20+
<span></span>
21+
<span></span>
22+
<span></span>
23+
<span></span>
24+
<span></span>
25+
<span></span>
26+
<span></span>
27+
</div>
28+
</body>
29+
</html>

‎wavy-Loader/style.css

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
}
5+
body {
6+
background-color: blueviolet;
7+
display: flex;
8+
justify-content: center;
9+
align-items: center;
10+
min-height: 100vh;
11+
}
12+
.circle {
13+
height: 300px;
14+
width: 300px;
15+
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+

0 commit comments

Comments
 (0)