CSS3实现圆形进度条
介绍
闲来无事,去了CSS3Plus网站逛了逛,发现了一个很有意思的实现--css3实现进度条。粗略看了下代码,发现原理其实很简单,不难理解。
现在在此讲述下原理并实现一个1s更新的进度条。
技术细节是这样的:进度条由两个半圆环组成,首先我们的任务是实现左右两个半圆环。圆环可以用border-radius实现,这样就意味着该方
法不兼容IE8.可以使用clip来完成对整圆环的剪切;使用rotate函数完成圆环的旋转,通过设置两个半圆环的旋转角度来实现不同进度值的显示。
clip属性是css2属性,所有的浏览器都支持该属性。对于clip有几个要点需要注意:首先,使用clip属性的元素必须是绝对定位或者固定定位的
元素,也就是说必须脱离文档流;其次,clip可以使用的函数目前只有rect(top,right,bottom,left),该函数传递4个值,其中top为裁剪区域距离
元素顶端的距离,设为auto时默认为0,right为裁剪区域距离元素左端(左边框)的值,auto时默认为元素的最右端,bottom为裁剪区域距离元
素顶端的值,auto时默认为元素最底端,left为距离元素左边的距离,auto时默认为0.
实现
.wrap{position: relative;width: 200px;height:200px;border-radius: 50%;background: #CCFFFF;text-align: center;}
.right-part{width:200px;height: 200px;position: absolute;clip:rect(0px,auto,auto,100px)}
.right{width: 200px;height:200px;position: absolute;border-radius: 50%;background: #003366;
clip:rect(0px,auto,auto,100px);}
.r-shadow{width: 150px;height:150px;border-radius: 50%;background: #fff;position: absolute;
left:25px;top:25px;} .left-part{width:200px;height: 200px;position: absolute;clip:rect(0px,100px,auto,0px)}
.left{width: 200px;height:200px;position: absolute;border-radius: 50%;background: #003366;
clip:rect(0px,100px,auto,0px);}
.l-shadow{width: 150px;height:150px;border-radius: 50%;background: #fff;position: absolute;
left:25px;top:25px;}
#desc{display:inline-block;width:200px;height:200px;line-height: 200px;font-size: 56px;position: absolute;
left:;}
<div class="wrap">
<div class="right-part">
<div class="right" id="right"></div>
<div class="r-shadow"></div>
</div>
<div class="left-part">
<div class="left" id="left"></div>
<div class="l-shadow"></div>
</div>
<span id="desc">ad</span>
</div>
function progressBar(percentage){
var p = Math.round(percentage * 100);
var deg = p * 3.6;
var right = document.getElementById("right"),
left = document.getElementById("left"),
desc = document.getElementById("desc");
if(p > 100 || p < 0) p = 100;
if(deg <= 180){
right.style.cssText = "transform:rotate("+(deg-180)+"deg);"
left.style.cssText = "background:#CCFFFF;"
}else{
right.style.cssText = "transform:none;"
left.style.cssText = "background:#003366;transform:rotate("+(deg-360)+"deg);"
}
if(desc.innerText){
desc.innerText = p+"%"
}
if(desc.textContent){
desc.textContent = p+"%";
}
}
var g = 0;
setTimeout(function _a(){
if(g>1)return;
progressBar(g);
g += 0.1
setTimeout(_a,1000)
},1000)
CSS3实现圆形进度条的更多相关文章
- 移动端纯CSS3制作圆形进度条所遇到的问题
近日在开发的页面中,需要制作一个动态的圆形进度条,首先想到的是利用两个矩形,宽等于直径的一半,高等于直径,两个矩形利用浮动贴在一起,设置overflow:hidden属性,作为盒子,内部有一个与其宽高 ...
- 纯CSS3实现圆形进度条动画
悄悄地,GIF 格式的进度条已经越来越少,CSS 进度条如雨后春笋般涌现.今天要介绍的这个 CSS3 进度条,效果和 Flyme OS 4 上的加载动画一样. 首先,来看下最终的效果: 它的 HTML ...
- 利用css3动画和border来实现圆形进度条
最近在学习前端的一些知识,发现border的功能十分强大啊! 首先来看看demo 就是这么一个圆形的进度条,在文本框中输入0-100的数值下面的进度条相应的转到多少 这个主要是利用border,旋转和 ...
- vue 圆形进度条组件解析
项目简介 本组件是vue下的圆形进度条动画组件 自由可定制,几乎全部参数均可设置 源码简单清晰 面向人群 急于使用vue圆形进度条动画组件的同学.直接下载文件,拷贝代码即可运行. 喜欢看源码,希望了解 ...
- android 自定义控件——(四)圆形进度条
----------------------------------↓↓圆形进度条(源代码下有属性解释)↓↓---------------------------------------------- ...
- WPF 实现圆形进度条
项目中用到圆形进度条,首先就想到使用 ProgressBar 扩展一个,在园子里找到迷途的小榔头给出的思路和部分代码,自己加以实现. 进度小于60显示红色,大于60则显示绿色.效果如下: 基本思路: ...
- html5 svg 圆形进度条
html5 svg 圆形进度条 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- canvas圆形进度条
通过定义一个canvas标签, new方法传进ID值,和旋转角度值,即可生成圆形进度条 <!DOCTYPE html> <html lang="en"> & ...
- iOS之UI--Quartz2D的入门应用--重绘下载圆形进度条
*:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...
随机推荐
- 安卓端网页浏览过程中实时更新title的web实现
$(function () { var scrollTop = 0, //缓存上一次触发scroll的时候的scrollTop值 appendIndex = 0, //由于第23行append这个操作 ...
- linux用户不在sudoers文件中
*** is not in the sudoers file. This incident will be reported." (用户不在sudoers文件中--) 处理这个问题很简单 ...
- 猥琐的wordpress后门分享
https://www.t00ls.net/thread-37312-1-1.html 一个可以自动调用管理员帐号登录wordpress后台的方法. <?php require('../../. ...
- OPENDATASOURCE读取远程数据库数据中文乱码问题-sqlserver R2
insert into kraft_sync_Store(StoreName,StoreCode,Province,PrefectureCity,CountyCity,Region,Area,Unit ...
- 框架设计之ADO.NET Command的ExecuteScalar误用情景及底层解说
最近下载了点资料,学了学Android,发现Android入门还算简单,从.NET过渡到Android,也就三七十一天的事. 大伙有空也可以学学... 好了,言归正文,那日,有网友发了一个他们公司的数 ...
- Kinect for Windows SDK开发学习相关资源
Kinect for Windows SDK(K4W)将Kinect的体感操作带到了平常的应用学习中,提供了一种不同于传统的鼠标,键盘及触摸的无接触的交互方式,在某种程度上实现了自然交互界面的理想,即 ...
- [视频],花一分钟来看看Worktile是如何为团队协作而生的
团队协作,我们想的更深.更远.更多,花一分钟来看看我们特别奉献的故事,然后去注册一个账号,邀请小伙伴一起来工作,你会体会Worktile才是真正懂你的协作方式. 我们想做的百年公司还有很多的路,这一站 ...
- css水平居中那点事
昨晚深夜写了css垂直居中那点事,今晚该写他的兄弟篇:css水平居中那点事了..…^^ 其实本来这两个可以连在一起写,可是为了不要搞混,为了让思路更清晰,最后决定还是分开来些比较好...这样以后也有利 ...
- TDR分辨率
在日常的生活工作中,有很多测试测量的工具,比如测量长度的尺子,计量时间的钟表等等,谈到测试测量工具的时候,分辨率是关键指标之一,比如尺子的 分辨率是1mm,时钟的分辨率是秒.所谓分辨率就是测试测量工具 ...
- 我也来说说DDD~大话目录
回到占占推荐博客索引 DDD之前没有接触过,但一但有了接触就一发不可收拾,他会带去进入一个全新的世界! DDD不是新技术,而是新思想,新模式,是软件开发领域的一次突破,它更接近于业务,对于业务的改动它 ...