一款CSS3圆形进度条动画特效,四种颜色+四种进度比例,除了外圈的进度外,内圈还有一个灰色的描边,整体效果简洁又大气,喜欢的童鞋请收下吧。
页面的head部分,先远程调用bootstrap样式文件,接着设置好页面各元素的样式,代码如下:
页面的body部分,四种不同的圆形百分比放在不同的div容器里面,代码如下:
<div class="demo">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="progress blue">
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value">90%</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="progress yellow">
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value">75%</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="progress pink">
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value">60%</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="progress green">
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value">85%</div>
</div>
</div>
</div>
</div>
</div>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791