10种动态进度条用css3实现

最新推荐文章于 2024-05-06 13:50:28 发布
最新推荐文章于 2024-05-06 13:50:28 发布
阅读量2k 收藏 5
点赞数 3
分类专栏： 前端 文章标签： html5 html css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mr_jianghanlin/article/details/105662611
版权

用css做的10种动态进度条，喜欢可以直接去用话不多说先看效果图：

在这里插入图片描述

实现上图的，最主要的就是应用了css动画属性@keyframes和animation属性结合应用

下面看看语法：

@keyframes

@keyframes animationname {keyframes-selector {css-styles;}}
animationname必需的。定义animation的名称。
keyframes-selector必需的。动画持续时间的百分比。合法值：0-100%from (和0%相同)to (和100%相同)注意： 您可以用一个动画keyframes-selectors。
css-styles必需的。一个或多个合法的CSS样式属性。

简单的实现示例：

@keyframes mymove
{
0%   {top:0px;}
25%  {top:200px;}
50%  {top:100px;}
75%  {top:200px;}
100% {top:0px;}
}
{
0%   {top:0px;}
25%  {top:200px;}
50%  {top:100px;}
75%  {top:200px;}
100% {top:0px;}
}

animation

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

在这里插入图片描述

下面看看实现的HTML代码：

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

<head>
    <meta charset="UTF-8">
    <title>jiang</title>
    <link rel="stylesheet" href="sty.css">
</head>

<body>
    <div class="content">
        <div class="one">
            <div class="one1"></div>
            <div class="one2"></div>
            <div class="one3"></div>
            <div class="one4"></div>
            <div class="one5"></div>
            <div class="one6"></div>
            <div class="text">loading...</div>
        </div>
        <div class="two">
            <div class="two1"></div>
            <div class="two2"></div>
            <div class="two3"></div>
            <div class="two4"></div>
            <div class="two5"></div>
            <div class="two6"></div>
            <div class="text">loading...</div>
        </div>
        <div class="there">
            <div class="there1"></div>
            <div class="text3">loading...</div>
            <div class="there2"></div>
            <div class="there3"></div>
        </div>
        <div class="four">
            <div class="text3">loading...</div>
            <div class="four1"></div>
        </div>
        <div class="five">
            <div class="five1"></div>
            <div class="five2"></div>
            <div class="text4">loading...</div>
        </div>
        <div class="six">
            <div class="six1"></div>
            <div class="six2"></div>
            <div class="six3"> </div>
            <div class="text5">loading...</div>
        </div>
        <div class="seven">
            <div class="text6">loading...</div>
            <div class="sevendown">
                <div class="seven1"></div>
                <div class="seven2"></div>
                <div class="seven3"></div>
                <div class="seven4"></div>
                <div class="seven5"></div>
                <div class="seven6"></div>
            </div>
        </div>
        <div class="eigth">
            <div class="text6">loading...</div>
            <div class="eigthdown">
                <div class="eigth1"></div>
                <div class="eigth2"></div>
                <div class="eigth3"></div>
            </div>
        </div>
        <div class="nine">
            <div class="ninedown">
                <div class="nine1"></div>
                <div class="text7">loading...</div>
            </div>
        </div>
        <div class="ten">
            <div class="ten1"></div>
            <div class="ten2"></div>
            <div class="text8">loading...</div>
        </div>



    </div>
</body>

</html>

还有css代码：

.content{
    display: flex;
    flex-wrap: wrap;
}

.one,.two,.there,.four,.five,.six,.seven,.eigth,.nine,.ten{
    width: 150px;
    height: 150px;
    border: 1px solid black;
    margin:5px 10px;
    background-color: #25AD81;

}
.one1,.one2,.one3,.one4,.one5,.one6{
    width: 0px;
    height: 10px;

    margin-top: 3px;
    background-color: white;
   
}
.two{

    background-color:#32CEFF ;
}
.there{
    background-color: red;
}
.four{
     background-color: #FFAD73
}
.five{
    background-color: #60307D;
}
.six{
    background-color: #C3C3C3;
}
.seven{
    background-color: #3E3484;
}
.eigth{
    background-color: #C8EA70;
}
.nine{
    background-color: #1B2324;
}
.ten{
    background-color: #FEE673;
}


