Skip to content

Commit 6d65ca5

Browse files
pulkit-30pulkit-30
authored
Merge pull request #53 from JonathanAllisson/loader-glowing
add loader glowing
2 parents 321cca9 + 8e0b1f3 commit 6d65ca5

File tree

5 files changed

+123
-0
lines changed

5 files changed

+123
-0
lines changed

‎README.md

+1
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@
5353
| Neumorphism Gradient Loader | https://lavishbansal17.github.io/Neumorphism-Gradient-Loader/ |
5454
| Card Flip on Hold | https://gabrielgomeso.github.io/card_flip.html |
5555
| Credit Cards | https://iqbalutomo.github.io/credit-cards/ |
56+
| Loader Glowing | https://jonathanallisson.github.io/loader/ |
5657

5758
---
5859

‎loader-glowing/Readme.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
# Loader glowing
2+
<img src="./loader.png">
3+
by [JonathanAllisson](https://github.com/JonathanAllisson)

‎loader-glowing/index.html

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
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="./styles.css">
8+
<title>Loader</title>
9+
</head>
10+
<body>
11+
<div class="loader">
12+
<span></span>
13+
<span></span>
14+
<span></span>
15+
<span></span>
16+
</div>
17+
</body>
18+
</html>

‎loader-glowing/loader.png

16 KB
Loading

‎loader-glowing/styles.css

+101
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
display: flex;
9+
justify-content: center;
10+
align-items: center;
11+
min-height: 100vh;
12+
background: #000;
13+
}
14+
15+
.loader {
16+
position: relative;
17+
width: 200px;
18+
height: 200px;
19+
overflow: hidden;
20+
}
21+
22+
.loader span {
23+
position: absolute;
24+
display: block;
25+
}
26+
27+
.loader span:nth-child(1) {
28+
top: 0;
29+
left: -100%;
30+
width: 100%;
31+
height: 40px;
32+
background: linear-gradient(90deg, transparent, #03e9f4);
33+
animation: animate1 1s linear infinite;
34+
animation-delay: 0s;
35+
}
36+
37+
@keyframes animate1 {
38+
0% {
39+
left: -100%;
40+
}
41+
100% {
42+
left: 100%;
43+
}
44+
}
45+
46+
.loader span:nth-child(3) {
47+
bottom: 0;
48+
left: -100%;
49+
width: 100%;
50+
height: 40px;
51+
background: linear-gradient(270deg, transparent, #03e9f4);
52+
animation: animate3 1s linear infinite;
53+
animation-delay: 0s;
54+
}
55+
56+
@keyframes animate3 {
57+
0% {
58+
left: 100%;
59+
}
60+
100% {
61+
left: -100%;
62+
}
63+
}
64+
65+
.loader span:nth-child(2) {
66+
right: 0;
67+
top: -100%;
68+
width: 40px;
69+
height: 100%;
70+
background: linear-gradient(180deg, transparent, #03e9f4);
71+
animation: animate2 1s linear infinite;
72+
animation-delay: 0.5s;
73+
}
74+
75+
@keyframes animate2 {
76+
0% {
77+
top: -100%;
78+
}
79+
100% {
80+
top: 100%;
81+
}
82+
}
83+
84+
.loader span:nth-child(4) {
85+
left: 0;
86+
top: 100%;
87+
width: 40px;
88+
height: 100%;
89+
background: linear-gradient(0deg, transparent, #03e9f4);
90+
animation: animate4 1s linear infinite;
91+
animation-delay: 0.5s;
92+
}
93+
94+
@keyframes animate4 {
95+
0% {
96+
top: 100%;
97+
}
98+
100% {
99+
top: -100%;
100+
}
101+
}

0 commit comments

Comments
 (0)