Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/withaarzoo/loader
This repository contains HTML and CSS code to create an animated loader with a wave effect. Follow the steps below to understand how to use this code.
https://github.com/withaarzoo/loader
codewithaar css html
Last synced: about 1 month ago
JSON representation
This repository contains HTML and CSS code to create an animated loader with a wave effect. Follow the steps below to understand how to use this code.
- Host: GitHub
- URL: https://github.com/withaarzoo/loader
- Owner: withaarzoo
- Created: 2024-02-21T05:51:06.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-02-22T04:46:30.000Z (almost 1 year ago)
- Last Synced: 2024-11-15T19:37:53.629Z (3 months ago)
- Topics: codewithaar, css, html
- Language: CSS
- Homepage:
- Size: 8.79 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Animated Loader
This repository contains HTML and CSS code to create an animated loader with a wave effect. Follow the steps below to understand how to use this code .
## Preview
## Steps:
1. **Clone the Repository:**
```
git clone https://github.com/withaarzoo/loader.git
```
2. **Navigate to the Directory:**
```
cd loader
```
3. **HTML Structure:**
- Open `index.html` file in your preferred text editor.
- You will find the following HTML structure:
```html
Animated Loader
```
4. **CSS Styles:**
- Open `style.css` file.
- You'll find the CSS styles responsible for creating the loader animation.
- The animation is applied to the `.loading-bar` class using keyframes.
- Each `.loading-bar` is given a specific animation delay to create a wave effect.
```css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.loading-wave {
width: 300px;
height: 100px;
display: flex;
justify-content: center;
align-items: flex-end;
}
.loading-bar {
width: 20px;
height: 10px;
margin: 0 5px;
background-color: #3498db;
border-radius: 5px;
animation: loading-wave-animation 1s ease-in-out infinite;
}
.loading-bar:nth-child(2) {
animation-delay: 0.1s;
}
.loading-bar:nth-child(3) {
animation-delay: 0.2s;
}
.loading-bar:nth-child(4) {
animation-delay: 0.3s;
}
@keyframes loading-wave-animation {
0% {
height: 10px;
}
50% {
height: 50px;
}
100% {
height: 10px;
}
}
```
5. **View in Browser:**
- Open `index.html` in your web browser to see the animated loader in action.
6. **Customization:**
- You can customize the loader by adjusting the width, height, colors, animation duration, etc., in the CSS file.
7. **Integration:**
- Integrate this loader into your projects by copying the HTML structure and CSS styles.
8. **Enjoy!**
- Enjoy using this animated loader in your projects.
Feel free to reach out if you have any questions or need further assistance!