看效果先：http://sandbox.runjs.cn/show/b6bmksvn

参考：

jquery圆环百分比进度条制作

CSS clip:rect矩形剪裁功能及一些应用介绍

CSS clip:rect几个值含义示意实例页面

clip:rect下png通道透明下sprite图片定位实例页面

clip:rect图片剪裁效果预览实例页面

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

        * {

            margin: 0;

            padding: 0;

        }

        .clip-wrap {

            position: absolute;

            top: 0;

            left: 0;

            right: 0;

            bottom: 0;

            margin: auto;

            width: 400px;

            height:400px;

            background-color: #ffb348;

            border-radius: 50%;

        }

        .clip-wrap .left,.clip-wrap .right {

            position: absolute;

            top:0;

            left:0;

            width: 100%;

            height:100%;

            background-color: #cccccc;

            border-radius: 50%;

            -webkit-transition: all 0.5s linear;

        }

        .clip-wrap .left {

            clip: rect(0 ,200px,400px,0);

        }

        .clip-wrap .right {

            clip: rect(0 ,400px,400px,200px);

        }

        .mask {

            position: absolute;

            top:50%;

            left:50%;

            margin-left: -180px;

            margin-top: -180px;

            width:360px;

            height:360px;

            background-color: #fff;

            border-radius: 50%;

            line-height: 360px;

            text-align: center;

            font-size: 100px;

            color: #ff9f40;

        }

        .left-wrap {

            position: absolute;

            top:0;

            left:0;

            width: 100%;

            height:100%;

            clip: rect(0 ,200px,400px,0);

        }

        .right-wrap {

            position: absolute;

            top:0;

            left:0;

            width: 100%;

            height:100%;

            clip: rect(0 ,400px,400px,200px);

        }

    </style>

</head>

<body>

    <div class="clip-wrap">

        <div class="left-wrap">

            <div class="left"></div>

        </div>

        <div class="right-wrap">

            <div class="right"></div>

        </div>

        <div class="mask">

            <span class="num">0</span>%

        </div>

    </div>

    <button>0%</button>

    <button>10%</button>

    <button>30%</button>

    <button>50%</button>

    <button>80%</button>

    <button>100%</button>

</body>

<script>

    function changeView(num) {

        var deg = num * 3.6;   // 把360度分成100份

        document.querySelector('.num').textContent = num;

        if(deg<180) {

            document.querySelector('.left').style.webkitTransform = 'rotate('+(0)+'deg)';

            document.querySelector('.right').style.webkitTransform = 'rotate('+deg+'deg)';

        }else {

            document.querySelector('.right').style.webkitTransform = 'rotate('+180+'deg)';

            document.querySelector('.left').style.webkitTransform = 'rotate('+(deg-180)+'deg)';

        }

    }

    var btn = document.querySelectorAll('button');

    for(var i = 0,len = btn.length; i< len; i++) {

        (function(i) {

            btn[i].onclick = function() {

                var num = parseInt(this.textContent);

                changeView(num);

            }

        })(i)

    }

</script>

</html>

