简单的jquery进度条插件LineProgressbar.js,myProgress.js
参考 http://www.lanrenzhijia.com/jquery/4121.html
<script src="js/jquery.lineProgressbar.js" type="text/javascript"></script> $(function(){
$('#progressbar1').LineProgressbar({
percentage: 50
});
$('#progressbar2').LineProgressbar({
percentage: 25,
fillBackgroundColor: '#1abc9c'
});
$('#progressbar3').LineProgressbar({
percentage: 61,
fillBackgroundColor: '#e67e22',
height: '35px'
});
$('#progressbar4').LineProgressbar({
percentage: 78,
fillBackgroundColor: '#f1c40f',
height: '65px',
radius: '50px'
});
})
在页面中引入jquery.lineProgressbar.css和jquery.lineProgressbar.js文件.
1
2
|
< link rel = "stylesheet" href = "path/to/jquery.lineProgressbar.css" > < script src = "path/to/js/circleMagic.js" ></ script > |
使用一个<div>作为进度条的容器。
1
|
< div id = "progressbar1" ></ div > |
在页面DOM元素加载完毕之后,通过下LineProgressbar()方法来初始化该jquery进度条插件。
1
|
$( '#progressbar1' ).LineProgressbar(); |
LineProgressbar.js进度条插件的可用配置参数有:
参数
定义进度条的宽度。
类型 | 默认值 | 描述 | |
percentage | int | null | 定义进度条的百分比数。 |
ShowProgressCount | boolean | true | 定义是否显示百分比数值。 |
duration | int | 1000 | 定义进度条动画的速度。默认为1000毫秒。可以使用整数值孟获关键字:slow或fast。 |
fillBackgroundColor | string | '#3498db' | 定义进度条的背景填充色。 |
backgroundColor | string | '#EEEEEE' | 定义进度条的背景色。 |
radius | string | '0px' | 定义进度条的圆角。 |
height | string | '10px' | 定义进度条的高度。 |
width | string | '100%' |
=====================================================
基于jQuery实现的myProgress.js加载loading动画效果
参考 :http://www.lanrenzhijia.com/jquery/3303.html
$("#div1").myProgress({speed: 1000, percent: 30, width: "100px", height: "10px"});
$("#div2").myProgress({speed: 500, percent: 100});
$("#div3").myProgress({speed: 4000, percent: 50,width: "500px"});
$("#div4").myProgress({speed: 1000, percent: 1});
简单的jquery进度条插件LineProgressbar.js,myProgress.js的更多相关文章
- 简单实用的进度条加载组件loader.js
本文提供一个简单的方法实现一个流程的进度条加载效果,以便在页面中可以通过它来更好地反馈耗时任务的完成进度.要实现这个功能,首先要考虑怎样实现一个静态的进度条效果,类似下面这样的: 这个倒是比较简单,两 ...
- 基于Jquery的进度条插件(实用)
Spin.js 最喜欢这款插件了,动画图片的长度.粗细.速度和角度都可以灵活控制,想要做成什么样都可以. 源码下载 在线演示 Percentage Loader 一款轻量的 jQuery 进 ...
- 超酷jQuery进度条加载动画集合
在丰富多彩的网页世界中,进度条加载动画的形式非常多样,有利用gif图片实现的loading动画,也有利用jQuery和CSS3实现的进度加载动画,本文主要向大家介绍很多jQuery和CSS3实现的进度 ...
- 简单实用的纯CSS百分比圆形进度条插件
percircle是一款简单实用的纯CSS百分比圆形进度条插件.你不需要做任何设置,只需要按该圆形进度条插件提供的标准HTML结构来编写代码,就可以生成一个漂亮的百分比圆形进度条. 首先要做的就是引入 ...
- 30款基于 jQuery & CSS3 的加载动画和进度条插件
我们所生活每一天看到的新技术或新设计潮流的兴起,Web 开发正处在上升的时代.HTML5 & CSS3 技术的发展让 Web 端可以实现的功能越来越强大. 加载动画和进度条使网站更具吸引力.该 ...
- YprogressBar,html5进度条样式,js进度条插件
简介 YprogressBar是一款基于HTML5的进度条插件. YprogressBar是一款轻量级进度条插件,使用方便,资源占用少,模仿好压的解压界面,带有数字显示,同时支持在描述中增加参数,以动 ...
- JQuery中简约的进度条插件推荐
JQuery Progress Bar是基于JQuery开发的进度条插件,秉承了JQuery的简约哲学.不仅容易使用,而且可以轻松定制外观.对于使用了JQuery框架的项目来说,需要使用进度条控件时这 ...
- HTML5圆形百分比进度条插件circleChart
在页面中引入jquery和circleChart.min.js文件. <script src="path/to/jquery.min.js"></script&g ...
- 一个Notification 进度条插件(android,NJS实现,直接就可使用)
参考文章:http://ask.dcloud.net.cn/article/503 源码地址下载 如题,分享一个Notification 进度条插件(android,用js调用原生api实现,直接就可 ...
随机推荐
- VS.左侧_蓝黄绿_竖线
1.vs2013中,写代码中,旁边会出现蓝色或者黄色的线,请问是什么意思?求大神告知_百度知道.html(https://zhidao.baidu.com/question/1862841692529 ...
- 最新 同程java校招面经 (含整理过的面试题大全)
从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.同程等10家互联网公司的校招Offer,因为某些自身原因最终选择了同程.6.7月主要是做系统复习.项目复盘.LeetCode ...
- linux中高级信号函数sigaction和sigqueue实例
/************************************************************************* > File Name: sigquque. ...
- bootstrap基础学习【网格系统】(三)
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- redis同步到磁盘
- mui横向滑动菜单
<style> .mui-bar a { color: #E02D26; } #topItem { background: white; border-bottom: 1px solid ...
- ubuntu/debian将sh改为bash
1. 查看现在环境 可以看到,现在的默认环境是sh.我们想把它变为bash,可以这样做: 2. 运行sudo dpkg-reconfigure dash,出现以下画面: 这里提示我们是否要用默认的s ...
- 在UPW中使用VLC解码媒体
VLC支持的格式很全,学会如何使用后,完全可以自己给自己写一个简单的万能播放器了. 源码来自github:https://github.com/kakone/VLC.MediaElement.git( ...
- mysql导入数据报错:Incorrect datetime value
incorrect datetime value 报错信息如下图: 意思很明显是说,'0000-00-00 00:00:00'不是一个有效的日期类型的值 解决办法: sql_mode 中删除 NO_Z ...
- java知识随笔整理-数据库的临时表
1.创建临时表的方法 方法一.select * into #临时表名 from 你的表; 方法二. create table #临时表名(字段1 约束条件,字段2 约束条件,.....)create ...