Skip to content

Commit c7c2d1a

Browse files
dev-shettydev-shetty
authored
Merge pull request #8 from KSS-CHAITHANYA/Loading-Page
Loading page
2 parents 438d213 + 2712776 commit c7c2d1a

File tree

3 files changed

+99
-9
lines changed

3 files changed

+99
-9
lines changed

‎Loading Page/index.html‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head> </head>
5+
6+
<body>
7+
<span class="back">
8+
<span>L</span>
9+
<span>o</span>
10+
<span>a</span>
11+
<span>d</span>
12+
<span>i</span>
13+
<span>n</span>
14+
<span>g</span>
15+
</span>
16+
</body>
17+
18+
</html>

‎Loading Page/style.css‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
@import url(https://fonts.googleapis.com/css?family=Roboto:300);
2+
3+
html {
4+
height: 90%;
5+
}
6+
7+
body {
8+
background: #3F485B;
9+
display: flex;
10+
align-items: center;
11+
height: 90%;
12+
}
13+
14+
.back {
15+
margin: 1em auto;
16+
font-family: "Roboto";
17+
}
18+
19+
.back span {
20+
font-size: 3em;
21+
color: #F2C640;
22+
background: #262B37;
23+
display: table-cell;
24+
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.3), 0 5px 0 #ccc;
25+
padding: 0 15px;
26+
line-height: 100px;
27+
animation: jumb 2s infinite;
28+
}
29+
30+
@keyframes jumb {
31+
0% {
32+
transform: translateY(0px)
33+
}
34+
35+
50% {
36+
transform: translateY(-30px);
37+
box-shadow: 0 15px 0 rgb(242, 198, 64);
38+
}
39+
40+
100% {
41+
transform: translateY(0px)
42+
}
43+
}
44+
45+
.back span:nth-child(1) {
46+
animation-delay: 0s;
47+
}
48+
49+
.back span:nth-child(2) {
50+
animation-delay: .1s;
51+
}
52+
53+
.back span:nth-child(3) {
54+
animation-delay: .2s;
55+
}
56+
57+
.back span:nth-child(4) {
58+
animation-delay: .3s;
59+
}
60+
61+
.back span:nth-child(5) {
62+
animation-delay: .4s;
63+
}
64+
65+
.back span:nth-child(6) {
66+
animation-delay: .5s;
67+
}
68+
69+
.back span:nth-child(7) {
70+
animation-delay: .6s;
71+
}

‎README.md‎

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -29,16 +29,17 @@ To use these CSS animations and effects in your Local System , simply download o
2929