.there1,.there2,.there3{
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color:white ;

}
.there1{
    margin:3px auto ;
     animation: runyuan1 1s linear alternate infinite;
}
.there2{
    display: inline-block;
    animation: runyuan2 1s linear alternate infinite;

}
.there3{
    display: inline-block;
    animation: runyuan3 1s linear alternate infinite;
}
.four1{
     width: 20px;
     height: 20px;
     background-color: red;
     animation: scla 1s  linear  infinite;

}
.five1{
    margin:auto;
    margin-top:10px ;
    width: 0;
    border-top: 50px solid #DFD6E6 ;
    border-bottom:  50px  solid #DFD6E6;
    border-left:  50px  solid #DFD6E6 ;
    border-right:  50px  solid white ;
    border-radius: 50px;
    animation: rotateyuan 1s linear  infinite;
}
.five2{
    width: 0;
    position: relative;
    top: -95px;
    left: 30px;
    border-top: 45px solid #60307D;
    border-bottom:  45px  solid #60307D;
    border-left:  45px  solid #60307D ;
    border-right:  45px  solid #60307D ;
    border-radius: 45px;

}
.six1{
    margin:auto;
    margin-top:10px ;
    width: 0;
    border-top: 50px solid white ;
    border-bottom:  50px  solid white;
    border-left:  50px  solid white ;
    border-right:  50px  solid white ;
    border-radius: 50px;
    animation: rotateyuan 1s linear  infinite;
}
.six2{
    width: 0;
    position: relative;
    top: -98px;
    left: 27px;
    border-top: 48px solid #C3C3C3;
    border-bottom:  48px  solid #C3C3C3;
    border-left:  48px  solid #C3C3C3 ;
    border-right:  48px  solid #C3C3C3 ;
    border-radius: 48px;
    z-index: 0;

}
.six3{
    width:15px;
    height: 15px;
    border-radius:7.5px;
    position: relative;
    top:-105px;
    left: 74px;
    background-color: white;
    animation: rotateyuan1 1s linear  infinite;
}
.seven1,.seven2,.seven3,.seven4,.seven5,.seven6{
    width: 5px;
    height: 10px;
    display: inline-block;

    margin-right: 2px;
    background-color: #8F80CF;

}
.seven1{
    animation: runs1 1s  0.8s linear alternate infinite;
}
.seven2{
    animation: runs2 1s 0.3s linear alternate infinite;
}
.seven3{
     animation: runs3 1s  0.5s linear alternate infinite;
 }
.seven4{
      animation: runs4 1s 1s linear alternate infinite;
  }
.seven5{
       animation: runs5 1s  0.6s linear alternate infinite;
   }
.seven6{
        animation: runs6 1s 0s linear alternate infinite;
    }
.sevendown{

    display: flex;
    align-content: flex-start;
    justify-content: center;
}
.eigthdown{
    display: flex;
    justify-content: space-evenly;
}
.eigth1, .eigth2, .eigth3{
    width: 30px;
    height: 30px;
    background-color: #4F5548;
}
.eigth1{
    animation: runeigth1 0.8s  linear alternate infinite;
}
.eigth2{
      animation: runeigth1 0.8s 0.7s linear alternate infinite;
}
.eigth3{
        animation: runeigth1 0.8s 1.3s linear alternate infinite;
}
.nine1{
    height: 12px;
    width: 0px;
    margin-top:60px ;
    margin-left: 30px;
    background-color: #B2CD6F;
    animation: runnine1 1.5s  linear  infinite;
}
.ten1{
    margin:auto;
    margin-top:30px ;
    width: 0;
    border-top: 25px solid #FEE673 ;
    border-bottom:  25px  solid #FEE673;
    border-left:  25px  solid #AF9B54 ;
    border-right:  25px  solid #AF9B54 ;
    border-radius: 25px;
    animation: rotateyuan 1s linear  alternate infinite;
}
.ten2{
    width: 0;
    position: relative;
    top: -45px;
    left: 55px;
    border-top: 20px solid #FEE673;
    border-bottom:  20px  solid #FEE673;
    border-left:  20px  solid #FEE673 ;
    border-right:  20px  solid #FEE673 ;
    border-radius: 20px;

}