圆环进度css的更多相关文章

  1. 两种CSS3圆环进度条详解

    晚上睡觉之前,我抽了1个多小时,研究了一下圆环进度条,结合从网上查阅的资料,我终于掌握了两种圆环的生成方法. 这次的效果就是单纯的CSS3效果,也没有写具体的JS,等以后有时间在好好整理一下吧~. 第 ...

  2. canvas圆环进度

    CSS: <div class="circle"> <p><span id="loadedNum">0</span&g ...

  3. Vue/React圆环进度条

    数据展示,一直是各行各业乐此不疲的需求,具体到前端开发行业,则是各种各种图表数据展示,各种表格数据展示,烦不胜烦(繁不胜繁)! 前几天刚做了折线图.柱状图.饼状图之类的图表数据展示效果,今天又碰到了类 ...

  4. svg实现圆环进度条

    开源实现:https://github.com/lugolabs/circles 自行实现:圆环与svg画布间剩的空间太多. <!DOCTYPE html> <html> &l ...

  5. css3 制作圆环进度条

    引子 移动端做一个 loadiing 加载的图标,跟以往沿用的都不太一样,是一个圆环进度条,圆环进度条也就罢了,还得能用百分比控制. CSS3 实现圆环 demo 刚开始写这个圆环的时候是参照帖子上给 ...

  6. CSS3实现圆环进度条

    摘要:圆环进度条被应用于各个场景,比如我们可以用来表示加载进度等.通常我们可以用 css3 的动画去实现. 详解 css3 实现圆环进度条 简单的画一个圆环,我们都知道如何使用 css 画一个圆环.( ...

  7. canvas绘制百分比圆环进度条

    开发项目,PM会跟踪项目进度:完成某个事情,也可以设置一个完成的进度. 这里用canvas绘制一个简单百分比圆环进度条. 看下效果: 1. 动画方式   2. 静默方式   // 贴上代码,仅供参考 ...

  8. android 圆环进度view

    新建RoundProgressBar class RoundProgressBar : View { private val paint = Paint() var max = 100 //最大进度 ...

  9. 浅谈一下关于使用css3来制作圆环进度条

    最近PC端项目要做一个这样的页面出来,其他的都很简单,关键在于百分比的圆环效果.我最初打算是直接使用canvas来实现的,因为canvas实现一个圆是很简便的. 下面贴出canvas实现圆环的代码,有 ...

随机推荐

  1. 一个hitbernate配置文件，带几个表(注意mapping)；如果连接字符串没有设置utf-8，向insert mysql 会产生乱码(utf8 或 utf-8)

    <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE hibernate-configuratio ...

  2. [CSS Hack]解決IE6、IE7、IE8、Firefox的瀏覽器相容性問題！

    每次調CSS最令人頭痛的就是瀏覽器校正問題,因為每個瀏覽器對CSS的解釋都不太一樣,Firefox本身算是比較照規矩來,處理上比較簡單,但是遇到微軟的IE系列頭就大了,雖然都是IE,但是IE6.IE7 ...

  3. eclipse 中使用 GreenUML 和 AmasterasUML 自动生成类图

    Green UML和AmaterasUML 两种 一.安装方法: 1.都是先安装GEF 通过eclipse-> install new software安装GEF的网址: http://down ...

  4. LinkedHashMap和HashMap的区别

    一.问题描述: 前几天写webservices接口,需要同步人力资源,涉及到添加顺序:主账号需要添加在次账号之前,直接上级需要添加在下级之前.解析xml之后直接封装在HashMap中,导致取对象时顺序 ...

  5. [poj2318]TOYS(直线与点的位置关系)

    解题关键:计算几何入门题,通过叉积判断. 两个向量的关系: P*Q>0,Q在P的逆时针方向: P*Q<0,Q在P的顺时针方向: P*Q==0,Q与P共线. 实际就是用右手定则判断的. #i ...

  6. springmvc 注解扫描失败的可能原因

    情况是这样的:web工程采用了ssm框架,dao和service都是通过annotation方式注入的,工程运行正常.后来把service和dao打成jar放在工程的lib目录下,问题来了,配置没改动 ...

  7. HDU 6396(2018多校第七场1011) Swordsman

    场上场下各种TLE到怀疑人生...经过大佬指点之后才知道要用fread才能过,一般的快读不行... 题意:一个剑客打小怪兽,有n头小怪兽,剑客和小怪兽有m个属性.只有剑客的m个属性都大于等于某个小怪兽 ...

  8. str_place()替换函数

    str_replace() 函数使用一个字符串替换字符串中的另一些字符. 注释:该函数对大小写敏感.请使用 str_ireplace() 执行对大小写不敏感的搜索. echo str_replace( ...

  9. UITextField的文本框部分文本以*的方式来显示

    #import "AppDelegate.h" @interface AppDelegate ()<UITextFieldDelegate>// 添加代理协议 @end ...

  10. GTK编程

    一.简介 GTK(GIMP Toolkit)是一套跨多种平台的图形工具包,按LGPL许可协议发布的.虽然最初是为GIMP写的,但早已发展为一个功能强大.设计灵活的通用图形库.特别是被GNOME选中使得 ...