Skip to content

Commit 8cd4acb

Browse files
withaarzoowithaarzoo
authored
Add files via upload
1 parent 7393a6a commit 8cd4acb

File tree

4 files changed

+175
-0
lines changed

4 files changed

+175
-0
lines changed

‎[ Day 39 ] - Glassmorphism Loader/README.md

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
# Glassmorphism Loader
2+
3+
This project is part of day 39 of the #100DaysOfCode Challenge.
4+
5+
This repository contains HTML and CSS code for creating a visually appealing glassmorphism loader. Glassmorphism is a design trend that employs transparent or semi-transparent backgrounds with frosted glass-like effects, providing a sleek and modern appearance to user interfaces.
6+
7+
## Preview
8+
9+
<div style="display: flex; align-items: center; justify-content: center; width: 100%; border-radius: 0.6rem;">
10+
<img src="preview.gif" alt="preview GIF" width="100%" height="100%" style="overflow: none; border-radius: inherit;"/>
11+
</div>
12+
13+
This preview showcases the glassmorphism loader in action.
14+
15+
## Download Full Source Code
16+
17+
You can download the full source code for this project from the following link: [Download Source Code](https://t.me/CodeWithAarzoo)
18+
19+
## Features
20+
21+
- **Dynamic Animation**: The loader consists of animated circles that move vertically with a slight delay, creating a fluid loading animation.
22+
- **Glassmorphism Effect**: The loader includes a pseudo-element with a glassmorphism effect achieved through backdrop-filter CSS property, giving it a frosted glass appearance.
23+
- **Gradient Background**: The background of the page utilizes a gradient effect, transitioning smoothly between two colors.
24+
25+
## Usage
26+
27+
To use this glassmorphism loader in your project, simply copy the HTML and CSS code provided in the repository and paste it into your project files. You can customize the loader's size, colors, and animation duration by adjusting the CSS properties accordingly.
28+
29+
## Installation
30+
31+
1. Clone the repository to your local machine using the following command:
32+
33+
```bash
34+
git clone https://github.com/your-username/glassmorphism-loader.git
35+
```
36+
37+
2. Open the `index.html` file in your preferred web browser to view the glassmorphism loader in action.
38+
39+
## Acknowledgements
40+
41+
- Inspired by the glassmorphism design trend.
42+
- CSS animation techniques learned from various online resources and tutorials.
43+
- Gradient background created using CSS linear-gradient property.
44+
- Special thanks to the open-source community for their contributions and support.
45+
46+
## Credits
47+
48+
This project was created by [Aarzoo](https://x.com/withaarzoo).
49+
50+
## License
51+
52+
This project is licensed under the [MIT License](LICENSE). Feel free to use and modify the code for your own purposes.
53+
54+
## Feedback and Contributions
55+
56+
Feedback, bug reports, and contributions are welcome! Please submit them via [GitHub Issues](https://github.com/withaarzoo/100-Days-of-Code/tree/main/%5B%20Day%2036%20%5D%20-%20Animated%20Compress%20File%20Button/issues) or create a pull request with your proposed changes.
57+
58+
## Support and Contact
59+
60+
For any inquiries or assistance regarding this project, feel free to reach out to the developer, Aarzoo, via [Bento](https://bento.me/withaarzoo).
61+
62+
Enjoy coding and have fun with your glassmorphism loader ⏺️⏺️⏺️✨

‎[ Day 39 ] - Glassmorphism Loader/index.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<!-- Ensure compatibility with Internet Explorer -->
7+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
8+
<!-- Set the viewport to make the website responsive -->
9+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
10+
<!-- Link to external CSS file -->
11+
<link rel="stylesheet" href="style.css">
12+
<title>Glassmorphism Loader</title>
13+
</head>
14+
15+
<body>
16+
<!-- Loader container with glassmorphism effect -->
17+
<div class="loader">
18+
<!-- Individual loader elements with varying CSS custom properties -->
19+
<div style="--i: 1"></div>
20+
<div style="--i: 2"></div>
21+
<div style="--i: 3"></div>
22+
<div style="--i: 4"></div>
23+
</div>
24+
</body>
25+
26+
</html>

‎[ Day 39 ] - Glassmorphism Loader/preview.gif

2.46 MB
Loading

‎[ Day 39 ] - Glassmorphism Loader/style.css

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
/* Reset default margin, padding, and box-sizing */
2+
* {
3+
margin: 0;
4+
padding: 0;
5+
box-sizing: border-box;
6+
}
7+
8+
/* Styling for the body */
9+
body {
10+
/* Background gradient */
11+
background: #000046;
12+
/* fallback for old browsers */
13+
background: -webkit-linear-gradient(to right, #1CB5E0, #000046);
14+
/* Chrome 10-25, Safari 5.1-6 */
15+
background: linear-gradient(to right, #1CB5E0, #000046);
16+
/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
17+
/* Centering content vertically and horizontally */
18+
height: 100vh;
19+
display: flex;
20+
justify-content: center;
21+
align-items: center;
22+
}
23+
24+
/* Styling for the loader container */
25+
.loader {
26+
/* Centering content vertically and horizontally */
27+
position: relative;
28+
display: flex;
29+
justify-content: center;
30+
align-items: center;
31+
}
32+
33+
/* Styling for the loader pseudo-element */
34+
.loader::before {
35+
content: "";
36+
/* Glassmorphism effect */
37+
background: rgba(255, 255, 255, 0);
38+
backdrop-filter: blur(8px);
39+
position: absolute;
40+
width: 140px;
41+
height: 55px;
42+
z-index: 20;
43+
border-radius: 0 0 10px 10px;
44+
border: 1px solid rgba(255, 255, 255, 0.274);
45+
border-top: none;
46+
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.082);
47+
animation: anim2 2s infinite;
48+
}
49+
50+
/* Styling for the loader circles */
51+
.loader div {
52+
background: rgb(228, 228, 228);
53+
border-radius: 50%;
54+
width: 25px;
55+
height: 25px;
56+
z-index: -1;
57+
animation: anim 2s infinite linear;
58+
animation-delay: calc(-0.3s * var(--i));
59+
transform: translateY(5px);
60+
margin: 0.2em;
61+
}
62+
63+
/* Keyframe animation for loader circles */
64+
@keyframes anim {
65+
66+
0%,
67+
100% {
68+
transform: translateY(5px);
69+
}
70+
71+
50% {
72+
transform: translateY(-65px);
73+
}
74+
}
75+
76+
/* Keyframe animation for loader pseudo-element */
77+
@keyframes anim2 {
78+
79+
0%,
80+
100% {
81+
transform: rotate(-10deg);
82+
}
83+
84+
50% {
85+
transform: rotate(10deg);
86+
}
87+
}

0 commit comments

Comments
 (0)