简单实用的纯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

上一篇:使用backbone的history管理SPA应用的url


下一篇:HashMap原理阅读