简单实用的纯CSS百分比圆形进度条插件
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百分比圆形进度条插件的更多相关文章
- 纯CSS实现圆形进度条
CSS的优点在于的可以随意组合HTML元素来实现许多中效果,这儿我将使用CSS来实现一个运行进度条,效果如下: 思路是用两个div来作为进度条外观,表示进度的div和外面div宽度和高度保持一致,并是 ...
- 微信小程序纯css制作圆形进度条所遇到的问题
wrapBox:最外层盒子,背景色为进度条的颜色 leftBox/rightBox:半宽等长 左/右浮动的盒子,背景色为灰色 roundMask:居中的盒子 用来遮盖leftBox和rightBox ...
- 超简单:纯CSS实现的进度条
——————纯CSS实现的进度条—————— HTML: <div class="wrapper"> <div class="bar"> ...
- 移动端纯CSS3制作圆形进度条所遇到的问题
近日在开发的页面中,需要制作一个动态的圆形进度条,首先想到的是利用两个矩形,宽等于直径的一半,高等于直径,两个矩形利用浮动贴在一起,设置overflow:hidden属性,作为盒子,内部有一个与其宽高 ...
- 纯CSS3实现圆形进度条动画
悄悄地,GIF 格式的进度条已经越来越少,CSS 进度条如雨后春笋般涌现.今天要介绍的这个 CSS3 进度条,效果和 Flyme OS 4 上的加载动画一样. 首先,来看下最终的效果: 它的 HTML ...
- 一、纯css实现顶部进度条随滚动条滚动
一.效果图 二.直接复制粘贴 <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...
- 纯css实现顶部进度条随滚动条滚动
<!DOCTYPE html> <head> <meta charset="utf-8"> <meta http-equiv=" ...
- [iOS]圆形进度条及计时功能
平时用战网安全令的时候很喜欢圆形倒计时的效果,然后简单看了一下Android的圆形进度条,后来又写了一个IOS的.整体界面参照IOS系统的倒计时功能,顺便熟悉了UIPickerView的一些特性的实现 ...
- Android 自定义view --圆形百分比(进度条)
转载请注明出处:http://blog.csdn.net/wingichoy/article/details/50334595 注:本文由于是在学习过程中写的,存在大量问题(overdraw onDr ...
随机推荐
- POJ 1979 Red and Black dfs 难度:0
http://poj.org/problem?id=1979 #include <cstdio> #include <cstring> using namespace std; ...
- 长理ACM 13-围圈报数(谌海军)
题目标题:围圈报数(谌海军) 题目描述:有n(n<=100)围成一圈,顺序排号(从1排到n).从第一个人开始报数(从1报到m(m<=9)),凡报到m的人退出圈子,问最后留下的是原来第几号的 ...
- POJ 1777 mason素数
题目大意: 给定数列 a1 , a2 , ... , an 希望找到一个 N = sigma(ai^ki) , (0<=ki<10) ,ki可随自己定为什么 只要保证N的因子和可以表示 ...
- oracle安装后登录
运行 sqlplus回车 longon as sysdba回车 回车 这样就可以登录了. SQL>create user username identified by password; SQL ...
- 网易云课堂 OCP
数据库DBA任务: 管理数据库可用性 设计并创建数据库 管理物理结构 管理基于设计的存储 管理安全性 网络管理 备份与恢复 数据库调整与优化 关系型数据库(RDBMS) 多个表数据之间存在着关系 关系 ...
- 高效率JAVA实现斐波那契
import java.util.Scanner;public class Solution { public static int Fibonacci(int n) { int first = 0, ...
- [rfc3261]sip - via header
在很多情况下,sip并非直达目标主机的,而是要经过很多中间节点服务器.在request消息中,via头域表示当前已走过的节点(每经过一个节点,添加一个via头):在response消息中,via头域表 ...
- 完美替换win8.1 x64默认雅黑为宋体方法
由于显示器不好,安装win8.1 x64系统后,系统默认的雅黑字体实在是看不习惯, 时间稍一常眼睛就发累,还是一直用的xp宋体好,于是寻思着能不能将默认雅黑换成宋体. 网上倒是搜出了许多win7的修改 ...
- Swift 实现下拉刷新 JxbRefresh
JxbRefresh 是采用Swift 实现的 iOS 下拉刷新. 正常下拉刷新: 1 2 3 4 5 self.taleView.addPullRefresh({ [weak self] in ...
- c++形参和实参同名时,如何单步执行观察形参的变化。
c++形参和实参同名时,如何单步执行观察形参的变化? 方法:当程序运行到函数中时,添加变量观察即可.