.two1, .two2, .two3, .two4, .two5, .two6{
    width: 0px;
    height: 10px;
    margin-top: 3px;
    background-color: #007BAE;
}
.one1, .two1{
    margin-top: 13px;
    animation: run1 1s linear alternate infinite;
}
.one2, .two2{
    animation: run2 1s 1.4s linear alternate infinite;
}
.one3, .two3{
    animation: run3 1s 0.7s linear alternate infinite;
}
.one4, .two4{
    animation: run4 1s 1.2s linear alternate infinite;
}
.one5, .two5{
    animation: run5 1s  0.5s linear alternate infinite;
}
.one6, .two6{
    animation: run6 1s 2s linear alternate infinite;
}
.text{
    text-align: center;
    color: white;
    margin-top: 10px;
}
.text3{
   position:relative;
   left:20%;
    color: white;
    top: 40px;

}
.text4{

    margin-top: -90px;
    text-align: center;
    color: white;
}
.text5{
     position: relative;
     top:-175px ;
    text-align: center;
    font-size: 20px;
    color: white;
}
.text6{
    text-align: center;
    color: black;
    margin-top: 30px;
}
.text7{
       text-align: center;
       color: #1B2324;
       font-size: 5px;
       margin-top: -13px;
}
.text8{
    text-align: center;
    color: #1B2324;
    font-size: 20px;
    margin-top: -13px;
}
@keyframes run1 {
    0%{
        width: 0;
    }
    100%{
        width: 80px;
    }
}
@keyframes run2 {
    0% {
        width: 0;
    }
    100% {
        width: 98px;
    }
}
@keyframes run3 {
    0% {
        width: 0;
    }
    100% {
        width: 110px;
    }
}
@keyframes run4 {
    0% {
        width: 0;
    }
    100% {
        width: 123px;
    }
}
@keyframes run5 {
    0% {
        width: 0;
    }
    100% {
        width: 60px;
    }
}
@keyframes run6 {
    0%{
        width: 0;
    }
    100%{
        width: 120px;
    }
}
@keyframes runyuan1{
   0%{
      transform: translate(0,0);
   }
   100%{
        transform: translate(0,40px);
   }
}
 @keyframes runyuan2{
    0%{
      transform: translate(10px,70px);
    }
    100%{
        transform: translate(55px,30px);
   }

}
@keyframes runyuan3{
    0%{
      transform: translate(120px,70px);
    }
    100%{
        transform: translate(65px,30px);
   }

} 
@keyframes scla{
    0%{
      transform:  translate(10px,50px) ;
      border-radius:10px;
      opacity: 0;
    }
    50%{
        opacity: 1;
    }
    100%{
        transform: translate(110px,50px);
        border-radius:10px;
        opacity: 0;
   }

}
@keyframes  rotateyuan{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
@keyframes rotateyuan1 {
    0%{
        transform-origin: 0px -40px;
        transform: rotate(0deg);

       
    }
    100%{
        transform-origin: 0px -40px;
        transform: rotate(360deg);
    }
    
}
@keyframes runs1 {
    0%{
        height: 0;
    }
    100%{
        height: 80px;
    }
}
@keyframes runs2 {
    0% {
        height: 0;
    }
    100% {
        height: 83px;
    }
}
@keyframes runs3 {
    0% {
        height: 0;
    }
    100% {
        height: 79px;
    }
}
@keyframes runs4 {
    0% {
        height: 0;
    }
    100% {
        height: 86px;
    }
}
@keyframes runs5 {
    0% {
        height: 0;
    }
    100% {
        height: 75px;
    }
}
@keyframes runs6 {
    0%{
        height: 0;
    }
    100%{
        height: 90px;
    }
}
@keyframes runeigth1 {
    0%{
        opacity: 1;
        border-radius: 0;
    }
    100%{
        opacity: 0;
        border-radius: 15px;
    }
}
@keyframes runnine1 {
    0%{
       width: 10px;
    }
    100%{
      width: 100px;
    }
}
Mr_jianghanlin
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML+css制作简易进度条
12-13
1、HTML代码 复制代码代码如下: 经验值： <span class=”progress-bar”><b xss=removed> </b></span> 2、CSS样式 复制代码代码如下:.progress-bar, .progress-bar b{background: url(“/images/ico.png”) no-repeat scroll 0 0; display: block;} .progress-bar {background-position: 0 0; height: 15px;width: 430px;} .progress-
10款CSS3进度条Loading动画.zip
07-03
10款CSS3进度条Loading动画是一款不仅有创意的外观，而且还有非常特别的动画效果。
CSS3彩色进度条加载动画_CSS3_动画特效_
09-30
CSS3 彩色进度条加载动画 带进度百分比
[前端案例]用HTML、JS、CSS实现一个进度条，加上动画效果
小张Python
05-21 1743
进度条最终效果如下，上面是一个进度条进度，进度通过线条颜色来控制：蓝色表示已达到该进度，黑色表示未达到；下方是两个按钮来控制整体进度条的进度：点击Prev按钮减少进度，Next来增加进度；首先创建一个 index.html，补充页面中的标签元素</</</</</</</</</</</</</</</</</
HTML5 CSS3 诱人的实例 ： 网页加载进度条的实现，下载进度条等(1)
最新发布
2401_84413145的博客
05-06 851
文章会持续更新的。绝对干货！！！Android进阶学习全套手册关于实战，我想每一个做开发的都有话要说，对于小白而言，缺乏实战经验是通病，那么除了在实际工作过程当中，我们如何去更了解实战方面的内容呢？实际上，我们很有必要去看一些实战相关的电子书。
分享9款极具创意的HTML5/CSS3进度条动画
weixin_34050519的博客
04-13 323
1、HTML5/CSS3图片加载进度条 可切换多主题 今天要分享的这款HTML5/CSS3进度条模拟了真实的图片加载场景，插件会默认去从服务器下载几张比较大的图片，然后让该进度条展现当前读取图片的进度，让演示变得非常真实。另外该CSS3进度条还可以切换多个主题样式，外观非常漂亮。 在线演示 源码下载 2、HTML5超具喜感的加载提示 转圈的胖娃娃 一款利用HTML5和CSS3实现的创...
css实现进度条
weixin_63681863的博客
11-09 1323
【代码】css实现进度条。
CSS进度条动画
weixin_44481113的博客
12-26 1451
CSS动画实现进度条从左到右滚动utm_id=0。
CSS3过渡、过渡练习——进度条案例、2D转换(translate、rotate、scale、转换中心点transform-origin)、动画、3D、案例（两面翻转的盒子、3D导航栏、旋转木马案例）
weixin_70320000的博客
02-16 1705
CSS3过渡、过渡练习——进度条案例、2D转换(translate、rotate、scale、转换中心点transform-origin)、动画、3D、案例（两面翻转的盒子、3D导航栏、旋转木马案例）
肝了两宿才收集的17个超炫酷的 CSS 动画加载与进度条特效，绝对值得收藏！！！
热门推荐
Amo Xiang的博客
06-23 1万+
文章目录一、圆形加载动画二、上下跳动的圆球加载动画三、3D立体加载动画四、饼图加载动画五、多色圆点波动效果的加载动画六、制作顺时针放大的圆圈加载动画七、制作小圆圈轮流放大的加载动画八、制作竖条加载动画九、制作水波扩散效果加载动画十、制作逆时针逐渐放大多点加载动画十一、制作形状变化的加载动画十二、实现动态前进的阴影进度条十三、椭圆形进度条加载十四、彩色进度条加载效果十五、环形加载动画十六、制作斑马线样式的进度条十七、程序加载页面 一、圆形加载动画 1、实例描述：浏览网页时，难免会有网页加载慢的情况，当网页长时
div css实现进度条
Artemis视同
02-02 5947
div css实现进度条 进度条前端开发中经常用到今天来看下简单的HTML和css实现的进度条。 我们先看下代码： div class="progress"> span class="bar" style="width: 40%;">40%span> div> 也可以将标签换为 下面重点是css代码： style type="text/css"> b
【前端CSS3】CSS3实现进度条
mengStudents的博客
12-12 3511
1、使用keyframe实现 // html结构 &amp;amp;amp;lt;div class=&amp;amp;quot;progress&amp;amp;quot;&amp;amp;amp;gt; &amp;amp;amp;lt;div class=&amp;amp;quot;progress-bar&amp;amp;quot;&amp;amp;amp;gt; &amp;amp;amp;lt;div class=&amp
如何用css3实现一个简单的进度条
枫叶在飘呀的博客
04-18 1248
用css3实现多样化的进度条 首先，什么是进度条，跟大家举个例子，我们在浏览一个网页时，网页在加载的时候会有一个进度的提示，这样能够准确的告诉我们什么时候资源可以完全加载出来，最常见的就是一个圆不断的旋转，数字在不断的增加。 下面我就跟大家简单介绍一下： 1.首先，学习进度条，并且能够实现进度条可以运动，例如上面提到的可以旋转，跳动等等。 2.熟悉并掌握 css3的语法，transfrom 和 a...
css+js动态进度条的实现
03-30
css+Js实现动态进度条的动态加载的特效，同时含有示例页面
css动态的进度条
08-06
css动态的进度条，今天刚封装的！
使用CSS3实现环形进度条效果
09-27
主要介绍了使用CSS3实现环形进度条效果,需要的朋友可以参考下
利用css3实现进度条效果及动态添加百分比
11-20
项目过程中，开始使用了js的requestAnimationFrame方法实现进度条，但是在数据超级多的时候非常影响性能，如此改用css去实现，优化。 先贴代码： <!DOCTYPE html> <html lang="en"> <head> <...
使用css3实现圆形进度条
03-29
这篇文章里面使用jquery实现，但原理是一样的，在小程序中只要定义并改变相应的变量就行了 另，文中的图片是window自带的...在平时的开发中，经常使用元素的border来显示圆形图案，在使用css3实现圆形进度条时，同样也
Javascript+CSS3实现进度条效果
10-21
本篇文章主要介绍Javascript+CSS3实现进度条效果，可以实现给用户一个等待的过程，有需要的可以了解一下。
css实现圆形进度条动态
09-29
要实现一个圆形进度条的动态效果，可以使用CSS中的@keyframes动画和transform属性。 首先，创建一个包含圆形进度条的div元素，并设定其宽高和边框样式，使它呈现为圆形。 然后，使用CSS的@keyframes创建一个动画序列，在序列中设置进度条的旋转角度。例如，可以从0°开始旋转，到360°结束，表示进度条的完整程度。 接下来，在CSS中，为进度条的div元素添加animation属性，将刚才创建的动画序列应用于进度条上，并设定动画的持续时间、重复次数等。 最后，通过设置transform-origin属性，将进度条的旋转中心设置为圆心，使得进度条动画在圆形元素中心点进行旋转，形成动态效果。 例如，下面是一个实现50%进度的圆形进度条的CSS代码示例： ```css .circle { width: 100px; height: 100px; border: 5px solid #ccc; border-radius: 50%; animation: progress 2s linear infinite; transform-origin: center center; } @keyframes progress { 0% { transform: rotate(0deg); } 100% { transform: rotate(180deg); } } ``` 这个示例中，圆形进度条的宽高为100px，边框为5px粗的灰色线条。动画序列progress中，进度条从0°开始旋转到180°，持续2秒，线性变化，并无限循环播放。进度条的旋转中心被设置为圆心。 这样，通过CSS实现了一个圆形进度条的动态效果。可以根据需要修改代码中的数值，实现不同的进度和动画效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值