Table of Contents
This project is a blurry page preloader implemented using HTML5, CSS3, and JavaScript. It creates a visually appealing loading effect with a blurred background image and a percentage indicator.
To use the blurry page preloader in your project, follow these steps:
- Include the required HTML markup in your web page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/styles.css">
<title>Blurry Page Preloader</title>
</head>
<body>
<section class="bg"></section>
<div class="loading-text">0%</div>
<script src="js/main.js"></script>
</body>
</html>- Link the CSS stylesheets by adding the following line within the section of your HTML file:
<link rel="stylesheet" href="css/styles.css">- Include the JavaScript code by adding the following line before the closing tag of your HTML file:
<script src="js/main.js"></script>The JavaScript code in main.js provides the functionality for the blurry page preloader. It gradually increases the loading percentage and updates the text and blur effect accordingly. The blurring() function is responsible for this animation. It uses the scale() function to map the loading percentage to appropriate opacity and blur values.
The progress steps widget is a simple and intuitive way to guide users through a series of steps. By using HTML5, CSS3, and JavaScript, this project provides an easy-to-implement solution for incorporating progress tracking into your web pages. Feel free to modify and expand upon this project to suit your specific needs.
Distributed under the MIT License.
Alireza Mohafezatkar - https://www.linkedin.com/in/alireza-mohafezatkar/ - [email protected]
Project Link: https://github.com/mohafezatkar/blurry-page-preloader