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. “Unable to execute dex: Multiple dex files”如何解决？

    遇到报错: [2014-02-13 17:27:03 - Dex Loader] Unable to execute dex: Multiple dex files define Lcom/kkdia ...

  2. 如何禁止在DBGRID末位自动添加一行记录

    http://www.tc5u.com/cpp/xg-1730729.htm 用DBGridEh吧,只要设置属性alopAppendEh为false即可 最简单将DBGrid的option属性中goE ...

  3. 浏览器Firefox新标签页默认打开地址设置

    1.地址栏输入about:config 2.找到browser.newtab.url 修改它的值为你想要的地址,如:https://www.baidu.com

  4. UVA 10970-Big Chocolate

    题目: 给你一块M*N的巧克力,问把它切成最小单元需要最少切几刀,分开的就不能一起切了. 分析: 每次切割只能多产生一个部分,分成M*N个部分,必然要切M*N-1刀. 一个长为m宽为n的长方形和m*n ...

  5. ODI 12.1.3发布，提升支持大数据的能力

    此次发布的ODI新版本,目的是更好的支持当前市场上的大数据平台. 大数据基因在不改变ODI工作效率的情况下,ODI增加了越来越多的数据源集成能力.ODI是在Oracle平台上标准的E-LT工具,事实上 ...

  6. Connection to http://www.google.com:80 refused

    使用SDK Manager更新时出现问题 Failed to fetch URL https://dl-ssl.google.com/android/repository/repository-6.x ...

  7. leetcode 233 Number of Digit One

    这题属于需要找规律的题.先想一下最简单的情形:N = 10^n - 1 记X[i]表示从1到10^i - 1中 1 的个数,则有如下递推公式:X[i] = 10 * X[i - 1] + 10^(i ...

  8. Oracle 获取用户表的字段定义

    获取用户表列表: select * from user_tables; select * from all_tables; select * from dba_tables; 获取表的字段: sele ...

  9. HDU 圆桌会议 - 数学题

    圆桌   题意就是每分钟可以将相邻的两个人的位置互换一下 , 问你 ,几分钟可以将所有人的位置互换成    原先的  B 在A的右边 C在A的左边 , 换成现在的 C 在A 的右边 , B 在 A 的 ...

  10. Net作业调度-----Quartz.Net

    一:业务需求: 项目需要在不同时刻,执行一个或很多个不同的作业. Windows执行计划这时并不能很好的满足需求了,迫切需要一个更为强大,方便管理,集群部署的作业调度框架. 二:介绍 Quartz一个 ...