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

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

Python动画制作：90秒倒计时圆形进度条效果
今天单独讲解一下使用python自带的tkinter模块,如何做出下图这种倒计时的效果. 我们使用tkinter模块里的Canvas画布组件来完成这个倒计时的制作. 拆解最终完成的图形,可以看到,除了 ...
HTML + CSS 实现矩形/圆形进度条效果 - SVG
本文记录通过 HTML + CSS + 部分原生 JS 使用 SVG 嵌入 HTML 文档的用法实现常见的圆形和矩形进度条效果,效果图如下:(实际运行效果是进度条从 0 过渡到一个目标值比如 100% ...
android绘制环形进度_Android使用Canvas绘制圆形进度条效果
前言 Android自定义控件经常会用到Canvas绘制2D图形,在优化自己自定义控件技能之前,必须熟练掌握Canvas绘图机制.本文从以下三个方面对Canvas绘图机制进行讲解: 画布Canvas ...
android自定义渐变色圆环,Android实现渐变圆环、圆形进度条效果
最近做了一个功能,里面涉及到了渐变圆形的需求.就是一个颜色可以渐变的圆环,最后实现的效果如下图: 左图是带渐变效果,右图是不带渐变效果.原理还是绘图,Canvas可以绘制的对象有:弧线(arcs).填 ...
canvas 绘制圆形进度条
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
圆的css样式,圆形进度条css3样式
30% 以下样式100upx是50upx的2倍,这是尺寸比例 .con { position: relative; display: inline-block; height: 100upx; wid ...
自定义圆形进度条自定义倒计时进度条
自定义圆形进度条自定义倒计时进度条版权声明:转载必须注明本文转自严振杰的博客: http://blog.csdn.net/yanzhenjie1003 此控件源码已开源到Github:https: ...
css实现圆形进度条加载动画
这里我会把遇到这个需求时的实现过程和遇到的问题记录下来,如果只是要看最终实现结果可直接滑到底部看实现代码. 我们经常可以看到网上有一些圆形进度条跟随数字的变化慢慢变成一个圆,这个动画实际上可以通过纯c ...
在html中怎么用圆形渐变,css怎么实现圆形渐变进度条效果
css怎么实现圆形渐变进度条效果发布时间:2021-03-17 10:29:57 来源:亿速云阅读:129 作者:小新这篇文章给大家分享的是有关css怎么实现圆形渐变进度条效果的内容.小编觉得挺 ...

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

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

最新文章

热门文章