percircle是一款简单实用的纯CSS百分比圆形进度条插件。你不需要做任何设置，只需要按该圆形进度条插件提供的标准HTML结构来编写代码，就可以生成一个漂亮的百分比圆形进度条。

首先要做的就是引入：使用该幻灯片插件需要在页面中引入jQuery和percircle.css以及percircle.js文件。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <link rel="stylesheet" href="css/percircle.css" />

        <script src="js/jquery-2.1.1.min.js"></script>

        <script src="js/percircle.js"></script>

    </head>

    <body>

        <div id="bluecircle" class="c100 p90 big">

            <span>90%</span>

            <div class="slice">

                <div class="bar"></div>

                <div class="fill"></div>

            </div>

        </div>

        <div id="orangecircle" class="c100 p100 orange">

    <span>100%</span>

    <div class="slice">

        <div class="bar"></div>

        <div class="fill"></div>

    </div>

    </div>

    </body>

</html>

其中百分比是根据p90 这个修改 的，只需要需改p90就可以跟着修改样式 让图形百分比进行变化

另外有：基于SVG的扁平风格圆形进度条插件 地址http://www.htmleaf.com/html5/SVG/201508172426.html

简单实用的纯CSS百分比圆形进度条插件的更多相关文章

  1. 纯CSS实现圆形进度条

    CSS的优点在于的可以随意组合HTML元素来实现许多中效果,这儿我将使用CSS来实现一个运行进度条,效果如下: 思路是用两个div来作为进度条外观,表示进度的div和外面div宽度和高度保持一致,并是 ...

  2. 微信小程序纯css制作圆形进度条所遇到的问题

    wrapBox:最外层盒子,背景色为进度条的颜色 leftBox/rightBox:半宽等长 左/右浮动的盒子,背景色为灰色 roundMask:居中的盒子 用来遮盖leftBox和rightBox ...

  3. 超简单：纯CSS实现的进度条

    ——————纯CSS实现的进度条—————— HTML: <div class="wrapper"> <div class="bar"> ...

  4. 移动端纯CSS3制作圆形进度条所遇到的问题

    近日在开发的页面中,需要制作一个动态的圆形进度条,首先想到的是利用两个矩形,宽等于直径的一半,高等于直径,两个矩形利用浮动贴在一起,设置overflow:hidden属性,作为盒子,内部有一个与其宽高 ...

  5. 纯CSS3实现圆形进度条动画

    悄悄地,GIF 格式的进度条已经越来越少,CSS 进度条如雨后春笋般涌现.今天要介绍的这个 CSS3 进度条,效果和 Flyme OS 4 上的加载动画一样. 首先,来看下最终的效果: 它的 HTML ...

  6. 一、纯css实现顶部进度条随滚动条滚动

    一.效果图 二.直接复制粘贴 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  7. 纯css实现顶部进度条随滚动条滚动

    <!DOCTYPE html> <head> <meta charset="utf-8"> <meta http-equiv=" ...

  8. [iOS]圆形进度条及计时功能

    平时用战网安全令的时候很喜欢圆形倒计时的效果,然后简单看了一下Android的圆形进度条,后来又写了一个IOS的.整体界面参照IOS系统的倒计时功能,顺便熟悉了UIPickerView的一些特性的实现 ...

  9. Android 自定义view --圆形百分比（进度条）

    转载请注明出处:http://blog.csdn.net/wingichoy/article/details/50334595 注:本文由于是在学习过程中写的,存在大量问题(overdraw onDr ...

随机推荐

  1. Android——关于Activity跳转的返回（无返回值和有返回值）——有返回值

    说明: 跳转页面,并将第一页的Edittext输入的数据通过按钮Button传到第二页用Edittext显示,点击第二页的 返回按钮Button返回第一页(改变第二页的Edittext的内容会传至第一 ...

  2. 二模 （6） day2

    第一题: 题目大意:50*50的格子里玩贪吃蛇.给出N步扭头的操作,判断贪吃蛇会在第几步挂掉.(蛇初始向东) 解题过程: 1.一开始的方法是:为了加快速度,只保存头和尾的坐标,然后保存尾巴的方向,每次 ...

  3. 2.4.2电子书fb.c文件

    显示层面头文件 定义结构体,为显示统一标准 int (*DeviceInit)(void); 显示类驱动初始化 int (*ShowPixel)(int iPenX, int iPenY, unsig ...

  4. encodeURI

    encodeURI("http://www.cnblogs.com/season-huang/some other thing"); //整个URL进行编码"http:/ ...

  5. Android 获取网络状态

    1.检测网络是否可用 public boolean isNetWorkConnected() { ConnectivityManager cm = (ConnectivityManager)getSy ...

  6. Android google map 两点之间的距离

    在Android google map中,有时候会碰到计算两地的距离,下面的辅助类就可以帮助你计算距离: public class DistanceHelper { /** Names for the ...

  7. Linux文件管理系统

    首先了解一般linux文件系统的构成. */usr/bin./bin : 存放所有用户可以执行的命令 */usr/sbin ./sbin :存放只有root可以执行的命令 */home : 用户缺省宿 ...

  8. 静态方法被override

    其实这并不是真正意义上的java override,因为如果在子类的方法上面加上@override编译不通过 而且如果使用父类引用指向子类实例,那么调用被改写的子类和父类都有的静态方法,执行的还是父类 ...

  9. 2013年9月份第1周51Aspx源码发布详情

    大型B2B家具门户网源码  2013-9-6 [VS2008]功能描述: 1.门户信息管理 安全取数据即使数据库连接中断不会报错 2.稳定性 每句代码经过3次以上检查.此网站还在运营3年了,没有出过问 ...

  10. SVG 2D入门9 - 蒙板

    SVG支持的蒙板 SVG支持多种蒙板特效,使用这些特性,我们可以做出很多很炫的效果.至于中文中把mask叫做"蒙板"还是"遮罩"就不去区分了,这里都叫做蒙板吧. ...