用动画实现10种进度条样式

最新推荐文章于 2025-03-25 13:51:58 发布
最新推荐文章于 2025-03-25 13:51:58 发布
阅读量481 收藏 5
点赞数
文章标签： css3 html animation
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_45614713/article/details/105685199
版权

知识储备：

1.设计网页结构（html/5)
2.利用CSS3 的animation实现动画效果
3.给样式设置position属性，利用“父相子绝”实现定位
4.使用box-shadow实现小点点
效果如下：
在这里插入图片描述
结构如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>进度条</title>
    <link rel="stylesheet" href="CSS/pb.css">
</head>
<body>
    <div class="loading_1">
        <ul class="ul1">
            <li class="loading_1_1"></li>
            <li class="loading_1_2"></li>
            <li class="loading_1_3"></li>
            <li class="loading_1_4"></li>
            <li class="loading_1_5"></li>
        </ul>
        <p>loading...</p>
    </div>
    <div class="loading_2">
        <ul class="ul2">
            <li class="loading_2_1"></li>
            <li class="loading_2_2"></li>
            <li class="loading_2_3"></li>
            <li class="loading_2_4"></li>
            <li class="loading_2_5"></li>
        </ul>
        <p>loading...</p>
    </div>
    <div class="loading_3">
        <div class="circle1"></div>
        <div class="loading"><p>loading...</p></div>
        <div class="circle2"></div>
        <div class="circle3"></div>
    </div>
    <div class="loading_4">
        <div class="loading"><p>loading...</p></div>
        <div class="circle"></div>
    </div>
    <div class="loading_5">
        <div class="bg"></div>
        <div class="circle"></div>
        <span class="loadWord">loading</span><span class="loading"></span>
    </div>
    <div class="loading_6">
        <div class="circleOut"> <div class="circleIn"></div></div>
        <p>loading</p>
    </div>
    <div class="loading_7">
        <p>loading</p>
        <div class="loading">
            <span class="loading_7_1"></span>
            <span class="loading_7_2"></span>
            <span class="loading_7_3"></span>
            <span class="loading_7_4"></span>
            <span class="loading_7_5"></span>
            <span class="loading_7_6"></span>
        </div>
    </div>
    <div class="loading_8">
        <div class="bg"></div>
        <div class="loading"></div>
        <p>loading</p>
    </div>
    <div class="loading_9">
        <p class="loadingWord">loading</p>
        <span class="loading"></span>
    </div>
    <div class="loading_10">
        <div class="bg"></div>
        <div class="circle"></div>
    </div>
    </div>
</body>
</html>

样式设置如下
pb.css

