如何用CSS做倒计时/圆形进度条效果

前言：有时，我们会见一些圆形的进度条，随着进度条的推进，进行倒计时的变化。

          若是只实现一个圆环的话，只用border和border-radius就能画出来。

          但是这样的圆环不能动，产生进度条效果的重要因素就是得从0 开始变化，而不是一个完整的圆环在旋转。所以，实现的思路如下：

         1.把整个圆环分成左右两部分；

         2.左右两部分都有半个圆环在旋转，比如先让右边的半圆环，旋转到正好接住了左半部分，然后左边的半圆环开始旋转。

一、实现步骤

       1.画右半圆环

        首先，应该是一个div包裹着一个div。父div他的宽度应该是子div宽度的一半。这样给子div一个border-radius,给父div一个overflow:hidden,这样正好会是一个半圆。

        先实现右半部分，html结构如下：

<div class="circle_process">
    <div class="wrapper right">
        <div class="circle rightcircle"></div>
    </div>
</div>

        里面的rightcircle是半个圆环，样式如下：

.circle_process{
    position:relative;
    width:47px;
    height:48px;
    background:#ffffff;
    border-radius:50%;
}
.circle_process .wrapper{
    width:24px;
    height:48px;
    position:absolute;
    top:0;
    overflow:hidden;
}
.circle_process .rightcircle{
    border-top:1px solid #1390eb;
    border-right:1px solid #1390eb;
    right:0px;
    -webkit-animation:circle_right 5s linear infinite;
}
.circle_process .circle{
    width:48px;
    height:48px;
    border:1px solid transparent;
    border-radius:50%;
    position:absolute;
    top:0;
    transform:rotate(-135deg);
}

       2.画左半圆环

<div class="wrapper left">
    <div class="circle leftcircle" id="leftcircle"></div>
</div>

.circle_process .left{
   left:0;
}
.circle_progress .leftcircle{
    border-bottom:1px solid #1390eb;
    border-left:1px solid #1390eb;
    left:0px;
    -webkit-animation:circle_left 5s linear infinite;
}

     3.两个半圆结合在一起

        两个半圆结合在就是两个圆并排放，那么这两个半圆一个position:absolute,这样两个半圆浮动在文档流当中，就结合成一个圆。d

    4.将两个半圆隐藏掉

       如果是要求从0 到完整的一个倒计时，那么我们此时需要把这个圆隐藏掉，我们可以通过transform隐藏掉。因为父级的宽度是子集宽度的一半，所以我们可以计算出，当子集的圆旋转180度的时候，整个圆就不见，全都会通过hidden隐藏在外面。同理可得另一半边圆。

    5.动画

    一个从0-180度的一个动画。

.rightcircle{
    -webkit-animation: circle_right; /*动画名称*/
    -webkit-animation-duration: 5s; /*完成一个动画需要的时间*/
    -webkit-animation-timing-function: linear; /*动画播放的方式，linear是匀速变化*/
    -webkit-animation-iteration-count:infinite;  /*动画播放的次数,infinite是无限次数*/
}
@-webkit-keyframes circle_right{
    0%{
        -webkit-transform:rotate(-135deg);
    }
    50%,100%{
        -webkit-transform:rotate(45deg);
    }
}
@-webkit-keyframes circle_left{
    0%,50%{
        -webkit-transform:rotate(-135deg);
    }
    100%{
        -webkit-transform:rotate(45deg);
    }
}

二、添加倒计时数字

<div class="circle_process" ng-click="skipStep()">
     <div class="wrapper right">
          <div class="circle rightcircle"></div>
     </div>
     <div class="wrapper left">
           <div class="circle leftcircle" id="leftcircle"></div>
     </div>
     <div style="color:#1390EB;font-size: 14px;position: absolute;top:6px;left:16px;"> 
          <span>{{timeNum}}</span>S
     </div>
     <div style="color:#1390EB;font-size: 14px;position: absolute;top:22px;left:11px;">
        跳过
     </div>
</div>

三、额外功能

       现在，已经实现了一个圆形进度条，利用这个，可以实现倒计时：

//倒计时
$scope.countdown = 6;
function settime(){
   if($scope.countdown == 1){
      $scope.step = 2;
      $scope.stepShow = false;
      window.clearTimeout($scope.timer);
      $scope.$apply();
      return;
    }else{
      $scope.countdown--;
    }
    $scope.timer = setTimeout(function(){
        settime();
    },1000)
    $scope.timeNum = $scope.countdown;
    $scope.$apply();
}

      

       现在，已经实现了一个圆形进度条，利用这个，可以实现一个小闹钟：

function getTime(){
    var date = new Date();
    var second = date.getSeconds();

    var rightcircle = document.getElementById('rightcircle');
    var leftcircle = document.getElementById('leftcircle');
    var show = document.getElementById('show');

    show.innerHTML = second;

    if(second<=30){
        rightcircle.style.cssText = "transform: rotate("+ (-135+6*second) +"deg)";
        leftcircle.style.cssText = "transform: rotate(-135deg)";
    }else{
        rightcircle.style.cssText = "transform: rotate(45deg)";
        leftcircle.style.cssText = "transform: rotate("+(-135+6*(second-30))+"deg)";
    }
}
getTime();
setInterval(function(){
    getTime();
},1000)

四、参考资料

      如何只用CSS做倒计时效果   https://www.jianshu.com/p/938693fd3be2

      使用CSS实现圆形进度条   https://www.xiabingbao.com/css/2015/07/27/css3-animation-circle.html