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. iOS app调试的黑魔法--第三方库

    http://www.cocoachina.com/ios/20140928/9785.html

  2. [转载]Android.mk简介

    2013-12-23 11:26:54 转载自: http://blog.sina.com.cn/s/blog_67d8d7060100q8un.html 请到转载地址阅读原文, 转载以备查询.

  3. 神奇的Noip模拟试题 T3 科技节 位运算

    3 科技节 (scifest.pas/.c/.cpp) [问题描述] 一年一度的科技节即将到来.同学们报名各项活动的名单交到了方克顺校长那,结果校长一看皱了眉头:这帮学生热情竟然如此高涨,每个人都报那 ...

  4. flash 和 第三方程序交互

    一.flash 端 修改 1.flash cs6  修改脚本 为as3 2.修改 按钮 实例 名 (不是sprite列表中的名字  实例名称 和这个名字 是2个) 3.时间轴上 添加代码 当前选择 A ...

  5. vs2012 .netFramwork2.0发布到xp

    开发环境 windows server2008R2 VS2012  .net Framwork2.0 开发的winform程序 在有的xp系统下不能运行 选择 项目属性=>编译 Build=&g ...

  6. Linux访问Windows磁盘实现共享

    业务需求说明:公司在部署hadoop集群和DB server与SAN存储,公司的想法是前端通过DB Server能够将非结构化的数据能放进SAN存储当中,而hadoop集群也能够访问这个SAN存储.因 ...

  7. UVa 11020 Efficient Solutions（平衡二叉树/multiset ）

    题意:有n个人,每个人有x.y两个属性,每次输入一个人(x,y).如果当前不存在一个人(x`,y`)的属性满足x`<=x,y`<y或者x`<x,y`<=y,就说这个人是有优势的 ...

  8. operation not possible due to RF-kill

    使用mdk3时出现这个问题operation not possible due to RF-kill 就是输入第一条命令 后出现 operation not possible due to RF-ki ...

  9. 嵌入dll到rtf文件

    嵌入文件到doc文件中, 打开word--->插入菜单---->对象--->新建---->对象类型----->Package---->弹出创建软件包界面-----& ...

  10. postgreSQL9.1忘记postgres用户密码怎么办

    在网络上找了一篇文章http://www.linuxidc.com/Linux/2010-04/25232.htm,如下: Ubuntu 9.10下PostgreSQL 8.4忘记密码的解决方法 Ub ...