https://github.com/coderooz/simple-page-loading-bar-animation
This project demonstrates a simple page loading bar animation using CSS only. It includes a centered block with a loading bar and a title.
https://github.com/coderooz/simple-page-loading-bar-animation
Last synced: 9 months ago
JSON representation
This project demonstrates a simple page loading bar animation using CSS only. It includes a centered block with a loading bar and a title.
- Host: GitHub
- URL: https://github.com/coderooz/simple-page-loading-bar-animation
- Owner: coderooz
- License: mit
- Created: 2024-07-16T08:14:52.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-07-16T08:22:02.000Z (over 1 year ago)
- Last Synced: 2025-02-04T14:36:22.472Z (about 1 year ago)
- Language: CSS
- Size: 10.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Simple Page Loading Bar Animation
This project demonstrates a simple page loading bar animation using CSS only. It includes a centered block with a loading bar and a title.
## Features
- **Title:** Displayed at the top of the page.
- **Loading Animation:** A spinner animation in the center of the page.
- **Responsive Design:** Centered content adjusts based on screen size.
## How to Use
1. Clone the repository: `https://github.com/coderooz/Simple-Page-Loading-Bar-Animation`
2. Open `index.html` in a web browser.
### Project Structure
```
project-folder/
│
├── index.html
├── style.css
└── README.md
```
### Code in the project
### index.html
```html
Loading Bar Animation Example
Loading Bar Animation
```
### style.css
```css
/* Reset some default styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Center the content vertically and horizontally */
html, body {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #f0f0f0;
}
.container {
text-align: center;
}
h1 {
font-family: Arial, sans-serif;
font-size: 24px;
margin-bottom: 20px;
}
.loader-bar {
width: 100%;
height: 10px;
background-color: #ddd;
position: relative;
}
.loader-bar::after {
content: '';
display: block;
width: 50px;
height: 100%;
background-color: #3498db;
position: absolute;
animation: progress 2s ease-in-out infinite;
}
@keyframes progress {
0% { width: 0; }
50% { width: 50%; }
100% { width: 100%; }
}
```
## Credits
- CSS Loading animation inspired by various online examples.
- Designed and implemented by Coderooz [Ranit Saha].
## License
This project is licensed under the MIT License - see the LICENSE file for details.