进度条插件使用demo
1、下载地址:
http://down.htmleaf.com/1502/201502031710.zip
2、效果图:
3、HTML代码:其中80设置当前所占百分比,即蓝色部分比例;注意引入必须的js文件
<div class="pro-bar-container">
<div class="pro-bar" data-pro-bar-percent="80"></div>
</div> <script src="../js/jquery-1.11.1.min.js"></script>
<script src="http://cdn.bootcss.com/jqueryui/1.11.0/jquery-ui.min.js"></script>
<script src="../js/appear.min.js"></script>
<script src="../js/pro-bars.min.js"></script>
4、CSS代码:
.pro-bar-container{
background: #d5d5d5; //设置进度条背景颜色
width: 160px; //设置整个进度条宽度
border-radius: 20px; //设置进度条边角弧度
} .pro-bar{
background: #38ADFF; //设置进度条颜色
height: 10px; //设置进度条高度
border-radius: 20px;
}
上述例子为插件其中一种样式candy stripes removed的demo,详细样式参见:http://www.htmleaf.com/Demo/201502031322.html
进度条插件使用demo的更多相关文章
- YprogressBar,html5进度条样式,js进度条插件
简介 YprogressBar是一款基于HTML5的进度条插件. YprogressBar是一款轻量级进度条插件,使用方便,资源占用少,模仿好压的解压界面,带有数字显示,同时支持在描述中增加参数,以动 ...
- 30款基于 jQuery & CSS3 的加载动画和进度条插件
我们所生活每一天看到的新技术或新设计潮流的兴起,Web 开发正处在上升的时代.HTML5 & CSS3 技术的发展让 Web 端可以实现的功能越来越强大. 加载动画和进度条使网站更具吸引力.该 ...
- 简单的jquery进度条插件LineProgressbar.js,myProgress.js
参考 http://www.lanrenzhijia.com/jquery/4121.html demo下载 <script src="js/jquery.lineProgress ...
- 简单实用的纯CSS百分比圆形进度条插件
percircle是一款简单实用的纯CSS百分比圆形进度条插件.你不需要做任何设置,只需要按该圆形进度条插件提供的标准HTML结构来编写代码,就可以生成一个漂亮的百分比圆形进度条. 首先要做的就是引入 ...
- 一个Notification 进度条插件(android,NJS实现,直接就可使用)
参考文章:http://ask.dcloud.net.cn/article/503 源码地址下载 如题,分享一个Notification 进度条插件(android,用js调用原生api实现,直接就可 ...
- JQuery中简约的进度条插件推荐
JQuery Progress Bar是基于JQuery开发的进度条插件,秉承了JQuery的简约哲学.不仅容易使用,而且可以轻松定制外观.对于使用了JQuery框架的项目来说,需要使用进度条控件时这 ...
- 基于Jquery的进度条插件(实用)
Spin.js 最喜欢这款插件了,动画图片的长度.粗细.速度和角度都可以灵活控制,想要做成什么样都可以. 源码下载 在线演示 Percentage Loader 一款轻量的 jQuery 进 ...
- HTML5圆形百分比进度条插件circleChart
在页面中引入jquery和circleChart.min.js文件. <script src="path/to/jquery.min.js"></script&g ...
- vue2-loading-bar 一款基于Vue2的进度条插件
自学了N久vue,奈何没有练手项目,终于决心拿个东西来试试手.基于对音乐的热爱,选择的第一个demo是音乐播放器.一般播放器都有进度条,于是无意间找到这个插件,就是vue2-loading-bar,这 ...
随机推荐
- HDOJ-2153
仙人球的残影 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Subm ...
- PCL推荐的命名规范(1)
博客转载自:http://www.pclcn.org/study/shownews.php?lang=cn&id=209 文件命名 所有的文件名单词之间应该用下划线隔开,例 如unordere ...
- 《SpringBoot揭秘 快速构建微服务体系》读后感(一)
SpringIOC IOC有两种方式:一种是DI,另一种是DL,即Dependency Lookup(依赖查找).前者是当前软件实体被动接受其依赖的其他组件被IoC容器注入,而后者则是当前软件实体主动 ...
- 5. 通过PHP反序列化进行远程代码执行
php序列化与反序列化 最近准备复现一下ecshop2.x,3.x的注入漏洞,其中涉及到了php反序列化的问题,由于之前太小白 ,导致粗心大意,所以此对php反序列化漏洞进行更详细的分析. 提起php ...
- 1. md5 collision(50)
md5 collision(50) ------南京邮电大学ctf: http://chinalover.sinaapp.com/web19/ 发现了一串代码 <?php $md51 ...
- Django 的 路由系统
Django 的路由系统 URL 配置(URLconf)就像Django 锁支撑网站的目录. 它的本质就是URL 与要为该URL 调用的视图函数之间的映射表. 你就是以这种方式告诉Django, 对于 ...
- HDU - 6112 2017百度之星初赛A 今夕何夕
今夕何夕 Accepts: 1345 Submissions: 5533 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/ ...
- 如何升级一个JavaWeb应用
准备db变更 准备整个war包或变更的文件 上传文件至云盘(通常直接上传文件较慢,建议先传到云盘,然后下载) 从云盘下载 执行db变更 解压war到指定目录或替换变更的文件 修改设计IP地址的配置文 ...
- Jsoncpp写“鱘”的json数据,报错。
最近在用Json::FastWriter生成json数据时,发现一个问题.含有“鱘”字的json字段会多出一个斜杠,不知道是不是编码的问题. C++要使用JSON来解析数据,一般采用jsoncpp. ...
- jzoj6005. 【PKUWC2019模拟2019.1.17】数学 (生成函数+FFT+抽代+高精)
题面 题解 幸好咱不是在晚上做的否则咱就不用睡觉了--都什么年代了居然还会出高精的题-- 先考虑如果暴力怎么做,令\(G(x)\)为\(F(n,k)\)的生成函数,那么不难发现\[G^R(x)=\pr ...