怎么使用JS+CSS实现一个简单加载进度条的效果

发布时间：2022-04-24 14:00:12 作者：iii
来源：亿速云阅读：134

# 怎么使用JS+CSS实现一个简单加载进度条的效果

## 引言

在现代Web开发中，加载进度条是提升用户体验的重要元素。它能直观地展示内容加载状态，缓解用户等待焦虑。本文将详细介绍如何用原生JavaScript和CSS实现一个简单但实用的加载进度条效果。

## 一、基础HTML结构

首先创建基本的HTML骨架：

```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>加载进度条示例</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="progress-container">
        <div class="progress-bar" id="progressBar"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

二、CSS样式设计

在style.css中添加样式规则：

/* 基础样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f5f5f5;
}

/* 进度条容器 */
.progress-container {
    width: 80%;
    max-width: 600px;
    height: 20px;
    background-color: #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* 进度条本身 */
.progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #4CAF50, #8BC34A);
    transition: width 0.3s ease-out;
    border-radius: 10px;
    position: relative;
}

/* 可选：添加百分比文字 */
.progress-bar::after {
    content: attr(data-progress);
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: white;
    font-size: 12px;
    font-weight: bold;
}

三、JavaScript实现逻辑

在script.js中编写核心功能：

// 获取DOM元素
const progressBar = document.getElementById('progressBar');

/**
 * 模拟加载过程的函数
 * @param {number} duration - 加载总时长(ms)
 * @param {number} interval - 更新间隔(ms)
 */
function simulateLoading(duration = 3000, interval = 100) {
    let progress = 0;
    const increment = (interval / duration) * 100;
    
    const timer = setInterval(() => {
        progress += increment;
        
        // 更新进度条
        progressBar.style.width = `${Math.min(progress, 100)}%`;
        progressBar.setAttribute('data-progress', `${Math.round(progress)}%`);
        
        // 加载完成时清除定时器
        if (progress >= 100) {
            clearInterval(timer);
            setTimeout(() => {
                alert('内容加载完成！');
            }, 300);
        }
    }, interval);
}

// 页面加载后启动进度条
window.addEventListener('DOMContentLoaded', () => {
    simulateLoading();
});

// 实际应用中可以替换为真实加载事件
// window.addEventListener('load', () => {...});

四、进阶优化方案

1. 真实加载进度检测

对于实际文件加载，可以使用XMLHttpRequest的progress事件：

function loadWithRealProgress(url) {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    
    xhr.onprogress = (event) => {
        if (event.lengthComputable) {
            const percent = (event.loaded / event.total) * 100;
            updateProgress(percent);
        }
    };
    
    xhr.onload = () => updateProgress(100);
    xhr.send();
}

function updateProgress(percent) {
    progressBar.style.width = `${percent}%`;
    progressBar.setAttribute('data-progress', `${Math.round(percent)}%`);
}

2. 动画效果增强

添加CSS动画使进度条更生动：

.progress-bar {
    /* 原有样式... */
    background: linear-gradient(90deg, 
        #4CAF50 0%, 
        #8BC34A 25%, 
        #CDDC39 50%, 
        #FFC107 75%, 
        #FF9800 100%);
    background-size: 200% 100%;
    animation: gradientShift 2s linear infinite;
}

@keyframes gradientShift {
    0% { background-position: 100% 0; }
    100% { background-position: 0 0; }
}

3. 响应式设计

添加媒体查询适应不同设备：

@media (max-width: 768px) {
    .progress-container {
        height: 15px;
        width: 90%;
    }
    .progress-bar::after {
        font-size: 10px;
    }
}

五、完整代码示例

以下是整合后的完整实现：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>加载进度条示例</title>
    <style>
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: 'Arial', sans-serif;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f5f5f5;
        }
        .progress-container {
            width: 80%;
            max-width: 600px;
            height: 20px;
            background-color: #e0e0e0;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        .progress-bar {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, #4CAF50, #8BC34A);
            transition: width 0.3s ease-out;
            border-radius: 10px;
            position: relative;
        }
        .progress-bar::after {
            content: attr(data-progress);
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            color: white;
            font-size: 12px;
            font-weight: bold;
        }
        @media (max-width: 768px) {
            .progress-container { height: 15px; width: 90%; }
            .progress-bar::after { font-size: 10px; }
        }
    </style>
</head>
<body>
    <div class="progress-container">
        <div class="progress-bar" id="progressBar"></div>
    </div>
    <script>
        const progressBar = document.getElementById('progressBar');
        
        function simulateLoading(duration = 3000, interval = 100) {
            let progress = 0;
            const increment = (interval / duration) * 100;
            
            const timer = setInterval(() => {
                progress += increment;
                progressBar.style.width = `${Math.min(progress, 100)}%`;
                progressBar.setAttribute('data-progress', `${Math.round(progress)}%`);
                
                if (progress >= 100) {
                    clearInterval(timer);
                    setTimeout(() => {
                        progressBar.style.opacity = '0';
                        setTimeout(() => {
                            progressBar.style.display = 'none';
                            document.body.innerHTML += '<h1>内容加载完成！</h1>';
                        }, 500);
                    }, 300);
                }
            }, interval);
        }
        
        window.addEventListener('DOMContentLoaded', simulateLoading);
    </script>
</body>
</html>

六、总结

通过本文我们学会了： 1. 使用简单的HTML结构创建进度条容器 2. 通过CSS实现美观的进度条样式和动画 3. 使用JavaScript控制进度更新逻辑 4. 实现模拟加载和真实加载两种场景 5. 添加响应式设计和动画增强效果

这个基础实现可以进一步扩展为： - 多段式进度条 - 圆形进度条 - 带取消按钮的进度条 - 配合AJAX/Fetch的实际文件加载进度

希望这个示例能帮助你快速实现网页加载进度效果！ “`