*{
    margin:0;
    padding: 0;
}
body{
    background: gray;
}
div{
    display: block;
    float: left;
}
.loading_1{
    background: limegreen;
    width: 200px;
    height:200px;
    font-family: "黑体";
    color: white;
    font-size: 20px;
    text-align: center;
}
.ul1{
    padding:20px 5px;
    list-style: none;
}
.ul1 li{
    background: white;
    margin: 2px;
}
.loading_1_1{
    background: white;
    height:20px;
    /*transition: all 3s ease-in-out;*/
    animation: progressMove 2s ease-in-out both infinite alternate;
}
.loading_1_2{
    background: white;
    height:20px;
    /*transition: all 3s ease-in-out;*/
    animation: progressMove 1s ease-in-out 0.5s both infinite alternate;
}
.loading_1_3{
    background: white;
    /*width: 20px;*/
    height:20px;
    /*transition: all 3s ease-in-out;*/
    animation: progressMove 2s linear both infinite alternate;
}
.loading_1_4{
    background: white;
    /*width: 20px;*/
    height:20px;
    /*transition: all 3s ease-in-out;*/
    animation: progressMove 2s linear 0.5s both infinite alternate;
}
.loading_1_5{
    background: white;
    /*width: 20px;*/
    height:20px;
    /*transition: all 3s ease-in-out;*/
    animation: progressMove 3s ease-in 0.5s both infinite alternate;
}
.loading_1{
    background: limegreen;
    width: 200px;
    height:200px;
    font-family: "黑体";
    color: white;
    font-size: 20px;
    text-align: center;
}
/**/
.loading_2{
    background: skyblue;
    width: 200px;
    height:200px;
    font-family: "黑体";
    color: steelblue;
    font-size: 20px;
    text-align: center;
}
.ul2{
    padding:20px 5px;
    list-style: none;
}
.ul2 li{
    background: steelblue;
    margin: 2px;
}
.loading_2_1{
    /*background: white;*/
    height:20px;
    /*transition: all 3s ease-in-out;*/
    animation: progressMove 2s ease-in-out both infinite alternate;
}
.loading_2_2{
    /*background: white;*/
    height:20px;
    /*transition: all 3s ease-in-out;*/
    animation: progressMove 1s ease-in-out 0.5s both infinite alternate;
}
.loading_2_3{
    /*background: white;*/
    /*width: 20px;*/
    height:20px;
    /*transition: all 3s ease-in-out;*/
    animation: progressMove 2s linear both infinite alternate;
}
.loading_2_4{
    /*background: white;*/
    /*width: 20px;*/
    height:20px;
    /*transition: all 3s ease-in-out;*/
    animation: progressMove 2s linear 0.5s both infinite alternate;
}
.loading_2_5{
    /*background: white;*/
    /*width: 20px;*/
    height:20px;
    /*transition: all 3s ease-in-out;*/
    animation: progressMove 3s ease-in 0.5s both infinite alternate;
}

