Skip to content

Commit 214d996

Browse files
sahilataharsahilatahar
committed
Loaders update
1 parent a6a2ca7 commit 214d996

File tree

6 files changed

+123
-134
lines changed

6 files changed

+123
-134
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@
1919
| 12 | [Image Frame](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/image-frame) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/image-frame/) |
2020
| 13 | [Image Slider](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/image-slider) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/image-slider/) |
2121
| 14 | [Internet Connection Checker](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/internet-connection-checker) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/internet-connection-checker/) |
22-
| 15 | [Loaders](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/loaders) | Live Demo |
22+
| 15 | [Loaders](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/loaders) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/loaders/) |
2323
| 16 | [Profile Card](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/profile-card) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/profile-card/) |
2424
| 17 | [QR Code Generator](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/qr-code-generator) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/qr-code-generator/) |
2525
| 18 | [Quetes Generator](https://github.com/sahilatahar/HTML-CSS-JavaScript/tree/main/quetes-generator) | [Live Demo](https://sahilatahar.github.io/HTML-CSS-JavaScript/quetes-generator/) |

‎loaders/circular-loader/index.html

Lines changed: 0 additions & 18 deletions
This file was deleted.

‎loaders/circular-loader/style.css

Lines changed: 0 additions & 79 deletions
This file was deleted.

‎loaders/index.html

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
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+
<title>Loaders</title>
9+
<link rel="stylesheet" href="style.css">
10+
</head>
11+
12+
<body>
13+
<div class="container">
14+
<!-- Loader 1 HTML -->
15+
<div class="box box-1">
16+
<div class="loader">
17+
<div class="circle"></div>
18+
</div>
19+
</div>
20+
<!-- Loader 2 HTML -->
21+
<div class="box box-2">
22+
<div class="loader">
23+
<span id="rect_loader1"></span>
24+
<span id="rect_loader2"></span>
25+
<span id="rect_loader3"></span>
26+
</div>
27+
</div>
28+
</div>
29+
</body>
30+
31+
</html>

‎loaders/rectangle-loader/index.html

Lines changed: 0 additions & 20 deletions
This file was deleted.

‎loaders/rectangle-loader/style.css renamed to ‎loaders/style.css

Lines changed: 91 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,107 @@
11
* {
2-
padding: 0;
32
margin: 0;
3+
padding: 0;
44
box-sizing: border-box;
55
}
66

7-
body {
8-
height: 100vh;
9-
display: flex;
10-
justify-content: center;
11-
align-items: center;
7+
.container {
8+
display: grid;
9+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
10+
gap: 1rem;
11+
}
12+
13+
.box {
14+
height: 200px;
15+
display: grid;
16+
place-items: center;
17+
}
18+
19+
/* Loader 1 CSS */
20+
21+
.box-1 .loader {
22+
width: 80px;
23+
height: 80px;
24+
}
25+
26+
.box-1 .circle {
27+
height: 100%;
28+
border-radius: 50%;
29+
animation: animate 2s linear infinite;
30+
-o-animation: animate 2s linear infinite;
31+
-webkit-animation: animate 2s linear infinite;
32+
-moz-animation: animate 2s linear infinite;
33+
border: 8px solid #30395290;
34+
border-top: 8px solid #303952;
35+
1236
}
1337

14-
.loader {
38+
@-webkit-keyframes animate {
39+
0% {
40+
transform: rotateZ(0deg);
41+
}
42+
43+
100% {
44+
transform: rotateZ(360deg);
45+
}
46+
}
47+
48+
@-o-keyframes animate {
49+
0% {
50+
transform: rotateZ(0deg);
51+
}
52+
53+
100% {
54+
transform: rotateZ(360deg);
55+
}
56+
}
57+
58+
@-moz-keyframes animate {
59+
0% {
60+
transform: rotateZ(0deg);
61+
}
62+
63+
100% {
64+
transform: rotateZ(360deg);
65+
}
66+
}
67+
68+
@-ms-keyframes animate {
69+
0% {
70+
transform: rotateZ(0deg);
71+
}
72+
73+
100% {
74+
transform: rotateZ(360deg);
75+
}
76+
}
77+
78+
@keyframes animate {
79+
0% {
80+
transform: rotateZ(0deg);
81+
}
82+
83+
100% {
84+
transform: rotateZ(360deg);
85+
}
86+
}
87+
88+
/* Loader 2 CSS */
89+
.box-2 .loader {
1590
width: 100px;
1691
height: 100px;
1792
position: relative;
1893
}
1994

20-
.loader>span {
95+
.box-2 .loader>span {
2196
position: absolute;
2297
display: inline-block;
2398
width: 40%;
2499
height: 40%;
25100
background-color: #1a1818;
26-
animation: animate 2s linear infinite;
27-
-o-animation: animate 2s linear infinite;
28-
-webkit-animation: animate 2s linear infinite;
29-
-moz-animation: animate 2s linear infinite;
101+
animation: animate-2 2s linear infinite;
102+
-o-animation: animate-2 2s linear infinite;
103+
-webkit-animation: animate-2 2s linear infinite;
104+
-moz-animation: animate-2 2s linear infinite;
30105
border-radius: 3px;
31106
}
32107

@@ -45,7 +120,7 @@ body {
45120
}
46121

47122

48-
@-webkit-keyframes animate {
123+
@-webkit-keyframes animate-2 {
49124
0% {
50125
top: 0%;
51126
left: 0%;
@@ -72,7 +147,7 @@ body {
72147
}
73148
}
74149

75-
@-o-keyframes animate {
150+
@-o-keyframes animate-2 {
76151
0% {
77152
top: 0%;
78153
left: 0%;
@@ -99,7 +174,7 @@ body {
99174
}
100175
}
101176

102-
@-moz-keyframes animate {
177+
@-moz-keyframes animate-2 {
103178
0% {
104179
top: 0%;
105180
left: 0%;
@@ -126,7 +201,7 @@ body {
126201
}
127202
}
128203

129-
@keyframes animate {
204+
@keyframes animate-2 {
130205
0% {
131206
top: 0%;
132207
left: 0%;

0 commit comments

Comments
 (0)