查看: 37759|回复: 523

[UI界面设计] 简单实用的纯CSS百分比圆形进度条源码!

  [复制链接]
发表于 2015-2-18 17:13:00 | 显示全部楼层 |阅读模式
  简要教程

  percircle是一款简单实用的纯CSS百分比圆形进度条插件。你不需要做任何设置,只需要按该圆形进度条插件提供的标准HTML结构来编写代码,就可以生成一个漂亮的百分比圆形进度条。

简单实用的纯CSS百分比圆形进度条

简单实用的纯CSS百分比圆形进度条


  使用方法

  使用该幻灯片插件需要在页面中引入jQuery和percircle.css以及percircle.js文件。

  1. <link rel="stylesheet" href="css/percircle.css" />
  2. <script src="js/jquery.min.js"></script>
  3. <script src="js/percircle.js"></sc
复制代码
  HTML结构

  使用该圆形进度条插件需要注意的是每一个圆形进度条容器元素的ID都以circle结尾。

  下面是50%的蓝色大圆形进度条的HTML结构:

11.jpg


  1. <div id="bluecircle" class="c100 p50 big">
  2.     <span>50%</span>
  3.     <div class="slice">
  4.         <div class="bar"></div>
  5.         <div class="fill"></div>
  6.     </div>
  7. </div>   
复制代码
下面是默认的65%的橙色圆形进度条的HTML结构:

22.jpg


  1. <div id="orangecircle" class="c100 p65 orange">
  2.     <span>65%</span>
  3.     <div class="slice">
  4.         <div class="bar"></div>
  5.         <div class="fill"></div>
  6.     </div>
  7. </div>  
复制代码
下面是小型的粉红色圆形进度条的HTML结构:

33.jpg


  1. <div id="pinkcircle" class="c100 p82 small pink">
  2.     <span>82%</span>
  3.     <div class="slice">
  4.         <div class="bar"></div>
  5.         <div class="fill"></div>
  6.     </div>
  7. </div>      
复制代码

游客,如果您要查看本帖隐藏内容请回复


点评

非常好的资源,太有用了  发表于 2017-4-19 09:35
回复

使用道具 举报

发表于 2015-12-1 23:32:45 | 显示全部楼层
不错的支持一下!
回复 支持 反对

使用道具 举报

发表于 2015-12-10 15:49:46 | 显示全部楼层
正在找这个,多谢楼主分享
回复 支持 反对

使用道具 举报

发表于 2015-12-11 11:43:31 | 显示全部楼层
谢谢分享,正在找这个
回复 支持 反对

使用道具 举报

发表于 2015-12-12 16:40:54 | 显示全部楼层
dg哥哥哥哥哥哥哥代购
回复 支持 反对

使用道具 举报

发表于 2015-12-13 20:26:56 | 显示全部楼层
够实用  楼主有心了
回复 支持 反对

使用道具 举报

发表于 2015-12-16 23:11:58 | 显示全部楼层
谢谢分享,正在找这个
回复 支持 反对

使用道具 举报

发表于 2015-12-22 16:51:08 | 显示全部楼层
谢谢分享,正在找这个
回复 支持 反对

使用道具 举报

发表于 2015-12-23 10:55:00 | 显示全部楼层
厉害厉害,学习一下
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

关闭

网站推荐上一条 /1 下一条

关注蚂蚁HTML5社区官方微信
关注蚂蚁HTML5社区官方微信

邮箱:[email protected] QQ:791577401 木子牛HTML5工作室 版权所有

© 2014-2018 MUZINIU Inc.小黑屋|手机版|Archiver|HANGNIU  

Powered by MuZiNiuX3.2( 豫ICP备12017936号 )

 豫公网安备 41078102000103号

快速回复 返回顶部 返回列表