圆环进度css

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

参考：

代码：

<!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的更多相关文章

两种CSS3圆环进度条详解
晚上睡觉之前,我抽了1个多小时,研究了一下圆环进度条,结合从网上查阅的资料,我终于掌握了两种圆环的生成方法. 这次的效果就是单纯的CSS3效果,也没有写具体的JS,等以后有时间在好好整理一下吧~. 第 ...
canvas圆环进度
CSS: <div class="circle"> <p><span id="loadedNum">0</span&g ...
Vue/React圆环进度条
数据展示,一直是各行各业乐此不疲的需求,具体到前端开发行业,则是各种各种图表数据展示,各种表格数据展示,烦不胜烦(繁不胜繁)! 前几天刚做了折线图.柱状图.饼状图之类的图表数据展示效果,今天又碰到了类 ...
svg实现圆环进度条
开源实现:https://github.com/lugolabs/circles 自行实现:圆环与svg画布间剩的空间太多. <!DOCTYPE html> <html> &l ...
css3 制作圆环进度条
引子移动端做一个 loadiing 加载的图标,跟以往沿用的都不太一样,是一个圆环进度条,圆环进度条也就罢了,还得能用百分比控制. CSS3 实现圆环 demo 刚开始写这个圆环的时候是参照帖子上给 ...
CSS3实现圆环进度条
摘要:圆环进度条被应用于各个场景,比如我们可以用来表示加载进度等.通常我们可以用 css3 的动画去实现. 详解 css3 实现圆环进度条简单的画一个圆环,我们都知道如何使用 css 画一个圆环.( ...
canvas绘制百分比圆环进度条
开发项目,PM会跟踪项目进度:完成某个事情,也可以设置一个完成的进度. 这里用canvas绘制一个简单百分比圆环进度条. 看下效果: 1. 动画方式 2. 静默方式 // 贴上代码,仅供参考 ...
android 圆环进度view
新建RoundProgressBar class RoundProgressBar : View { private val paint = Paint() var max = 100 //最大进度 ...
浅谈一下关于使用css3来制作圆环进度条
最近PC端项目要做一个这样的页面出来,其他的都很简单,关键在于百分比的圆环效果.我最初打算是直接使用canvas来实现的,因为canvas实现一个圆是很简便的. 下面贴出canvas实现圆环的代码,有 ...

随机推荐

Python垃圾回收机制:gc模块
在Python中,为了解决内存泄露问题,采用了对象引用计数,并基于引用计数实现自动垃圾回收. 由于Python 有了自动垃圾回收功能,就造成了不少初学者误认为不必再受内存泄漏的骚扰了.但如果仔细查看一 ...
python 2.7.5升级到3.4.x
wget https://www.python.org/ftp/python/3.4.3/Python-3.4.3.tgz .tgz cd Python-/ Python ./configure ma ...
多媒体基础知识之YUV数据
1.什么是YUV格式 YUV,是一种颜色编码方法.Y表示明亮度(Luminance.Luma),也就是灰度值.U和V则是色度.浓度(Chrominance.Chroma),作用是描述影像色彩及饱和度, ...
springboot启动过程（1）-初始化
1 springboot启动时,只需要调用一个类前面加了@SpringBootApplication的main函数,执行SpringApplication.run(DemoApplication. ...
Border Layout
------------------siwuxie095 根面板 contentPane 的默认布局就是 Border Layout B ...
Linux-shell获取天气
用Linux中的shell获取天气,本来觉的比较难,原来,真简单,个位数的代码就搞定. 获取对应城市天气所有天气信息都从中国天气网获取.每一个城市多会对应一个id(比如,北京为101010100,因 ...
遗传算法介绍并附上Matlab代码
摘自http://www.cnblogs.com/hxsyl/p/5240905.html 1.遗传算法介绍遗传算法,模拟达尔文进化论的自然选择和遗产学机理的生物进化构成的计算模型,一种不断选择优良 ...
Java50道经典习题-程序38 求字符串长度
题目:写一个函数,求一个字符串的长度,在main函数中输入字符串,并输出其长度. import java.util.Scanner; public class Prog38 { public stat ...
.NET 生成生成缩略图
/// <summary> /// 生成缩略图 /// </summary> /// <param name="FromImagePath">源 ...
重新排序文本文件(txt)里面的内容
近段时间,Insus.NET学习练习物件与对象,怎样创建实际环境中的对象.对读取文本文件以及分析文本文件作为目标.因此搜索论坛一些例子,就如下面这题,实现的方法分享给大家. 以文本行作为一个对象,所以 ...

圆环进度css

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

随机推荐

热门专题