css 语言 CSS 制作带进度条的加载动画示例

CSS阿木 发布于 2025-06-18 3 次阅读


CSS 制作带进度条的加载动画示例

随着互联网的快速发展,用户体验变得越来越重要。在网页加载过程中,一个引人注目的加载动画可以有效地提升用户的等待体验。本文将围绕CSS技术,展示如何制作一个带进度条的加载动画示例,并对其中的关键技术进行解析。

一、加载动画的作用

加载动画在网页加载过程中起到以下几个作用:

1. 提示用户网页正在加载,避免用户产生焦虑情绪。

2. 提升网页的视觉效果,增加用户的好奇心。

3. 增强用户体验,让用户感受到网站的用心。

二、制作带进度条的加载动画

2.1 HTML结构

我们需要构建一个简单的HTML结构,用于展示加载动画。

html

<!DOCTYPE html>


<html lang="zh-CN">


<head>


<meta charset="UTF-8">


<title>带进度条的加载动画示例</title>


<link rel="stylesheet" href="style.css">


</head>


<body>


<div class="loading">


<div class="progress-bar">


<div class="progress"></div>


</div>


<p>加载中,请稍候...</p>


</div>


</body>


</html>


2.2 CSS样式

接下来,我们使用CSS来设计加载动画的样式。

css

body, html {


height: 100%;


margin: 0;


display: flex;


justify-content: center;


align-items: center;


background-color: f5f5f5;


}

.loading {


text-align: center;


border: 1px solid ddd;


padding: 20px;


border-radius: 5px;


box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);


}

.progress-bar {


width: 80%;


height: 20px;


background-color: ddd;


border-radius: 10px;


margin: 10px 0;


}

.progress {


height: 100%;


background-color: 4CAF50;


border-radius: 10px;


width: 0%;


transition: width 0.5s ease-in-out;


}

p {


color: 666;


}


2.3 JavaScript脚本

我们使用JavaScript来控制进度条的动态变化。

javascript

function updateProgress() {


var progress = document.querySelector('.progress');


var width = 0;


var id = setInterval(frame, 10);


function frame() {


if (width >= 100) {


clearInterval(id);


} else {


width++;


progress.style.width = width + '%';


}


}


}

updateProgress();


三、关键技术解析

3.1 CSS动画

在上述示例中,我们使用了CSS的`transition`属性来实现进度条的动态变化。`transition`属性可以指定一个或多个CSS属性的变化,并设置变化的时间、延迟和曲线。

3.2 JavaScript定时器

JavaScript的`setInterval`函数可以每隔一定时间执行一个函数,从而实现动画的连续播放。在本例中,我们使用`setInterval`来逐渐增加进度条的宽度,直到达到100%。

3.3 CSS伪元素

在CSS中,我们可以使用伪元素`::before`和`::after`来创建额外的元素,从而实现更丰富的视觉效果。在本例中,我们使用伪元素来创建进度条的外框和内部填充。

四、总结

本文通过一个简单的示例,展示了如何使用CSS和JavaScript制作一个带进度条的加载动画。在实际开发中,我们可以根据需求调整动画的样式和效果,以提升用户体验。希望本文对您有所帮助。