Skip to content

Commit 964dcf2

Browse files
nandini7637nandini7637
authored
Merge pull request Dezenix#121 from Sumandeep-Kaur/loaders
Loading Animations
2 parents 7ed9983 + c04d292 commit 964dcf2

File tree

9 files changed

+272
-0
lines changed

9 files changed

+272
-0
lines changed

‎Loader/Loader_04/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+
![Loader](https://user-images.githubusercontent.com/77191007/153549640-284a7a38-5b31-4930-9bc5-1f3bf32a924a.gif)

‎Loader/Loader_04/code/index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
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+
<link rel="stylesheet" href="style.css">
8+
<title>Loading Animation</title>
9+
</head>
10+
<body class="container">
11+
<div class="loader"></div>
12+
</body>
13+
</html>

‎Loader/Loader_04/code/style.css

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
.container {
7+
height: 100vh;
8+
width: 100vw;
9+
background: #1D1F20;
10+
display: flex;
11+
align-items: center;
12+
justify-content: center;
13+
}
14+
.loader {
15+
height: 50px;
16+
width: 50px;
17+
animation: rotate 1s infinite;
18+
}
19+
.loader:before,
20+
.loader:after {
21+
height: 20px;
22+
width: 20px;
23+
border-radius: 50%;
24+
content: '';
25+
display: block;
26+
}
27+
.loader:before {
28+
animation: ball1 1s infinite;
29+
background-color: #cb2025;
30+
box-shadow: 30px 0 0 #f8b334;
31+
margin-bottom: 10px;
32+
}
33+
.loader:after {
34+
animation: ball2 1s infinite;
35+
background-color: #00a096;
36+
box-shadow: 30px 0 0 #97bf0d;
37+
}
38+
39+
@keyframes rotate {
40+
0% {
41+
-webkit-transform: rotate(0deg) scale(0.8);
42+
-moz-transform: rotate(0deg) scale(0.8);
43+
}
44+
50% {
45+
-webkit-transform: rotate(360deg) scale(1.2);
46+
-moz-transform: rotate(360deg) scale(1.2);
47+
}
48+
100% {
49+
-webkit-transform: rotate(720deg) scale(0.8);
50+
-moz-transform: rotate(720deg) scale(0.8);
51+
}
52+
}
53+
54+
@keyframes ball1 {
55+
0% {
56+
box-shadow: 30px 0 0 #f8b334;
57+
}
58+
50% {
59+
box-shadow: 0 0 0 #f8b334;
60+
margin-bottom: 0;
61+
-webkit-transform: translate(15px,15px);
62+
-moz-transform: translate(15px, 15px);
63+
}
64+
100% {
65+
box-shadow: 30px 0 0 #f8b334;
66+
margin-bottom: 10px;
67+
}
68+
}
69+
70+
@keyframes ball2 {
71+
0% {
72+
box-shadow: 30px 0 0 #97bf0d;
73+
}
74+
50% {
75+
box-shadow: 0 0 0 #97bf0d;
76+
margin-top: -20px;
77+
-webkit-transform: translate(15px,15px);
78+
-moz-transform: translate(15px, 15px);
79+
}
80+
100% {
81+
box-shadow: 30px 0 0 #97bf0d;
82+
margin-top: 0;
83+
}
84+
}

‎Loader/Loader_05/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+
![Loader](https://user-images.githubusercontent.com/77191007/153549696-8929dd42-9ada-4ec8-a284-2d0193b200b6.gif)

‎Loader/Loader_05/code/index.html

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<link rel="stylesheet" href="style.css">
9+
<title>Loading Animation</title>
10+
</head>
11+
12+
<body class="container">
13+
<div class="loader">
14+
<span class="dot"></span>
15+
<div class="dots">
16+
<span></span>
17+
<span></span>
18+
<span></span>
19+
</div>
20+
</div>
21+
</body>
22+
23+
</html>

‎Loader/Loader_05/code/style.css

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
.container {
7+
width: 100vw;
8+
height: 100vh;
9+
display: flex;
10+
align-items: center;
11+
justify-content: center;
12+
}
13+
.loader {
14+
height: 40px;
15+
width: 140px;
16+
}
17+
.dot {
18+
width: 16px;
19+
height: 16px;
20+
position: relative;
21+
top: 12px;
22+
background: #000;
23+
border-radius: 50%;
24+
animation: dot 2.8s infinite;
25+
}
26+
.dots {
27+
margin-top: 12px;
28+
margin-left: 31px;
29+
animation: dots 2.8s infinite;
30+
}
31+
span {
32+
display: block;
33+
float: left;
34+
width: 16px;
35+
height: 16px;
36+
margin-left: 16px;
37+
background: #000;
38+
border-radius: 50%;
39+
}
40+
@keyframes dot {
41+
50% {
42+
transform: translateX(96px);
43+
}
44+
}
45+
@keyframes dots {
46+
50% {
47+
transform: translateX(-31px);
48+
}
49+
}

‎Loader/Loader_06/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+
![Loader](https://user-images.githubusercontent.com/77191007/153549817-8e8f8bba-a378-4e12-9ebe-3969407a28bb.gif)

‎Loader/Loader_06/code/index.html

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
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+
<link rel="stylesheet" href="style.css">
8+
<title>Loading Animation</title>
9+
</head>
10+
<body class="container">
11+
<div class="loader">
12+
<div class="arc"></div>
13+
<div class="arc"></div>
14+
<div class="arc"></div>
15+
</div>
16+
</body>
17+
</html>

‎Loader/Loader_06/code/style.css

+65
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
.container {
7+
width: 100vw;
8+
height: 100vh;
9+
background: #000;
10+
display: flex;
11+
align-items: center;
12+
justify-content: center;
13+
}
14+
.loader {
15+
width: 4rem;
16+
height: 4rem;
17+
transform-style: preserve-3d;
18+
perspective: 800px;
19+
}
20+
.arc {
21+
position: absolute;
22+
content: "";
23+
top: 0;
24+
left: 0;
25+
width: 100%;
26+
height: 100%;
27+
border-radius: 50%;
28+
border-bottom: 3px solid hsl(196, 78%, 61%);
29+
}
30+
.arc:nth-child(1) {
31+
animation: rotate1 1.15s linear infinite;
32+
animation-delay: -0.8s;
33+
}
34+
.arc:nth-child(2) {
35+
animation: rotate2 1.15s linear infinite;
36+
animation-delay: -0.4s;
37+
}
38+
.arc:nth-child(3) {
39+
animation: rotate3 1.15s linear infinite;
40+
animation-delay: 0s;
41+
}
42+
@keyframes rotate1 {
43+
from {
44+
transform: rotateX(35deg) rotateY(-45deg) rotateZ(0);
45+
}
46+
to {
47+
transform: rotateX(35deg) rotateY(-45deg) rotateZ(1turn);
48+
}
49+
}
50+
@keyframes rotate2 {
51+
from {
52+
transform: rotateX(50deg) rotateY(10deg) rotateZ(0);
53+
}
54+
to {
55+
transform: rotateX(50deg) rotateY(10deg) rotateZ(1turn);
56+
}
57+
}
58+
@keyframes rotate3 {
59+
from {
60+
transform: rotateX(35deg) rotateY(55deg) rotateZ(0);
61+
}
62+
to {
63+
transform: rotateX(35deg) rotateY(55deg) rotateZ(1turn);
64+
}
65+
}

0 commit comments

Comments
 (0)