加载进度条动画

原创 已于 2025-06-27 13:25:05 修改 · 326 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #css3 #前端

于 2025-06-07 15:34:01 首次发布

<!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;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #f5f5f5;
            color: #333;
            padding: 20px;
        }
        
        .container {
            max-width: 800px;
            width: 100%;
            margin: 0 auto;
            text-align: center;
        }
        
        h1 {
            margin-bottom: 40px;
            color: #2c3e50;
        }
        
        .progress-section {
            background: white;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
            padding: 30px;
            margin-bottom: 30px;
        }
        
        h2 {
            margin-bottom: 20px;
            color: #3498db;
        }
        
        /* 线性进度条 */
        .progress-linear {
            width: 100%;
            height: 10px;
            background: #ecf0f1;
            border-radius: 5px;
            overflow: hidden;
            margin-bottom: 30px;
        }
        
        .progress-linear-bar {
            height: 100%;
            width: 0;
            background: linear-gradient(90deg, #3498db, #2ecc71);
            border-radius: 5px;
            transition: width 0.3s ease;
            animation: linearProgress 3s infinite;
        }
        
        @keyframes linearProgress {
            0% { width: 0; }
            50% { width: 100%; }
            100% { width: 0; }
        }
        
        /* 圆形进度条 */
        .progress-circle {
            position: relative;
            width: 120px;
            height: 120px;
            margin: 0 auto 30px;
        }
        
        .progress-circle-bg {
            fill: none;
            stroke: #ecf0f1;
            stroke-width: 8;
        }
        
        .progress-circle-fill {
            fill: none;
            stroke: #3498db;
            stroke-width: 8;
            stroke-linecap: round;
            stroke-dasharray: 314;
            stroke-dashoffset: 314;
            transform-origin: center;
            transform: rotate(-90deg);
            animation: circleProgress 3s infinite;
        }
        
        .progress-circle-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 24px;
            font-weight: bold;
            color: #2c3e50;
        }
        
        @keyframes circleProgress {
            0% { stroke-dashoffset: 314; }
            50% { stroke-dashoffset: 0; }
            100% { stroke-dashoffset: 314; }
        }
        
        /* 波浪进度条 */
        .progress-wave {
            width: 200px;
            height: 200px;
            margin: 0 auto 30px;
            position: relative;
            border-radius: 50%;
            background: #ecf0f1;
            overflow: hidden;
        }
        
        .progress-wave-inner {
            position: absolute;
            width: 200%;
            height: 200%;
            left: -50%;
            top: 50%;
            background: #3498db;
            border-radius: 40%;
            animation: waveProgress 5s infinite linear;
        }
        
        @keyframes waveProgress {
            0% { 
                transform: rotate(0deg);
                top: 30%;
            }
            50% { 
                transform: rotate(180deg);
                top: 10%;
            }
            100% { 
                transform: rotate(360deg);
                top: 30%;
            }
        }
        
        /* 按钮样式 */
        .btn {
            display: inline-block;
            padding: 12px 24px;
            background: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
            margin: 10px;
            transition: all 0.3s;
        }
        
        .btn:hover {
            background: #2980b9;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .controls {
            margin: 30px 0;
        }
        
        .footer {
            margin-top: 50px;
            color: #7f8c8d;
            font-size: 14px;
        }
        
        .footer a {
            color: #3498db;
            text-decoration: none;
        }
        
        .footer a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>加载进度条动画效果</h1>
        
        <div class="progress-section">
            <h2>线性进度条</h2>
            <div class="progress-linear">
                <div class="progress-linear-bar"></div>
            </div>
        </div>
        
        <div class="progress-section">
            <h2>圆形进度条</h2>
            <div class="progress-circle">
                <svg viewBox="0 0 120 120">
                    <circle class="progress-circle-bg" cx="60" cy="60" r="50"></circle>
                    <circle class="progress-circle-fill" cx="60" cy="60" r="50"></circle>
                </svg>
                <div class="progress-circle-text">0%</div>
            </div>
        </div>
        
        <div class="progress-section">
            <h2>波浪进度条</h2>
            <div class="progress-wave">
                <div class="progress-wave-inner"></div>
            </div>
        </div>
        
        <div class="controls">
            <button class="btn" id="start-btn">开始加载</button>
            <button class="btn" id="reset-btn">重置</button>
        </div>
        
        <div class="footer">

        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const startBtn = document.getElementById('start-btn');
            const resetBtn = document.getElementById('reset-btn');
            const linearBar = document.querySelector('.progress-linear-bar');
            const circleFill = document.querySelector('.progress-circle-fill');
            const circleText = document.querySelector('.progress-circle-text');
            const waveInner = document.querySelector('.progress-wave-inner');
            
            let progressInterval;
            let progress = 0;
            
            // 开始加载
            function startLoading() {
                resetLoading();
                
                progress = 0;
                updateProgress();
                
                progressInterval = setInterval(function() {
                    progress += 1;
                    if (progress >= 100) {
                        clearInterval(progressInterval);
                    }
                    updateProgress();
                }, 50);
            }
            
            // 更新进度
            function updateProgress() {
                // 线性进度条
                linearBar.style.width = progress + '%';
                
                // 圆形进度条
                const circumference = 314; // 2 * π * r (r=50)
                const offset = circumference - (progress / 100) * circumference;
                circleFill.style.strokeDashoffset = offset;
                circleText.textContent = progress + '%';
                
                // 波浪进度条
                const waveHeight = 100 - progress;
                waveInner.style.top = waveHeight + '%';
            }
            
            // 重置加载
            function resetLoading() {
                clearInterval(progressInterval);
                progress = 0;
                linearBar.style.width = '0';
                circleFill.style.strokeDashoffset = '314';
                circleText.textContent = '0%';
                waveInner.style.top = '100%';
            }
            
            // 事件监听
            startBtn.addEventListener('click', startLoading);
            resetBtn.addEventListener('click', resetLoading);
            
            // 初始动画
            setTimeout(startLoading, 1000);
        });
    </script>
