专栏首页蚂蚁开源社区简单实用的纯CSS百分比圆形进度条代码解析/源码下载

简单实用的纯CSS百分比圆形进度条代码解析/源码下载

简要教程

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

使用方法

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

<link rel="stylesheet" href="css/percircle.css" /> <script src="js/jquery.min.js"></script> <script src="js/percircle.js"></script>

HTML结构

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

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

<div id="bluecircle" class="c100 p50 big"> <span>50%</span> <div class="slice"> <div class="bar"></div> <div class="fill"></div> </div> </div>

下面是默认的65%的橙色圆形进度条的HTML结构:

<div id="orangecircle" class="c100 p65 orange"> <span>65%</span> <div class="slice"> <div class="bar"></div> <div class="fill"></div> </div> </div>

下面是小型的粉红色圆形进度条的HTML结构:

<div id="pinkcircle" class="c100 p82 small pink"> <span>82%</span> <div class="slice"> <div class="bar"></div> <div class="fill"></div> </div> </div>

↓↓

本文分享自微信公众号 - 蚂蚁开源社区(mayi_zzfriend),作者:思齐大神

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-11-12

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 工作实战案例,瀑布流布局实现(方法:CSS3,原生JS,jQuery)。

    用户5997198
  • 基于CSS3技术,炫酷3D立方体预加载loading特效

    这是一款css3炫酷3D立方体预加载loading特效。该特效通过简单的HTML元素和CSS3代码,构建几个立方体不停运动的动画特效,适用于做页面的loadin...

    用户5997198
  • 【开源游戏/节日】蛋旦很疯狂(新年/元旦专用)

    用户5997198
  • 无缝滚动案例简单实现代码

    <!doctype html> <html> <meta charset="utf-8"> <head> <title></title> <st...

    用户1730674
  • 如何清除浮动

    如何清除浮动 大家都知道,浮动会对文档产生影响,具体来看看会对文档产生什么影响? 清除浮动后的效果: ? 未清除浮动后的效果: ? 实例代码(未清除浮动): ...

    HTML5学堂
  • 零基础html5+div+css+js网页开发教程第006期 网页快速开发技巧

    上一节,我们学习了hbuilder的快速开发工具的简单实用,本机额,我们来介绍这个工具相关的快速开发技巧。

    刘金玉编程
  • vue弹出层 +内容手风琴 简单实现

    yangdongnan
  • 前端-part8-jQurey操作样式一:获取标签属性+修改标签属性

    少年包青菜
  • flex 布局

    CSS3 为我们提供了一种可伸缩的灵活的 web 页面布局方式 flexbox 布局,它具有很强大的功能,可以很轻松实现很多复杂布局。可以简便、完整、响应式地实...

    Krry
  • 原生JS实现拖拽鼠标绘画

    越陌度阡

扫码关注云+社区

领取腾讯云代金券