https://github.com/coderooz/simple-page-loading-animation
This project demonstrates a simple page loading animation using CSS only. It includes a centered block with a loading spinner and a title.
https://github.com/coderooz/simple-page-loading-animation
Last synced: 12 months ago
JSON representation
This project demonstrates a simple page loading animation using CSS only. It includes a centered block with a loading spinner and a title.
- Host: GitHub
- URL: https://github.com/coderooz/simple-page-loading-animation
- Owner: coderooz
- License: mit
- Created: 2024-07-16T07:39:11.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-07-16T07:46:20.000Z (over 1 year ago)
- Last Synced: 2025-02-04T14:36:21.568Z (about 1 year ago)
- Language: CSS
- Size: 3.91 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 Animation
This project demonstrates a simple page loading animation using CSS only. It includes a centered block with a loading spinner 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-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 Animation Example
Loading 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 {
border: 4px solid rgba(0, 0, 0, 0.1);
border-radius: 50%;
border-top: 4px solid #3498db;
width: 40px;
height: 40px;
animation: spin 1s linear infinite;
margin: 20px auto;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
```
## Credits
- CSS spinner 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.