如何用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

 

 

jQuery倒计时圆形进度条是一种利用jQuery实现的动态效果,通常用于显示倒计时或者完成度百分比的场景。通过结合HTML、CSS和JavaScript,我们可以创建出一个美观且直观的圆形进度条实现的基本思路是使用HTML来构建进度条的基本结构,CSS来设计样式,而jQuery则用来控制进度条的行为和动画效果。 以下是一个简单的实现步骤: 1. 创建基本的HTML结构:使用`<div>`元素来定义进度条的外层容器和内部的进度指示器。 2. 设计CSS样式:通过CSS来设置进度条的形状、颜色以及动画效果。可以使用`border-radius`属性来实现圆形效果,并通过`transform`属性的`rotate`值来旋转进度条使其显示为圆环。 3. 使用jQuery控制进度:通过JavaScript代码来计算剩余时间和已消耗时间的比例,并动态地更新进度条的宽度或进度指示器的角度,从而实现倒计时或完成度的动态显示。 一个简单的进度条实现示例代码如下: HTML: ```html <div id="countdown"> <div id="progressBar"></div> </div> ``` CSS: ```css #countdown { width: 150px; height: 150px; border: 5px solid #f0f0f0; border-radius: 50%; position: relative; } #progressBar { width: 0; height: 100%; border-radius: 50%; position: absolute; top: 0; left: 0; border-top: 5px solid #3498db; transform-origin: 50% 50%; transform: rotate(180deg); } ``` jQuery: ```javascript $(function() { var timeLeft = 1000; // 倒计时时间,单位毫秒 var interval = 100; // 更新频率,单位毫秒 var progress = 0; // 初始进度值 var countdown = setInterval(function() { timeLeft -= interval; progress = 360 * (timeLeft / 1000); $("#progressBar").css('transform', 'rotate(' + progress + 'deg)'); if (timeLeft <= 0) { clearInterval(countdown); } }, interval); }); ``` 这段代码将创建一个150像素宽高的圆形进度条,并使用jQuery每100毫秒更新一次进度,直到倒计时结束。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值