Skip to content

Commit ff09305

Browse files
KashyapB02KashyapB02
committed
Fix: Added code for 'Pre Loader Animation' (Issue Dezenix#37)
1 parent 0265bb8 commit ff09305

File tree

4 files changed

+126
-0
lines changed

4 files changed

+126
-0
lines changed

‎Loader/Loader_03/README.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
## Pre Loader Animation
2+
3+
<h3> Tech Stack Used <img src = "https://media2.giphy.com/media/QssGEmpkyEOhBCb7e1/giphy.gif?cid=ecf05e47a0n3gi1bfqntqmob8g9aid1oyj2wr3ds3mg700bl&rid=giphy.gif" width = 32px> </h3>
4+
<p align="left"> <a href="https://www.w3.org/html/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-original-wordmark.svg" alt="html5" width="40" height="40"/> </a> <a href="https://www.w3schools.com/css/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-original-wordmark.svg" alt="css3" width="40" height="40"/> </a> </p>
5+
6+
### Preview
7+
![](assets/Loader_3.gif)

‎Loader/Loader_03/assets/Loader_3.gif

188 KB
Loading

‎Loader/Loader_03/code/index.html

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html lang = "en">
3+
4+
<!-- Head Starts Here -->
5+
<head>
6+
7+
<meta charset = "UTF-8">
8+
<meta name = "description" content = "">
9+
<meta name = "keywords" content = "">
10+
<meta name = "author" content = "">
11+
<meta name = "viewport" content = "width = device-width, initial-scale=1.0">
12+
13+
<title>Pre Loader Animation</title>
14+
15+
<!-- Style Sheet Link -->
16+
<link rel = "stylesheet" href = "style.css">
17+
18+
</head>
19+
20+
<!-- Body Starts Here -->
21+
<body class = "main">
22+
23+
<!-- Outer Box -->
24+
<div class = "box">
25+
26+
<!-- Animated Circle Container -->
27+
<div class = "container">
28+
29+
<!-- Animated Circles -->
30+
<span class = "circle"></span>
31+
<span class = "circle"></span>
32+
<span class = "circle"></span>
33+
<span class = "circle"></span>
34+
35+
</div>
36+
</div>
37+
38+
</body>
39+
</html>

‎Loader/Loader_03/code/style.css

+80
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
.main {
2+
3+
display: flex;
4+
justify-content: center;
5+
align-items: center;
6+
width: 100vw;
7+
height: 100vh;
8+
background-color: rgba(202, 240, 248, 1);
9+
}
10+
11+
.box {
12+
13+
width: 250px;
14+
height: 250px;
15+
background: rgba(3, 4, 94, 1);
16+
display: flex;
17+
justify-content: center;
18+
align-items: center;
19+
box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.3);
20+
}
21+
22+
.container {
23+
24+
height: 15px;
25+
width: 105px;
26+
display: flex;
27+
position: relative;
28+
/* flex-wrap: wrap; */
29+
}
30+
31+
.circle {
32+
33+
width: 15px;
34+
height: 15px;
35+
border-radius: 50%;
36+
background-color: white;
37+
animation: circulate 500ms linear 0ms infinite;
38+
margin-right: 30px;
39+
}
40+
41+
.circle:first-child {
42+
43+
position: absolute;
44+
top: 0;
45+
left: 0;
46+
animation: pop-out 500ms linear 0ms infinite;
47+
}
48+
49+
.circle:last-child {
50+
51+
position: absolute;
52+
top: 0;
53+
right: 0;
54+
margin-right: 0;
55+
animation: pop-out 500ms linear 0s infinite reverse;
56+
}
57+
58+
@keyframes pop-out {
59+
60+
from {
61+
62+
transform: scale(0, 0);
63+
opacity: 0;
64+
} to {
65+
66+
transform: scale(1, 1);
67+
opacity: 1;
68+
}
69+
}
70+
71+
@keyframes circulate {
72+
73+
from {
74+
75+
transform: translateX(0px);
76+
} to {
77+
78+
transform: translateX(45px);
79+
}
80+
}

0 commit comments

Comments
 (0)