看效果先：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. javascript——对象的基础知识

    一.javascript作为脚本语言可以完成以下任务: 操纵浏览器对象,如窗口的打开与关闭: 操纵Dom树: 通过XMLHttpRequest对象与服务器端进行异步通信: XML编程,借助于Activ ...

  2. C语言学习笔记--多维数组和多维指针

    1. 指向指针的指针 (1)指针的本质是变量,会占用一定的内存空间 (2)可以定义指针的指针来保存指针变量的地址值 (3)指针是个变量,同样也存在传值调用与传址调用 重置动态空间的大小 #includ ...

  3. bitcode编译错误

    xcode编译引用的静态库可能会出现编译错误: does not contain bitcode. You must rebuild it with bitcode enabled (Xcode se ...

  4. OpenCV笔记 1

    Structure  Contains  Represents CvPoint int x, y  Point in image CvPoint2D32f float x, y  Points in ...

  5. [patl1-046]整除光棍

    解题关键:模拟除法 #include<cstdio> #include<cstring> #include<algorithm> #include<cstdl ...

  6. ES6中的Set与Map数据结构

    本文实例讲述了ES6学习笔记之Set和Map数据结构.分享给大家供大家参考,具体如下: 一.Set ES6提供了新的数据结构Set.类似于数组,只不过其成员值都是唯一的,没有重复的值. Set本身是一 ...

  7. gitlab 添加ssh秘钥

    在创建新的ssh秘钥对之前,要先确认一下电脑中是否已经有了一对秘钥: Git Bash on Windows / GNU/Linux / macOS / PowerShell: cat ~/.ssh/ ...

  8. Opengl创建机器人手臂代码示例

    /*******************************************************robot.cpp*基于opengl的机械手臂示例代码*s:机械臂逆时针旋转*S:机械臂 ...

  9. vue 之 let 和const

    浏览目录 let const let es6新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. 上面代码在代码块之中,分别用let和var声明了 ...

  10. netty中的位操作

    看了PoolChunk源码,好多位操作,对这些位操作理解不到位,看起来很是吃力,不知道为什么要这么做,可能是性能更好 1:大小为2 的冥的数加1 怎么操作 size^1; 2: <=比较   m ...