简单实用的纯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 条评论
登录 后参与评论

相关文章

来自专栏渗透云笔记

路径常用函数(第十章)

getatime(file)与getctime(file)和getmtime(file)

5310
来自专栏前端迷

JavaScript继承背后的场景-prototype,__proto__, [[prototype]]

每个对象都可以有另一个对象作为其原型。然后前一个对象继承了它的所有原型属性。对象通过内部属性[[Prototype]]指定其原型。由[[Prototype]]属...

4510
来自专栏前端迷

领域驱动设计在前端中的应用

在开始本篇文章前,我给读者们分享一个很考验人性的有趣现象,在公司洗手间的洗漱台旁边,放置了一个垃圾桶,每次我洗完手,用纸巾擦干手后,将其扔进垃圾桶,但是偶尔扔不...

30420
来自专栏渗透云笔记

python基础之深浅copy

首先在了解python中的深浅拷贝之前,我们先花一点时间来了解一下python内存中变量的存储情况。对于python而言,变量的存储采用了引用语义的方式,存储的...

7710
来自专栏pangguoming

vuex里mapState,mapGetters使用详解

3. 在 src 目录下创建 store.js 文件,并在 main.js 文件中导入并配置

73120
来自专栏小陈学Python

Python3.7安装pyspider

pyspider是国人binux编写的强大的网络爬虫框架,它带有强大的WebUI、脚本编辑器、任务监控器、项目管理器以及结果处理器,同时支持多种数据库后端、多种...

7310
来自专栏有三AI

【TensorFlow2.0】数据读取与使用方式

大家好,这是专栏《TensorFlow2.0》的第三篇文章,讲述如何使用TensorFlow2.0读取和使用自己的数据集。

1K20
来自专栏磐创AI技术团队的专栏

NLPer入门指南 | 完美第一步

你对互联网上的大量文本数据着迷吗?你是否正在寻找处理这些文本数据的方法,但不确定从哪里开始?毕竟,机器识别的是数字,而不是我们语言中的字母。在机器学习中,这可能...

18530
来自专栏一Li小麦

​eggjs实战

swagger会扫描配置的API文档格式自动生成一份json数据,而swagger官方也提供了ui来做通常的展示,当然也支持自定义ui的。不过对后端开发者来说,...

53020
来自专栏科技分享

公钥,私钥和数字签名这样最好理解 (转载)

一、公钥加密 假设一下,我找了两个数字,一个是1,一个是2。我喜欢2这个数字,就保留起来,不告诉你们(私钥),然后我告诉大家,1是我的公钥。

11420

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励