如何利用CSS3实现进度条

这篇文章主要介绍了如何利用CSS3实现进度条，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

专注于为中小企业提供成都网站制作、成都网站设计服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业沧源免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了千余家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

效果图如下：

如何利用CSS3实现进度条

第一种姿势如下

先上代码

/*对应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([ [  | to  ] ,]? [, ]+)
 = [left | right] || [top | bottom]
 =  [  |  ]?

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%);   
}

效果图：

如何利用CSS3实现进度条

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

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

如何利用CSS3实现进度条

第二种姿势

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

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

.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;
    }

如下效果

如何利用CSS3实现进度条

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

.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; }

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

.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); } }

.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); } }

.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); } }