实现圆形进度条svg&css

html-css09

实现圆形进度条svg&css,第1张

在生活中比较常见的是直线进度条，但是圆形进度条的实现相对有意思，我个人总结了两种圆形进度条的实现方式。

首先我们得了解什么是svg，它是使用 XML 来描述二维图形和绘图程序的语言。可以直接在html中使用svg标签实现。实现圆形进度条前先讲下svg里面stroke属性。

实现圆形进度条主要用到 stroke-dasharray 和 stroke-dashoffset 。

stroke-dasharray="2*50*3.14" ,代表虚线长314，空白间隔长314

stroke-dashoffset="2*50*3.14" ，代表虚线偏移是314，这样展示出来的部分就是空白间隔。

将圆的周长展开来表示就是这样：

用css实现主要通过用两个div分别画半圆，并结合 overflow:hidden 实现。

这是从100->0，如果是从0->100的话，只需要修改动画旋转角度即可。

以上就是我总结的两种画原型进度条的方法，挺有意思的吧？

html部分：

<pre class="brush:htmltoolbar: trueauto-links: false"><div class="div1"> <div class="right-div2"> <div class="right-div3"></div></div><div class="left-div2"> <div class="left-div3"></div></div></div><div class="div4"><span>0</span>%</div></pre>

最内层的div3裁剪一半然后旋转需要的角度， 父级div2裁剪一半，此时已经裁剪出来了那个扇形了 最后在上面加个圆形遮盖层

css代码：

<pre class="brush:csstoolbar: trueauto-links: false">.div1, .right-div2, .right-div3, .left-div2, .left-div3 { width:200pxheight:200pxborder-radius:50%} .div1 { background:#cccposition:relative} .right-div2, .right-div3, .left-div2, .left-div3 { position:absoluteleft:0top:0} .right-div2, .right-div3 { clip:rect(0,auto,auto,100px)} .left-div2, .left-div3 { clip:rect(0,100px,auto,auto)} .right-div3 { background:#f00transform:rotate(-180deg)} .left-div3 { background:#f00transform:rotate(-180deg)} .div4 { position:absolutetop:25pxleft:25pxwidth:150pxheight:150pxline-height:150pxtext-align:centerborder-radius:50%background:#fff}</pre>

js代码：

<pre class="brush:jstoolbar: trueauto-links: false">$(function(){ var a = 0 var b = 0 var timer = setInterval(function(){ a++ if(a<=50){ //-180deg是0%，转换一下 b = a*3.6-180$('.right-div3').css('transform','rotate(' + b + 'deg)') }else if(a>50&&a<=100){ //超过50%，需要修改左边的,右边0deg是50% $('.right-div3').css('transform','rotate(0)') //左边0deg是100%，转换一下 b = a*3.6-360$('.left-div3').css('transform','rotate(' + b + 'deg)') }else{ clearInterval(timer)return }$('.div4 span').html(a) },200)})</pre>