<!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. JS 数字相加出现多个小数的问题

    今天在页面上用到了js进行小数相加119.01+0.01,结果大家都知道应该是:119.02的,然而结果是119..0200000…. ,莫名其妙的,还以为是我写的程序有问题,后来查了下才知道这是ja ...

  2. 如何:创建返回 UI 的外接程序

    https://msdn.microsoft.com/zh-cn/library/bb909849(v=vs.100).aspx

  3. netty5服务端检测心跳超时断连

    客户端每5秒发送一次心跳给服务端,服务端记录最后一次心跳时间,通过定时任务每10秒检测一下,如果当前时间与最后一次收到的心跳时间之差超过某个阈值,断开与客户端的连接.基于之前的例子(netty5心跳与 ...

  4. 算法习题---5-1代码对齐(UVa1593)

    一:题目 将不规范的若干行代码进行对齐.对齐按照最长字符串进行操作.见样例输入 (一)样例输入 ␣␣start:␣␣integer;␣␣␣␣//␣begins␣here stop:␣integer;␣ ...

  5. 【FreeMarker】FreeMarker使用(三)

    搭建一个 1.FreeMarker取值 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&quo ...

  6. 用KNN实现iris的4分类问题&测试精度

    import matplotlib.pyplot as plt from scipy import sparse import numpy as np import matplotlib as mt ...

  7. Laya的位图文字

    参考: Laya文本 测试版本:Laya 2.1.1.1 大部分游戏都会用到位图文字,例如dnf的伤害数字. 白鹭的位图文字是美术提供0-9十张单张图片,由TextureMerger导出fnt+jso ...

  8. Win10下载安装PostgreSQL 11.1

    下载地址:https://get.enterprisedb.com/postgresql/postgresql-11.1-1-windows-x64.exe Installation Director ...

  9. 00点睛Spring4.1-环境搭建

    转载:https://www.iteye.com/blog/wiselyman-2210250 0.1 前置条件 Spring 4.1提倡基于Java Config和注解的配置,所以本教程通篇不会采用 ...

  10. BASH输出着色显示

    通过将其输出着色,可以使BASH脚本更漂亮.使用ANSI转义序列设置文本属性,例如前景色和背景色. 使用以下模板格式来编写彩色文本: echo -e "\e[前景色值;背景色值;2m文本\e ...