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:0;}
     <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)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏lzj_learn_note

Android ImageSpan与TextView同一行图片居中

在开发中常常会遇到标签(图片)+文字的需求,实现方式一般采用SpannableString的方式来实现。 这时候会遇到图片ImageSpan没有办法居中的问题。...

2532
来自专栏前端知识分享

第103天:CSS3中Flex布局(伸缩布局)详解

Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。

921
来自专栏糊一笑

深入常用CSS声明(一) —— Background

一直对一些自己常用的css声明掌握得不是很全,只知道常用的一些属性和值,但是对于其他的用法确实一知半解,这篇文章旨在扫盲,先不说有多深的理解,至少做到能够看到这...

4155
来自专栏我和未来有约会

分析Silverlight Button控件布局

分析Silverlight Button控件布局 答:关于按钮自适应 Silverlight也算一个比较开放的技术。Button控件其实也是一些标准的Grid...

3775
来自专栏WebDeveloper

如何让超出块级元素的内容使用省略号代替?

1246
来自专栏老马寒门IT

Html5 学习系列(五)Canvas绘图API快速入门(2)

Canvas绘图API Demos 上一篇文章中,笔者已经给大家演示了怎么快速用Canvas的API绘制一个矩形出来。接下里我会在本文中给各位介绍Canvas的...

2648
来自专栏柠檬先生

css3 UI 修饰——回顾

1.box-shadow 属性向框添加一个或者多个阴影。   语法: box-shadow: h-shadow v-shadow blur spread col...

2039
来自专栏林德熙的博客

WPF 等距布局

实际做的效果很简单,因为在开发我容易就用到了等距的控件。等距控件就是在指定的宽度下,平均把控件放在水平的地方,这样相等于 StackPanel 的水平,但是没有...

801
来自专栏cnblogs

深入理解和应用display属性(二)

四、inline-block 此类元素是inline + block的合体 1) margin和padding都有效;width和height都有效; .inl...

2156
来自专栏前端知识分享

第167天:canvas绘制柱状图

2153

扫码关注云+社区

领取腾讯云代金券