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. 水水更健康~~~~~~~~~~~~~~~AutoRun免疫的原理

    免疫AutoRun病毒的原理建立在一个无法删除的AutoRun.inf文件夹,以防止病毒生成用来运行的AutoRun.inf文件 打开命令提示符 输入: 1.cd \2.mkdir autorun.i ...

  2. 安装Adobe Dreamweaver CS6 免序列号 官方破解版

    Adobe Dreamweaver CS6 免序列号 官方破解版 Adobe Dreamweaver CS6是世界顶级软件厂商Adobe推出的一套可视化的网页开发工具,Dreamweaver CS6最 ...

  3. Oracle中any和all的区别用法

    对于any,all的用法,书中说的比较绕口,难以理解,如果通过举例就会比较清晰. any的例子: select * from t_hq_ryxx where gongz > any (selec ...

  4. android自定义控件实例(Linearlayout组合TextView和ImageView)

    2013-12-18 11:25:22 转载自: http://www.open-open.com/lib/view/open1328836804515.html 很多时候android常用的控件不能 ...

  5. 使用OCI向Oracle插入Geometry数据

    使用C/C++操作Oracle数据库,使用OCI可谓是最强大,当然也是最难的方式.Oracle是一个功能复杂而强大的数据库,它可以很好的支持空间数据(Oracle spatial).如何使用OCI向O ...

  6. OpenLayers简单介绍以及简单实例

    OpenLayers是一个强大的JavaScript包,可以从它的官网免费下载.OpenLayers包含了很多强大的网页地图展示与操作功能,并且能够将不同源的图层展示在同一张地图中,支持各种第三方的地 ...

  7. matlab：clear，close，clc

    clear 删除工作空间中的项目,释放系统内存 语法: clear clear name clear name1 name2 name3... clear global name clear -reg ...

  8. char、nvarchar和varchar区别

    这3种字符串数据类型是我们使用最多的,我们在数据库设计时到底该怎么使用了?首先我们先来分析3个数据类型的说明: 1.char CHAR的长度是固定的,最长2000个字符. 2.varchar 和 va ...

  9. 创建一个Windows窗体

    20140702加: WS_OVERLAPPEDWINDOW这个属性如果写成WS_OVERLAPPED,则窗口没有最大最小按钮以及左边的系统的菜单. vs2010下的代码提示快捷键:CTRL + J ...

  10. 让一个小Div（子）在大Div（父）中垂直水平都居中

    方法1: .parent {          width:800px;          height:500px;          border:2px solid #000;          ...