</body>
</html>

ziblog
关注
HTML+CSS加载进度条的简单动画
qq_41142724的博客
08-07 1455
HTML+CSS加载进度条的简单动画效果图HTMLCSS目的 效果图 这里先声明一下，这个是在cssdeck.com看到的一个个人觉得很棒的进度加载效果。所以在这里分享一下，同时在这个网站还有很多非常有趣的css完成特效。 HTML <ul id="skill"> <li><span class="bar graphic-design"></span><h3>Graphic Design</h3></li>
css实现圆形进度条加载动画
zem
06-01 3502
这里我会把遇到这个需求时的实现过程和遇到的问题记录下来，如果只是要看最终实现结果可直接滑到底部看实现代码。 我们经常可以看到网上有一些圆形进度条跟随数字的变化慢慢变成一个圆，这个动画实际上可以通过纯css来实现 通常情况下，我们实现这种结构只需要使用border-radius和padding就可以实现上图的样子，但是要实现动画，我们需要采取别的方式，这里要使用一个不常用的样式---clip...
Loading网页加载进度条动画效果.zip
07-04
Loading网页加载进度条动画效果是一款基于jquery CSS3 animation属性实现的酷炫的Loading网页加载进度条动画效果。
CSS3实现多彩动态加载进度条动画
weixin_42311427的博客
07-29 893
CSS伪元素是一种特殊的元素，它不是一个实际存在于HTML文档中的元素，而是由CSS创造出来的元素。它允许开发者通过选择器来选中并应用样式到文档的特定部分。伪元素通过::before和::after选择器来使用，这些选择器可以在指定元素的内容之前或之后插入内容。在现代网页设计中，实现美观且功能性强大的界面不仅仅依赖于基础的HTML和CSS知识，还需要一系列高级技巧来增强用户体验和界面的吸引力。本章将详细探讨CSS预处理器的使用以及如何构建美观且高效的加载动画，从而提升网站的整体质量和专业度。
HTML5进度条动画设计：实现酷炫加载效果
weixin_35752122的博客
05-22 1247
Canvas是HTML5中的一个组件，提供了一个可以用JavaScript脚本绘制图形的位图区。与SVG不同，Canvas是基于像素的，这意味着我们可以用JavaScript直接在Canvas上绘制任何形状，包括复杂的动画和游戏图形。Canvas API允许我们创建和操作动画，通过逐帧更新来展示动态效果。Canvas的基本使用包括以下几个步骤：在HTML中定义一个<canvas>元素。使用JavaScript获取这个元素，并使用方法获取绘图上下文。
提升用户体验的加载进度动画设计
weixin_33240461的博客
11-10 1136
本文还有配套的精品资源，点击获取 简介：加载进度动画对于改善移动应用和网页设计中的用户体验至关重要。布卡漫画作为漫画阅读应用的代表，其加载动画不仅提升了用户体验，还增强了品牌形象。本文将深入探讨动画原理、UI设计原则、技术实现、性能优化、用户体验、自定义和可扩展性、以及测试与迭代等方面，分析加载进度动画的设计与实现。 1. 加载进度动画的原理与类型 1.1 ...
酷炫的html5进度条加载动画_加载进度条动画特效
11-05
在本主题中，我们将深入探讨“酷炫的HTML5进度条加载动画”这一概念，以及如何实现这种加载进度条动画特效。 首先，进度条在网页中起着至关重要的作用，特别是在用户等待内容加载时提供视觉反馈。HTML5引入了`...
精选资源
Loading网页加载进度条动画效果特效代码
03-20
本文将详细解析"Loading网页加载进度条动画效果特效代码"这一主题，探讨如何使用jQuery和CSS3的animation属性来创建一款酷炫的加载进度条动画。 首先，jQuery是一个广泛使用的JavaScript库，它简化了JavaScript编程...
酷炫的html5进度条加载动画_加载进度条动画特效.zip
07-04
HTML5的加载进度条动画是网页交互体验中的一个重要元素，尤其在用户等待内容加载时，一个酷炫的进度条能够提升用户体验，展示加载状态并缓解用户的等待焦虑。本资源"酷炫的html5进度条加载动画_加载进度条动画特效....
css3实现点击提交按钮加载进度条动画特效.zip
07-11
js代码 [removed] const button = document.querySelector(&#39;.button&#39;); const submit = document.querySelector(&#39;.submit&#39;); function toggleClass() { this.classList.toggle(&#39;active&#39;);...
Adonis UI 进度条与加载动画使用指南
最新发布
gitblog_01060的博客
11-17 265
在现代应用程序开发中，进度指示器和加载动画是提升用户体验的重要组件。Adonis UI 提供了一套美观且功能丰富的进度显示控件，本文将详细介绍这些组件的使用方法。 ## 进度条基础 Adonis UI 的进度条支持两种显示模式： 1. **确定性进度条**：显示明确的进度百分比 2. **不确定性进度条**：用于无法确定具体进度的情况 这两种模式通过 `IsIndeterminate` 属
CSS3 Loading进度条加载动画特效
weixin_34191734的博客
12-02 831
在线演示 本地下载
android 加载进度条动画
zhouguizhi
11-01 4041
android 加载进度条动画
JQuery 写一个圆形动画加载进度条
无论何时都不要停止学习，这是改变自己的必要条件
02-04 9263
drawProcess()这个方法主要是画圆的大小 上面所写到的 setInterval("addNum(90,100)",20); 分别指的是: 1.这里的三个参数分别是90:在90%处 2.100:圆的宽度（而<canvas>标签设置的高宽是不起作用的） 3.20:2秒之后执行这个addNum方法 一、画单色进度圆环，效果如下图: <!DOCTYPE ht...
10款CSS3进度条Loading动画
w1366352655的博客
12-05 2065
10款CSS3进度条Loading动画 在线演示 本地下载 posted @ 2018-12-05 15:50 栖息地 阅读(...) 评论(...) 编辑 收藏
html+js加载进度动画
棠梨染青衣
07-25 3180
设置一个按钮，点击它，出现三种加载进度动画。  下面用js设置了动画的时间。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;title&gt;进度条&lt;/title&gt; &lt;script src="js/jquery-1.7.
动态加载进度条动画示例
1. 加载进度条动画的概念与作用： 加载进度条动画是一种用户界面元素，用于在加载过程中向用户提供实时反馈。它的主要作用是告知用户程序或网页正在处理某些任务，并显示当前处理进度的百分比或阶段。进度条动画...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值