今天我们分享一个超酷的使用HTML5画布技术开发的进度条插件 - percentageloader。这个插件比普通的水平进度条使用更加炫酷的效果,图形效果类似以前我们介绍的jQuery knob插件 ,这个插件使用快捷简单,可以非常好的应用到现代浏览器中。插件使用了HTML5的画布来生成图形界面,压缩版本只有10kb大小,并且使用矢量Vector而非图片来生成,可以很方便的生成不同大小的图形。开源软件,大家可以方便自由的使用。

主要特性

jQuery1.4+

支持浏览器:Firefox 3.0+, Safari 4.0+, Chrome 7+, IE9+, Opera 9+

提供各种控制选项

使用简单方便,压缩文件非常小, 10kb

无损失的支持各种大小尺寸的图形

如何使用

倒入相关类库及其CSS:

插件js代码:

$loader  = $("#loader").percentageLoader({

width : 400,

height : 400,

progress : 0

});

主要选项

progress:初始加载位置(0-1)

value:初始的label值

width:宽度

height:高度

controllable:允许用户点击设置值

onProgressUpdate(value):提供了一个callback方法,允许使用更新的值来控制进度条

回调函数使用:

varloader;

loader = $("myDiv").percentageLoader({

controllable :true,

onProgressUpdate :function(value) {

loader.setProgress(value * 100.0);

}

});

是不是很简单,希望大家能够喜欢这个插件!

jq画布插件_超炫HTML 5开发的jQuery进度条插件相关推荐

  1. jQuery进度条插件JQMeter的简单使用

    jQMeter是一款简单使用的轻量级进度条jQuery插件 效果图:该效果时设置了进度条宽度,高度,动画时间,计数时间,宽度,高度 使用过程 1.需要引入的js文件 基于jQuery的:<scr ...

  2. java 输入框插件_[Java教程][英] 推荐 15 个 jQuery 选择框插件

    [Java教程][英] 推荐 15 个 jQuery 选择框插件 0 2015-07-23 15:00:06 jQuery Selectbox Plugins let you create beaut ...

  3. jQuery进度条插件rangeSlider,带刻度,rangeSlider实现进度范围选择案例

    使用方法: 1.引入css <link rel="stylesheet" href="../../resources/js/plugins/ion.rangeSli ...

  4. 8款效果精美的 jQuery 加载动画和进度条插件

    加载动画和进度条在网站和 Web 应用中的使用非常流行.虽然网速越来越快,但是我们的网站越来越复杂,同时用户对网站的使用体验的要求也越来越高.在内容加载缓慢的时候,使用时尚的加载动画和进度条告诉用户还 ...

  5. php进度条插件,分享8款优秀的 jQuery 加载动画和进度条插件_jquery

    加载动画和进度条在网站和 Web 应用中的使用非常流行.虽然网速越来越快,但是我们的网站越来越复杂,同时用户对网站的使用体验的要求也越来越高.在内容加载缓慢的时候,使用时尚的加载动画和进度条告诉用户还 ...

  6. 超酷jQuery进度条加载动画集合

    在丰富多彩的网页世界中,进度条加载动画的形式非常多样,有利用gif图片实现的loading动画,也有利用jQuery和CSS3实现的进度加载动画,本文主要向大家介绍很多jQuery和CSS3实现的进度 ...

  7. 04.tooltip提示框插件,linkbutton按钮插件与progressbar进度条插件

    tooltip提示框插件 1 渲染方式 2 属性 3 事件 4 方法 linkbutton按钮插件 21 渲染方式 22 属性 23 方法 progressbar进度条插件 1 渲染方式 2 属性 3 ...

  8. 前端实现炫酷进度条插件

    最近做到一个下载和导入的进度条效果,所以做了一个小插件,自己记录一下,然后分享一下 1.先看实现的效果 2.看实现的代码,样式的话我是根据UI出的图搞得,可以自行更改 <template> ...

  9. get几个小技能:轮播图插件、进度条插件、筛选过滤插件

    最近参加了一个网页设计大赛,趁这个机会做了一个个人简历的网页:点击欣赏 用到了许多有趣的东西们今天分享一下. 轮播图插件 Swiper轮播图插件 Swiper 的结构和基础原理 Swiper 的每个展 ...

最新文章

  1. 移动互联网时代之用户名和密码何去何从(1)
  2. 网站在改版时如何降低对排名的影响呢?
  3. 定义一个数组返回最大子数组的值(1)
  4. 注入工具的原理和开发
  5. 前端(六)——CSS之浮动和定位
  6. mysql 从库 read only_mysql salve从库设置read only 属性
  7. linux 从github拉取更新_关于拉取请求
  8. scala的map映射问题
  9. LineBasedFrameDecoder 行解码器,回车换行符解决 TCP 粘包
  10. Java 测试 - 单元测试用例自动生成框架 EvoSuite
  11. Android Toast的时长
  12. 国外博士论文下载网址
  13. 51单片机实战教程之C语言基础(十 Keil C51函数库)
  14. 中兴路由器,交换机DHCP原理,dhcp配置,实例
  15. iOS10访问通讯录、相册等隐私权限设置
  16. 带符号整数的除法与余数
  17. dockermount与volume的区别
  18. ^(?:([^,]*),?){1} 的含义
  19. 10亿级订单系统分库分表设计思路
  20. 容器深入研究(1):完整的容器分类法、填充容器(上)

热门文章

  1. 一致性协议raft详解(一):raft整体介绍
  2. ThreadPoolExecutor机制
  3. git 裁切_Vue + ccropper.js裁切图片(vue-cropper)
  4. charles 手机抓包设置
  5. LinkedIn的使用开源项目
  6. spark-on-yarn日志配置
  7. AlphaGo:人工智能与深度学习
  8. 【三种解法】剑指 Offer 06. 从尾到头打印链表【附完整可运行代码】
  9. 列出连通集 (25 分)【DFS与BFS模板】
  10. 数据库原理与应用(SQL Server)笔记 第四章 嵌套查询和其他查询子句