利用CSS3实现进度条的两种姿势详解

站长资源 2025/11/1 佚名

2 0 1

黑松山资源网 Design By www.paidiu.com

效果图如下：

第一种姿势如下

先上代码

<div id="progress">
      <span></span>
</div>

/*对应CSS*/
    #progress{
           width: 300px;
           height: 30px;
           border:1px solid #ccc;
           border-radius: 15px;
           overflow: hidden;  /*注意这里*/
           box-shadow: 0 0 5px 0px #ddd inset;
    }          
    #progress span {
           display: inline-block;
           width: 70%;
           height: 100%;       
           background: linear-gradient(45deg, #2989d8 30%,#7db9e8 31%,#7db9e8 58%,#2989d8 59%);    
           background-size: 60px 30px;
           text-align: center;
           color:#fff;
           animation:load 3s ease-in;
     }
     @keyframes load{
           0%{
               width: 0%;
           }
           100%{
               width:70%;
           }
       }

上方的渐变色使用了css3中的 linear-gradient

linear-gradient语法

<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)
<side-or-corner> = [left | right] || [top | bottom]
<color-stop> = <color> [ <length> | <percentage> ]?

angle：用角度值指定渐变的方向（或角度）。
to left：设置渐变为从右到左。相当于: 270deg
to right：设置渐变从左到右。相当于: 90deg
to top：设置渐变从下到上。相当于: 0deg
to bottom：设置渐变从上到下。相当于: 180deg。这是默认值，等同于留空不写。
color-stop：用于指定渐变的起止颜色：
color：指定颜色。
length：用长度值指定起止色位置。不允许负值
percentage：用百分比指定起止色位置。

栗子：