3030
| Project Name | CodePen Link | Preview | Source Code |
3131
| --------------------- | ----------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
32-
| Cart Item | [Go Live](https://codepen.io/deveesh_shetty_12/pen/rNKXvKm) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/9b12a923-f70a-411e-8964-0273e507576a" alt="Cart Item" width="400" height="400"> | [Code - Cart Item](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Cart%20Item) |
33-
| Social Login | [Go Live](https://codepen.io/pen/KKejzVy) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/18d4af5d-459e-4b45-8c51-aa253ff88da9" alt="Social Login" width="400" height="400"> | [Code - Social Login](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Social%20Login) |
34-
| Counter using Closure | [Go Live](https://codepen.io/pen/vYVjLqx) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/eefb6819-f21e-4b6b-8bcd-3a08368bcd51" alt="Counter" width="400" height="400"> | [Code - Counter](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Counter) |
35-
| Accordion | [Go Live](https://codepen.io/pen/YzJLEbb) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/8417ccd9-8363-4d3f-920b-1b7013ba1158" alt="Accordion" width="400" height="400"> | [Code - Accordion](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Accordion) |
36-
| 3D Cube | [Go Live](https://codepen.io/pen/mdzKEQg) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/07cf6fab-5941-44fa-8964-dc73175239a4" alt="3D Cube" width="400" height="400"> | [Code - 3D Cube](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/3D%20Cube) |
37-
| Festival Lighting | [Go Live](https://codepen.io/pen/NWOzdvK) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/477cc242-4b77-4e50-bcd7-d64cfce2ed34" alt="Festival Lighting" width="400" height="400"> | [Code - Festival Lighting](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Festival%20Lighting) |
38-
| Indian Flag | [Go Live](https://codepen.io/pen/xxyzqVa) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/68843a36-a400-4e48-8907-435e68d8cdc0" alt="Indian Flag" width="400" height="400"> | [Code - Indian Flag](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Indian%20Flag) |
39-
| Image Carousel I | [Go Live](https://codepen.io/pen/gOBKRNV) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/5fc52924-7403-4178-a7ab-fc796cfab567" alt="Image Carousel I" width="400" height="400"> | [Code - Image Carousel I](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Carousel%20I) |
40-
| Image Carousel II | [Go Live](https://codepen.io/pen/bGmjbVo) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/a8ef65b5-873c-4365-b4be-485bae463e87" alt="Image Carousel II" width="400" height="400"> | [Code - Image Carousel II](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Carousel%20II) |
32+
| Cart Item | [Go Live](https://codepen.io/deveesh_shetty_12/pen/rNKXvKm) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/9b12a923-f70a-411e-8964-0273e507576a" alt="Cart Item" width="400" height="300"> | [Code - Cart Item](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Cart%20Item) |
33+
| Social Login | [Go Live](https://codepen.io/pen/KKejzVy) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/18d4af5d-459e-4b45-8c51-aa253ff88da9" alt="Social Login" width="400" height="300"> | [Code - Social Login](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Social%20Login) |
34+
| Counter using Closure | [Go Live](https://codepen.io/pen/vYVjLqx) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/eefb6819-f21e-4b6b-8bcd-3a08368bcd51" alt="Counter" width="400" height="300"> | [Code - Counter](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Counter) |
35+
| Accordion | [Go Live](https://codepen.io/pen/YzJLEbb) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/8417ccd9-8363-4d3f-920b-1b7013ba1158" alt="Accordion" width="400" height="300"> | [Code - Accordion](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Accordion) |
36+
| 3D Cube | [Go Live](https://codepen.io/pen/mdzKEQg) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/07cf6fab-5941-44fa-8964-dc73175239a4" alt="3D Cube" width="400" height="300"> | [Code - 3D Cube](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/3D%20Cube) |
37+
| Festival Lighting | [Go Live](https://codepen.io/pen/NWOzdvK) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/477cc242-4b77-4e50-bcd7-d64cfce2ed34" alt="Festival Lighting" width="400" height="300"> | [Code - Festival Lighting](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Festival%20Lighting) |
38+
| Indian Flag | [Go Live](https://codepen.io/pen/xxyzqVa) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/68843a36-a400-4e48-8907-435e68d8cdc0" alt="Indian Flag" width="400" height="300"> | [Code - Indian Flag](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Indian%20Flag) |
39+
| Image Carousel I | [Go Live](https://codepen.io/pen/gOBKRNV) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/5fc52924-7403-4178-a7ab-fc796cfab567" alt="Image Carousel I" width="400" height="300"> | [Code - Image Carousel I](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Carousel%20I) |
40+
| Image Carousel II | [Go Live](https://codepen.io/pen/bGmjbVo) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/a8ef65b5-873c-4365-b4be-485bae463e87" alt="Image Carousel II" width="400" height="300"> | [Code - Image Carousel II](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Carousel%20II) |
4141
| Color Wheel | [Go Live](https://codepen.io/pen/GRYXvKw) | <img src="https://github.com/Deveesh-Shetty/CSS-Is-Fun/assets/89470104/b4a4bc20-d43b-4bc0-b86d-ae89ae84ff42" alt="Color Wheel" width="400" height="400"> | [Code - Color Wheel](https://github.com/Deveesh-Shetty/CSS-Is-Fun/tree/master/Color%20Wheel) |
42+
| Loading Page | [Go Live](https://codepen.io/ahmedelmsery/pen/zZVLMN) | <img src="https://res.cloudinary.com/duwcigilo/image/upload/v1684336253/Loading_image_ig5hh7.jpg" alt="Loading Page" width="400" height="300"> | [Code - Loading Page](https://github.com/Deveesh-Shetty/CSS-Is-Fun) |
4243

4344
<br>
4445

0 commit comments

Comments
 (0)