https://github.com/mehmet-github06/background-image-loading-progress-
This project demonstrates a simple loading progress bar with a background image blur effect using HTML, CSS, and JavaScript.
https://github.com/mehmet-github06/background-image-loading-progress-
blur css3 html5 js
Last synced: 5 months ago
JSON representation
This project demonstrates a simple loading progress bar with a background image blur effect using HTML, CSS, and JavaScript.
- Host: GitHub
- URL: https://github.com/mehmet-github06/background-image-loading-progress-
- Owner: Mehmet-github06
- Created: 2023-10-30T21:08:52.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-03T21:15:49.000Z (about 2 years ago)
- Last Synced: 2025-01-16T05:25:36.736Z (about 1 year ago)
- Topics: blur, css3, html5, js
- Language: CSS
- Homepage: https://youtube-al-ma-5.vercel.app
- Size: 829 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Background Image Loading Progress
This project demonstrates a simple loading progress bar with a background image blur effect using HTML, CSS, and JavaScript.
## Features
- Displays a background image with a loading progress bar indicating the percentage of completion.
- The background image blurs gradually as the loading progresses.
- Utilizes CSS for styling and JavaScript for controlling the loading animation.
## Usage
1. Open the `index.html` file in a web browser.
2. The loading progress bar will start from 0% and gradually increase until it reaches 100%.
## Files
- `index.html`: HTML file defining the page structure and elements.
- `style.css`: CSS file defining the styles for the page and loading animation.
- `app.js`: JavaScript file controlling the loading progress and blur effect.
## Additional Information
- The project uses the Google Fonts API to import the 'Rubik Moonrocks' font.
- The background image is loaded from the `./img/6549944.png` path.
## How it Works
- The loading progress is calculated using a JavaScript function that updates the loading percentage and adjusts the blur effect of the background image accordingly.
## Live Demo
Check out the live demo [here](https://youtube-al-ma-5.vercel.app/).
## License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for more information.