JS特效篇：加载型进度条

wuhen_n

已于 2025-05-12 07:31:59 修改

阅读量564

点赞数 23

分类专栏： # JS页面特效文章标签： javascript 前端进度条加载型进度条方块进度条滑块进度条

于 2025-05-11 06:15:33 首次发布

本文链接：https://blog.csdn.net/wuhen_n/article/details/147751382

版权

JS页面特效专栏收录该内容

5 篇文章

订阅专栏

JS特效篇：加载型进度条

前言
简单加载型进度条
- 效果预览
- 代码展示
滑块加载型进度条
- 效果预览
- 代码实现
结语

前言

在前端开发中，进度条是一个常见且实用的交互组件，它能直观地向用户展示任务的完成状态，提升用户体验。无论是文件上传、数据加载，还是任务进度跟踪，合适的进度条都能让界面更具吸引力和交互性，不至于让用户等待太过于枯燥。
本篇文章将讲述如何通过CSS+JS实现加载型进度条。

简单加载型进度条

简单加载型进度条：其效果图如下所示：

效果预览

简单加载型进度条

代码展示

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>简单加载型进度条</title>
		<style>
			.progress-container {
				width: 20vw;
				height: 2rem;
				background-color: #e5e7eb;
				border-radius: 0.25rem;
				overflow: hidden;
				position: relative;
			}

			.progress-bar {
				background-color: #3b82f6;
				height: 100%;
				transition: width 0.3s ease;
			}

			.progress-text {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				color: white;
				font-size: 0.875rem;
			}
		</style>
	</head>

	<body>
		<div class="progress-container">
			<div id="progress-bar" class="progress-bar"></div>
			<div id="progress-text" class="progress-text">页面加载中，请稍候...</div>
		</div>
		<script>
			const progress = document.getElementById('progress-bar');
			const progressText = document.getElementById('progress-text');
			let currentProgress = 0;
			const interval = setInterval(() => {
				if (currentProgress >= 100) {
					clearInterval(interval);
				} else {
					currentProgress++;
					progress.style.width = `${currentProgress}%`;
				}
			}, 100);
		</script>
	</body>

</html>

滑块加载型进度条

滑块加载型进度条：通过滑块填充实现进度条效果，，其效果图如下所示：

效果预览

滑块加载型进度条

代码实现

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>滑块加载型进度条</title>
		<style>
			.progress-container {
				border: 1px solid #ced4da;
				border-radius: 0.25rem;
				padding: 0.75rem;
				background-color: #ffffff;
				box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
				width: 20vw;
				display: inline-block;
			}

			.progress-bar {
				width: 100%;
				display: flex;
				gap: 4px;
			}

			.progress-square {
				width: 10px;
				height: 10px;
				background-color: #e5e7eb;
				border-radius: 2px;
				transition: background-color 0.3s ease;
			}

			.progress-square.filled {
				background-color: #3b82f6;
			}

			.progress-text {
				margin-top: 10px;
				color: #333;
				font-size: 0.875rem;
				text-align: center;
			}
		</style>
	</head>

	<body>
		<div class="progress-container">
			<div class="progress-bar" id="progress-bar"></div>
			<div id="progress-text" class="progress-text">页面加载中，请稍候...</div>
		</div>

		<script>
			
			const progressBar = document.getElementById('progress-bar');
			const progressWidth = progressBar.offsetWidth;
			const progressText = document.getElementById('progress-text');
			// 计算方块个数
			const totalSquares = progressWidth / 15 + 1;
			let currentProgress = 0;

			for (let i = 0; i < totalSquares; i++) {
				const square = document.createElement('div');
				square.classList.add('progress-square');
				progressBar.appendChild(square);
			}

			const interval = setInterval(() => {
				if (currentProgress >= totalSquares) {
					clearInterval(interval);
					progressText.textContent = '加载完成！';
				} else {
					const squares = document.querySelectorAll('.progress-square');
					squares[currentProgress].classList.add('filled');
					currentProgress++;
				}
			}, 100);
		</script>
	</body>

</html>