<!DOCTYPE html>

<html>

<head>

    <meta charset="{CHARSET}">

    <title>利用 clip-path 实现环形进度条</title>

    <style type="text/css">

        *{margin:0;padding:0;}

        #circle,.test1{

            width:200px;

            height:200px;

            border-radius:50%;

        }

        #circle{

            background-color:#ccc;

            text-align:center;

            position:relative;

            left:50px;

            top:50px;

        }

        .test2{

            background-color:blue;

            /*position: absolute;*/

            /*clip: rect(0px,200px,200px,100px);*/

            /*-webkit-clip-path:polygon(50% 50%,50% 0%,100% 0%,100% 100%,0% 100%,0% 0%,30% 0%);*/

        }

        .circle-ban{

            width:170px;

            height:170px;

            border-radius:50%;

            background-color:white;

            position:absolute;

            top:15px;

            left:15px;

        }

        .circle-ban p{margin-top:76px;}

    </style>

</head>

<body>

    <div id="circle">

        <div class="test1"></div>

        <div class="circle-ban">

            <p><span class="mask">0</span>%</p>

        </div>

    </div>

    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>

    <script type="text/javascript">

        function press(r){

            /* 百分比与角度的关系

             * 100%对应360度->1%=3.6deg

             * 角度与周长的关系

             * 360度对应长度为800->0.45deg=1px

             * 百分比与周长的关系

             * 100%对应周长800->0.125%=1px

             * ----->1%=8px

             * 45deg=100px(角度对应的周长)=50%(clip-path中的百分比)

             * ------->100%(百分比值)=400%(clip-path中的百分比)

             */

            var r=r*4;

            var div=$(".test1");

            div.addClass("test2");

            var k1="polygon(50% 50%,50% 0%,";

            var k2=k1+"100% 0%,";

            var k3=k2+"100% 100%,";

            var k4=k3+"0% 100%,";

            var k5=k4+"0% 0%,";

            if(r<=50){

                r+=50;

                div.css({"-webkit-clip-path":k1+r+"% 0%)"});

            }else if((r>50)&&(r<=150)){

                r-=50;

                div.css({"-webkit-clip-path":k2+"100% "+r+"%)"});

            }else if((r>150)&&(r<=250)){

                r=250-r;

                div.css({"-webkit-clip-path":k3+r+"% 100%)"});

            }else if((r>250)&&(r<=350)){

                r=350-r;

                div.css({"-webkit-clip-path":k4+"0% "+r+"%)"});

            }else if((r>350)&&(r<=400)){

                r-=350;

                div.css({"-webkit-clip-path":k5+r+"% 0%)"});

            }

        }

        var n=0;

        var timer=setInterval((function(){

            n++;

            if(n==100){clearInterval(timer);timer=null;}

            $(".mask").text(n);

            press(n);

        }),100);

    </script>

</body>

</html>

div实现圆环进度条的更多相关文章

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

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

  2. Vue/React圆环进度条

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

  3. css3 制作圆环进度条

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

  4. CSS3实现圆环进度条

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

  5. 用Raphael在网页中画圆环进度条

    原文 :http://boytnt.blog.51cto.com/966121/1074215 条状的进度条我们见得太多了,实现起来比较简单,它总是长方形的,在方形的区域里摆 放就不太好看了.随着cs ...

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

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

  7. svg实现圆环进度条

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

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

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

  9. H5 可堆叠的圆环进度条，支持任意数量子进度条

    by Conmajia SN: S22-W1M 由来 看到一篇帖子<vue实用组件--圆环百分比进度条>,让我想起了很多年前我在WinForm下仿制过的Chrome进度条. ▲ 原版进度条 ...

随机推荐

  1. realsense SDK编译 release

    1>------ 已启动生成: 项目: ZERO_CHECK, 配置: Release x64 ------1> Checking Build System1> CMake does ...

  2. Mysql关键字之Group By(二)

    原文地址,优先更新https://hhe0.github.io 我们在上一节简单介绍了Mysql中group by关键字的用法,没有看过的同学点击这里了解一下; 文中提到的courses表和相关记录可 ...

  3. 转 ORA-13541: system moving window baseline size (691200) greater than retention (432000)

    修改awr生成报告时间间隔和保存时间时报错,由默认的每小时生成,保存8天修改为每半个小时生成一次,保存5天: SQL> exec dbms_workload_repository.modify_ ...

  4. spring 多个切面如何有序执行

    Spring也能支持多个切面.当有多个切面时,它不会存在任何顺序,这些顺序代码会随机生成,但是有时候我们希望它按照指定的顺序运行. 在此之前要先定义一个切点方法,为此新建一个接口——MultiBean ...

  5. 动态调用webservice时 ServiceDescriptionImporter类在vs2010无法引用的解决方法 （转）

    本文转自:http://blog.csdn.net/limlimlim/article/details/8647038 [导读]ServiceDescriptionImporter是创建Web Ser ...

  6. 最新CSS兼容方案

    CSS兼容方案,让你的样式完美兼容各大浏览器,这个方案主要是用来解决Safari的,Opear是在测试的时候顺带试了一下,结果发现竟然也行,所以顺便也解决了. .e {/*FF OP*/ color: ...

  7. CSS3 column 分栏

     column的布局形式还没有使用过,后续的bug和解决方案有待检验. column column-count:number: 设置内容分为多少栏显示 column-width:长度单位:设置每一栏的 ...

  8. 17点睛Spring4.1-@Conditional

    17.1 @Conditional @Conditional为按照条件配置spring的bean提供了支持,即满足某种条件下,怎么配置对应的bean; 应用场景 当某一个jar包在classpath中 ...

  9. PMP备考笔记--1.1

    题型 200道中英文单选题 基本概念题(%10) 过程工具/技术和输入输出题ITTO (%10) 情景题(%70) 计算题(3-5道题) 图 pmp四大挑战 试卷100页,题干长,阅读量大,考试4个小 ...

  10. Linux文件误删恢复

    一.需求研究 分析对比debugfs.testdisk 6.14.extundelete,对比各自官网介绍和操作说明本次决定研究extundelete对文件和目录的恢复操作. 二.项目内容 1.工具安 ...