.test1{
    background: linear-gradient(#EA2000, #E5A399);
}
.test2 {
    background: linear-gradient(45deg,#EA2000 20%,#E5632D 50%, #E5B12D 80%);
}
.test3 {
    background: linear-gradient(to top right, #000, #416796 50%, #B5CAE4);
}
.test4{
    background: linear-gradient(45deg, #2989d8 30%,#7db9e8 31%,#7db9e8 58%,#2989d8 59%);   
}

效果图：

动画通过keyframes来实现，通过改变span的宽度来实现进度的效果，素不素hin简单？！

现在的进度条效果是只有70%的效果，只要改变width的值就可以啦，就像下图，一致改成某个值即可。

第二种姿势

首先，构造好一个正方形的div，将这个正方形对称分成左右两块，如下

这里构造的是一个200px 200px的一个正方形，分成两块100px200px的矩形。

<div class="progress2">
        <div class="rect right">
        </div>                               
        <div class="rect left">
        </div>
 </div>

.progress2{
        width: 200px;
        height: 200px;
        margin: 100px auto;
        position: relative;
        border:1px solid #ddd;
    }
   
    .rect{
        width: 100px;
        height: 200px;
        position: absolute;
        top:0;
        overflow: hidden; /*注意这里*/
    }
    .right{
        right:0;
    }
    .left{
        left:0;
    }

如下效果

接下来，在每一块矩形中再构造一个空心圆，先构造右半边，如下

<div class="progress2">
        <div class="rect right">
            <div class="circle rightcircle"></div>
        </div>                               
        <div class="rect left">
            
        </div>
 </div>

.circle{
        width: 160px;
        height: 160px;
        border:20px solid #ccc;
        border-radius: 50%;
        position: absolute;
        top:0;
    }
    .rightcircle{
        border-top:20px solid rgb(41,137,216);
        border-right:20px solid rgb(41,137,216);
        right:0;
    }

会看到下面的效果

由于在class：rect中，将overflow设置成了hidden，使得溢出的部分被遮盖了，之后的效果实现与这个属性关系也紧密相连。

如果没有设置该属性，效果就是这样的。

那会发现有一部分被盖住了，我们在使他旋转45度即可

.circle{
        width: 160px;
        height: 160px;
        border:20px solid #ccc;
        border-radius: 50%;
        position: absolute;
        top:0;
        transform: rotate(45deg); /*注意这里*/
    }

效果如下

我们实现动画效果的方式就是让右半边旋转180度，然后左半边旋转180度，凑成完整的效果。

先给这右半边设置动画效果，即一开始让其旋转45度，然后旋转180度，由于这只是右半边，所以在50%的时候就应该旋转完毕，之后一直保持不变。

.rightcircle{
        border-top:20px solid rgb(41,137,216);
        border-right:20px solid rgb(41,137,216);
        right:0;
        animation: load_right 5s linear infinite;
    }
    @keyframes load_right{
        0%{

            transform: rotate(45deg);
        }
        50%{

            transform: rotate(225deg);
        }
        100%{

            transform: rotate(225deg);
        }
    }

这是没有在class rect中设置overflow：hidden的效果

这是在class rect中设置了overflow：hidden的效果

现在，我们就可以把左半边也凑上了，同理，动画效果一开始先旋转45度，调正，然后一直保持不变，到50%之后，再开始旋转180度。这样就与右半边衔接上了。

<div class="progress2">
        <div class="rect right">
            <div class="circle rightcircle"></div>
        </div>                               
        <div class="rect left">
            <div class="circle leftcircle"></div>
        </div>
 </div>

.leftcircle{
        border-bottom:20px solid rgb(41,137,216);
        border-left:20px solid rgb(41,137,216);
        left:0;
        animation: load_left 5s linear infinite;
    }
    @keyframes load_left{
        0%{

            transform: rotate(45deg);
        }
        50%{

            transform: rotate(45deg);
        }
        100%{
            transform: rotate(225deg);
        }
    }

这是整体的效果

可以调整角度或者调整颜色即可实现反向的效果。

我是调整了颜色就可以得到最开始的动画效果啦,下面是完整的代码

<div class="progress2">
        <div class="rect right">
            <div class="circle rightcircle"></div>
        </div>                               
        <div class="rect left">
            <div class="circle leftcircle"></div>
        </div>
 </div>

.progress2{
        width: 200px;
        height: 200px;
        margin: 100px auto;
        position: relative;
    }
   
    .rect{
        width: 100px;
        height: 200px;
        position: absolute;
        top:0;
        overflow: hidden;
    }
    .right{
        right:0;
    }
    .left{
        left:0;
    }
    .circle{
        width: 160px;
        height: 160px;
        border:20px solid rgb(41,137,216);
        border-radius: 50%;
        position: absolute;
        top:0;
        transform: rotate(45deg);
    }
    .rightcircle{
        border-top:20px solid #ccc;
        border-right:20px solid #ccc;
        right:0;
        animation: load_right 5s linear infinite;
    }
    .leftcircle{
        border-bottom:20px solid #ccc;
        border-left:20px solid #ccc;
        left:0;
        animation: load_left 5s linear infinite;
    }
    @keyframes load_right{
        0%{

            transform: rotate(45deg);
        }
        50%{

            transform: rotate(225deg);
        }
        100%{

            transform: rotate(225deg);
        }
    }
    @keyframes load_left{
        0%{

            transform: rotate(45deg);
        }
        50%{

            transform: rotate(45deg);
        }
        100%{
            transform: rotate(225deg);
        }
    }

总结

以上就是关于CSS3实现进度条的两种方法，希望对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持。

CSS3,进度条

黑松山资源网 Design By www.paidiu.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

黑松山资源网 Design By www.paidiu.com

评论“利用CSS3实现进度条的两种姿势详解”

暂无评论...

www.paidiu.com 黑松山资源网

39,976影音资源

44,792技术资源

21,817软件资源

651,128站长资源

利用CSS3实现进度条的两种姿势详解

CSS清除浮动方法小结

详解CSS五种方式实现Footer置底

评论“利用CSS3实现进度条的两种姿势详解”

RTX 5090要首发性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

利用CSS3实现进度条的两种姿势详解

CSS清除浮动方法小结

详解CSS五种方式实现Footer置底

评论“利用CSS3实现进度条的两种姿势详解”

RTX 5090要首发 性能要翻倍！三星展示GDDR7显存

更新日志

友情链接

RTX 5090要首发性能要翻倍！三星展示GDDR7显存