Member-only story
50 Front-End Combat Project No.05: Blurry Loading
3 min readMay 17, 2024
Today, I’m talking about 50 front-end practical projects No.05: Blurry Loading.This is the source code download address:https://github.com/bradtraversy/50projects50days/tree/master/blurry-loading
Project Introduction
This project simulates the blurred loading effect during the loading of a web page. The page starts with a blurry background image, then gradually becomes clearer and the loading progress text changes.
Preview of the effect
Core code
HTML Structure
- <section class=”bg”></section>:Used to blur the background image for loading
- <div class=”loading-text”></div>:Text used to display the loading progress
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Blurry Loading</title>
</head>
<body>
<section class="bg"></section>
<div class="loading-text">0%</div>
<script src="script.js"></script>
</body>
</html>