/**/
@keyframes progressMove {
    0%{
        width: 0;
    }
    100%{
        width:80%;
    }
}
/* 第三种   */
.loading_3{
    position: relative;
    background: red;
    width: 200px;
    height:200px;
    text-align: center;
    opacity: 70%;
    color: white;
}
.circle1{
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
    top:10px;left: 90px;
    animation: move1 1s linear both infinite alternate;
}
@keyframes move1 {
    0%{
        top:10px;left: 90px;
    }
    100%{
        top:60px;left: 90px;
    }
}
.circle2{
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
    left:10px;bottom: 10px;
    animation: move2 1s linear both infinite alternate;
}
@keyframes move2{
    0%{
    }
    100%{
        transform: translate(60px,-70px);
    }
}
.circle3{
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
    right:10px;bottom: 10px;
    animation: move3 1s linear both infinite alternate;
}
@keyframes move3{
    0%{
    }
    100%{
        transform: translate(-60px,-70px);
    }
}
.loading_3 .loading{
    position: absolute;
    font-size: 20px;
    top:75px;left:60px;
}
/*four*/
.loading_4{
    position: relative;
    background: #fbc88f;
    width: 200px;
    height:200px;

    color: #FB7209;
}
.loading_4 .loading{
    position: absolute;
    font-size: 20px;
    top:60px;
    left: 60px;
}
.loading_4 .circle{
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #FB7209;
    left: 10px;top: 120px;
    animation: rotateMove4 1s linear both infinite;
}
@keyframes rotateMove4 {
    0%{
        opacity: 0;
    }
    50%{
        opacity: 100%;
        width: 20px;
        height: 20px;
        transform: translateX(90px);
    }
    100%{
        opacity: 0;
        width: 10px;
        height:10px;
        transform: translateX(180px);
    }
}
/*loading_5*/
.loading_5{
    position: relative;
    background: #944bc8;
    width: 200px;
    height:200px;
    color: white;
}
.loading_5 .bg {
    width: 25px;
    height: 25px;
    top:80px;left: 85px;
    border: 3px solid #ddd;
    opacity: 80%;
    border-radius: 50%;
    position: absolute;
    animation: move ease-in-out infinite ;
}
.loading_5 .circle{
    position:absolute;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border-right:1px solid rgb(255, 255, 255);
    animation: rotateMove5 1s linear both infinite;
    top:82px;left: 87px;
}
@keyframes rotateMove5 {
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(1080deg);
    }
}
.loading_5 .loadWord{
    position: absolute;
    top:125px;left:70px;
}
.loading_5 .loading{
    position: absolute;
    top:140px;left:130px;
    height: 2px;
    width: 2px;
    display: inline-block;
    /*box-shadow: 2px 0 0 white ,7px 0 0 white, 12px 0 0 white;*/
    animation: change 2.4s  infinite steps(1,start);
}
@keyframes change{
    25%{
        box-shadow: 2px 0 0 #fff;
    }
    50%{
        box-shadow: 2px 0 0 #fff ,7px 0 0 #fff;
    }
    75%{
        box-shadow: 2px 0 0 #fff ,7px 0 0 #fff, 12px 0 0 #fff;
    }
}
/*loading_6*/
.loading_6{
    position: relative;
    width: 200px;
    height: 200px;
    background: lightgray;
    color: white;
}
.circleOut{
    display: block;
    width:100px;
    height: 100px;
    position: absolute;
    top:50px;
    left: 50px;
    border-radius: 50%;
    border: 2px solid white;
    /*旋转*/
    animation:circleRoate 2s ease-in-out infinite;

}
.circleIn{
    position: absolute;
    width:10px;
    height: 10px;
    border-radius: 50%;
    background: white;
    top:8px;
    left:8px;
}
@keyframes circleRoate{
    from{transform: rotate(0deg) ;}
    to{transform: rotate(360deg);}
}
.loading_6 p{
    position: absolute;
    top:90px;
    left:72px;
}
/*loading7*/
.loading_7{
    position: relative;
    background: darkmagenta;
    color: white;
    width: 200px;
    height:200px;
}
.loading_7 p{
    position: absolute;
    left:70px;top:70px;
}
 .loaing_7 loading {
    border:1px solid black;
    position: absolute;
    list-style: none;
    margin-left: 10px;margin-right: 10px;
    top:100px;
}
.loading_7_1 {
    position: absolute;
    background: white;
    width: 10px;

    top: 120px;
    left: 40px;
    animation: colMove 1s linear infinite alternate;
}
.loading_7_2{
    position: absolute;
    background: white;
    width:10px;
    height: 50px;
    left:60px;top:120px;
    animation:colMove 1s 0.5s linear infinite alternate;
}
.loading_7_3{
    position: absolute;
    background: white;
    width:10px;
    height: 50px;
    left:80px;top:120px;
    animation:colMove 1s 1.5s linear infinite alternate;
}
.loading_7_4{
    position: absolute;
    background: white;
    width:10px;
    height: 50px;
    left:100px;top:120px;
    animation:colMove 1s 2s linear infinite alternate;
}
.loading_7_5{
    position: absolute;
    background: white;
    width:10px;
    height: 50px;
    left:120px;top:120px;
    animation:colMove 1s 2.5s linear infinite alternate;
}
.loading_7_6{
    position: absolute;
    background: white;
    width:10px;
    height: 50px;
    left:140px;top:120px;
    animation:colMove 1s 3s linear infinite alternate;
}
@keyframes colMove {
    0%{
        height: 0;
    }
    100%{
        height: 50px;
    }
}
/*loading 8*/
.loading_8{
    position: relative;
    background: rgba(0, 0, 0, 0.75);
    width:200px;
    height: 200px;
}
.loading bg{
    position: absolute;
    top:90px;
    left: 25px;
    background: black;
    width:150px;
    height:20px;
    border-radius: 10%;
    /*animation: loadingMove 2s 1s linear infinite;*/
}
.loading_8 .loading{
    position: absolute;
    top:73px;
    left: 25px;
    width:150px;
    height:20px;
    border-radius: 10%;
    animation: loadingMove 5s linear infinite;
}
@keyframes loadingMove {
    0%{
        width: 0;
        background: greenyellow;
    }
    100%{
        width: 150px;
        background: greenyellow;
    }
}
.loading_8 p{
    position: absolute;
    top:72px;
    left: 25px;
    text-align: center;
    width:150px;
    height: 20px;
}
/*loading9*/
.loading_9{
    position: relative;
    background: greenyellow;
    width: 200px;
    height:200px;
}
.loading_9 .loading{
    position: absolute;
    top:120px;left:40px;
    height:20px;
    width:20px;
    border-radius: 50%;
    /*box-shadow: 2px 0 0 white ,7px 0 0 white, 12px 0 0 white;*/
    animation: showMove 2s infinite steps(1,start),showMove2 2s linear infinite;
}
@keyframes showMove {
    12.5%{
        box-shadow: 20px 0 0 black;
    }
    25%{
        box-shadow:20px 0 0 black,50px 0 0 black;
    }
    37.5%{border-radius: 0;
        box-shadow:20px 0 0 black ,50px 0 0 black,80px 0 0 black;
    }
    50%{
        box-shadow: 20px 0 0 black;
    }
    62.5%{
        box-shadow:20px 0 0 black,50px 0 0 black;
    }
    75%{
        box-shadow: 20px 0 0 black ,50px 0 0 black,80px 0 0 black;
    }
}
@keyframes showMove2 {
    0%{
        opacity:0;
    }
    50%{
        opacity: 100%;
    }
    100%{
        opacity:0%;
    }
}
@keyframes changeMove2{
    25%{
        box-shadow: 20px 0 0 black;
    }
    50%{
        box-shadow:20px 0 0 black,50px 0 0 black;
    }
    75%{
        box-shadow: 20px 0 0 black ,50px 0 0 black,80px 0 0 black;
    }
}
@keyframes changeMove2 {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 100%;
    }
}
.loading_9 .loadingWord{
    position: absolute;
    top:70px;left:70px;
}
/*loading_10*/
.loading_10{
    width: 200px;
    height: 200px;
    position: relative;
    background: #f6ff8c;
}
.loading_10 .circle{
    margin: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    border:5px solid transparent;
    top: 0;
    border-right:5px solid rgba(152, 152, 152, 0.87);
    border-left:5px solid rgba(152, 152, 152, 0.87);
    animation: move 1s ease-in-out infinite alternate;
}
@keyframes move {
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}
Volcano_WQL
关注
利用属性动画实现进度条动画
weiweijia90的博客
09-27 1766
利用属性动画实现进度条动画
[前端案例]用HTML、JS、CSS实现一个进度条，加上动画效果
小张Python
05-21 2038
进度条最终效果如下，上面是一个进度条进度，进度通过线条颜色来控制：蓝色表示已达到该进度，黑色表示未达到；下方是两个按钮来控制整体进度条的进度：点击Prev按钮减少进度，Next来增加进度；首先创建一个 index.html，补充页面中的标签元素</</</</</</</</</</</</</</</</</
多种样式的进度条
12-28
多种样式的进度条。 大家可以参考哦，非常常用和实用哦。
进度条动画集合
weixin_34326179的博客
08-07 180
1 &lt;style&gt; 2 html,body{ 3 margin: 100px; 4 padding: 0; 5 width: 100%; 6 height: 100%; 7 background: #ed5565; 8 ...
纯css实现环形进度条+动画加载效果
最新发布
weixin_52443895的博客
03-25 490
本文是小程序开发中，使用纯css+html实现的进度圆环动画加载效果（换成vue也是一样的）。，建议还是用插件，手搓不易，这很难评。希望记录的问题能帮助到你~
进度条动画的几种实现方式
wang9rui的博客
02-03 653
1.动态使用aninamtion: const head = document.getElementsByTagName('head')[0]; const style = document.createElement('style'); const styleText = document.createTextNode( `@keyframes proAni { 0%{width:0;} 100% { width:${进度的百分比}%; ..
进度条动画
beichen3997的博客
10-25 206
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>loading</title> <style> body { background: #000; } canvas { backgr...
Android 七种进度条的样式
09-03
本文将介绍Android中的七种常见进度条样式。 1. 默认样式（中等圆形）： 这是最常见的进度条样式，表现为一个中等大小的圆形。在XML布局中，你可以通过以下代码创建： ```xml android:id="@+id/progressBar1" ...
vue实现简单loading进度条
08-27
本资源主要介绍了使用 Vue 实现简单的 loading 进度条的方法，包括进度条原理、JQuery 实现和 Vue 实现等多个方面的内容。下面将详细介绍这些知识点。 一、进度条原理 进度条原理是指在页面刷新时自动加载进度条，...
canvas实现圆形进度条动画的示例代码
01-19
本文介绍了canvas实现圆形进度条动画，分享给大家，具体如下： 先给大家看看效果图，然后在上代码。 进度条动画 1. canvas的HTML部分很简单就一个canvas标签 canvas画布的宽高是自身的属性，要在行间样式设置，若是...
三种进度条样式
10-28
本代码资源提供了三种不同的加载进度条样式，旨在帮助开发者为自己的App增添更多个性化和视觉吸引力。 1. **线性进度条（Linear Progress Bar）**： 线性进度条是最常见的进度条样式，它以一条水平线的形式展示...
css3动画进度条
07-06
css3进度条动画样式 用纯css编写的进度条，感兴趣可以下载看看
漂亮的CSS3动画进度条 可自定义进度条颜色
08-23
今天我们要再来分享一款很漂亮的CSS3动画进度条，我们可以用它来显示每一项数据的所占的比例，效果很不错。之前我们也有分享过很多功能强大的CSS3进度条，像纯CSS3进度条 华丽5色进度条示例、CSS3 SVG 进度条 Loading 动画 炫酷发光特效都和今天分享的这款比较类似，可以看看。
进度条样式
02-04
They use no images, just CSS3 fancies. Like a good little designer always does, they fall back to totally acceptable experience. Here&#39;s what they look like in Opera 11 which supports some of the CSS3 used here but not all. As you might imagine, in browsers that support no CSS3 at all will look similar to the above, only even more simplified.
引导层动画和进度条
10-06
flash简易引导层与进度条，这真的是我自己做的，进度条先做长的，再用变性工具缩短
9款极具创意的HTML5&CSS3进度条动画
05-15
9款极具创意的HTML5&CSS3进度条动画
用CSS3实现动画进度条
huobengle
03-19 3836
CSS3的新特性为我们实现漂亮的进度条扫清了障碍，我们可以完全不需要任何图片和简单的Javascript代码就可以构建。 一、第一个例子 效果图： Demo地址：http://namepk.sinaapp.com/demo/progress.html。 1、 基本的HTML HTML代码非常简单： &lt;div id="loading-st...
9款极具创意的HTML5/CSS3进度条动画
weixin_34266504的博客
03-25 349
今天我们要分享9款极具创意的HTML5/CSS3进度条动画，这些进度条也许可以帮你增强用户交互和提高用户体验，喜欢的朋友就收藏了吧。 1、HTML5/CSS3图片加载进度条 可切换多主题 今天要分享的这款HTML5/CSS3进度条模拟了真实的图片加载场景，插件会默认去从服务器下载几张比较大的图片，然后让该进度条展现当前读取图片的进度，让演示变得非常真实。另外该CSS3进度条还可以切换多个主...
css进度条动态显示,CSS3实现进度条动画
weixin_29840475的博客
08-03 1062
CSS语言：CSSSCSS确定.cube {position: absolute;left: 0;top: 0;right: 0;bottom: 0;width: 500px;height: 250px;margin: auto;background: #EDEFF5;box-shadow: 1px 1px 5px #B9C0D8;border-radius: 2px;font-family: '...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值