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. 小记：利用递归调用循环寻找MP3文件的方法。

    private void findMp3Data(File mp3file) { File[] filelist = mp3file.listFiles(); if (filelist != null ...

  2. 把Angular中的$http变成jQuery.ajax()一样，可以让后台(php)轻松接收到参数

    最近接到一个手机项目,我决定用ionic + php + mysql来实现.ionic是一个前端框架,主要用于手机端,它融合了html5.css3.angularJS于一体,用起来很顺手. 开始构建项 ...

  3. 求x^0+x^1+x^2+.......x^n mod p； x，n，p<=10^9

    方法一:快速幂.但是肯定还是超时. 方法二:利用等比数列公式,但是有除法,做不下去了. 方法三:有点分治的味道.. n为偶数时,x^0+x^1+x^2+.......x^n=(x^0+x^1+x^2+ ...

  4. SPOJ COT2 树上找路径上不同值的个数

    题目大意 给出多个询问u , v , 求出u-v路径上点权值不同的个数 开始做的是COT1,用主席树写过了,理解起来不难 很高兴的跑去做第二道,完全跟普通数组区间求k个不同有很大区别,完全没思路 膜拜 ...

  5. 站在K2角度审视流程--任务的独占与释放

    应用场景一:某件事情由A.B两人(或者更多人)完成,任务开始后,两人随时可以处理任务,只需有一人处理完成,此事情即可结束. 应用场景二:某件事情由A.B两人(或者更多人)完成,任务开始后,两人随时可以 ...

  6. 多功能节点连线绘图控件Nevron Diagram for .NET使用方法及下载地址

    Nevron Diagram for .NET是一个功能强大,世界上顶级的.NET图表控件.可扩展的图形报表构架,可以帮您创建功能丰富的Winforms及Webforms图表解决方案.这个产品构建于N ...

  7. win10系统的点评

    Windows 10 是美国微软公司所研发的新一代跨平台及设备应用的操作系统.在正式版本发布一年内,所有符合条件的Windows7.Windows 8.1的用户都将可以免费升级到Windows 10, ...

  8. SQL中 char、varchar、text 和 nchar、nvarchar、ntext的区别

    1.char.char存储定长数据很方便,char字段上的索引效率级高,比如定义char(10),那么不论你存储的数据是否达到了10个字节,都要占去10个字节的空间.             2.va ...

  9. [Unity3D]调用Android接口

    简介 有一些手机功能,Unity没有提供相应的接口,例如震动,例如不锁屏,例如GPS,例如... 有太多的特殊功能Unity都没有提供接口,这时候,我们就需要通过使用Android原生的ADT编辑器去 ...

  10. Windows Server 2012 R2 设置

    一.任务栏左下角启动服务器管理器,然后进行设置.1.登录不显示服务器管理器 2.本地服务器,看到右边的IE增强的安全配置,如图所示,关闭两项内容.这样就关闭了IE增强安全提示框. 3.“工具”菜单,启 ...