ProgressBar.js 是一个借助动态 SVG 路径的漂亮的,响应式的进度条效果。使用 ProgressBar.js 可以很容易地创建任意形状的进度条。这个 JavaScript 库提供线条,圆形和方形等几个内置的形状,但你可使用 Illustrator 或任何其它的矢量图形编辑器创建自己的进度条效果。

在线演示      插件下载

线条进度条:

  1. var line = new ProgressBar.Line('#example-line-container', {
  2. color: '#FCB03C'
  3. });
  4.  
  5. line.animate(1);

圆形进度条:

  1. var circle = new ProgressBar.Circle('#example-circle-container', {
  2. color: '#FCB03C',
  3. strokeWidth: 2,
  4. fill: '#aaa'
  5. });
  6.  
  7. circle.animate(1, function() {
  8. circle.animate(0);
  9. })

自定义形状和路径:

  1. var container = document.getElementById('example-custom-container');
  2. container.innerHTML = '<object id="scene" type="image/svg+xml" data="images/moon-scene.svg"></object>';
  3.  
  4. var scene = document.getElementById('scene');
  5. scene.addEventListener('load', function() {
  6. var path = new ProgressBar.Path(scene.contentDocument.querySelector('#asterism-path'), {
  7. duration: 1000
  8. });
  9.  
  10. path.animate(1, function() {
  11. path.animate(0);
  12. });
  13. });

  

您可能感兴趣的相关文章

本文链接:ProgressBar.js – 漂亮的响应式 SVG 进度条

编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源

ProgressBar.js – 漂亮的响应式 SVG 进度条的更多相关文章

  1. AudioPlayer.js,一个响应式且支持触摸操作的jquery音频插件

    AudioPlayer.js是一个响应式.支持触摸操作的HTML5 的音乐播放器.本文是对其官网的说用说明文档得翻译,博主第一次翻译外文.不到之处还请谅解.之处. JS文件地址:http://osva ...

  2. 【转】【翻译】对响应式SVG的再思考

    来源: http://www.w3ctech.com/topic/1555 原文地址:http://www.smashingmagazine.com/2014/03/rethinking-respon ...

  3. 10个漂亮的响应式的食品 WordPress 美食模板

    您是否拥有一个餐厅,酒吧,咖啡馆,小酒馆,比萨饼店?如果答案是肯定的,请确保您在网上也提供服务.为了使您的工作更轻松,我们选择了一些新的和独特的餐厅主题,覆盖了范围很广的食品企业.这些主题提供了很多很 ...

  4. 【css】25个漂亮的响应式布局的web设计【转】

    响应的web设计的做法是提高用户的浏览质量,并在不同设备上能够完美的浏览使用,就像大前端推出的D7主题.看看下面美丽的响应的网站布局,通过本文你会在以后的设计中找到响应的web设计的灵感. 1.Mar ...

  5. 【译】用 Chart.js 做漂亮的响应式表单

    数据包围着我们.虽然搜索引擎和其他应用都对基于文本方式表示的数据偏爱有加,但人们发现可视化是更容易理解的一种方式.今年初,SitePoint 发表了 Aurelio 的文章< Chart.js简 ...

  6. CSS3 圆形时钟式网页进度条

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. HTML+JS实现视频上传显示进度条

    示例代码: css部分: #content{border: 1px solid saddlebrown;padding: 16px;border-radius: 2px} .list {top: 15 ...

  8. js 文件异步上传 显示进度条 显示上传速度 预览文件

    通常文件异步提交有几个关键 1.支持拖拽放入文件.2.限制文件格式.3.预览图片文件.4.上传进度,速度等,上传途中取消上传.5.数据与文件同时上传 现在开始笔记: 需要一个最基础的元素<inp ...

  9. 【原生JS】制作网页头部刷新进度条

    之前的某次番啬看到油管上有这么一个进度条,当时觉得挺好玩,一直想着做一个试试,刚才弄了一下写了一个不算太好看的简陋版本,哈哈. (本博客刷新会头部会出现,因为并没有真正的参与到浏览器加载是否完整这个渲 ...

随机推荐

  1. java中同步嵌套引起的死锁事例代码

    /* 目的:自己写一个由于同步嵌套引起的死锁! 思路:多个线程在执行时,某一时刻,0-Thread绑定了LockA锁,1-Thread绑定了LockB锁! 当0-Thread要去绑定LockB锁时 和 ...

  2. JS魔法堂:剖析源码理解Promises/A规范

    一.前言 Promises/A是由CommonJS组织制定的异步模式编程规范,有不少库已根据该规范及后来经改进的Promises/A+规范提供了实现 如Q, Bluebird, when, rsvp. ...

  3. Windows Azure HandBook (9) Azure性能测试(2)

    <Windows Azure Platform 系列文章目录> 在上一节中,笔者介绍了我们在Azure性能测试之前,首先需要提交<渗透性测试表> Windows Azure H ...

  4. java并发编程(4)--线程池的使用

    转载:http://www.cnblogs.com/dolphin0520/p/3932921.html 一. java中的ThreadPoolExecutor类 java.util.concurre ...

  5. 文本框只读属性,disabled不能提交

    设置文本框和文本域只读的时候用到disabled="disabled",结果后台获取不到,后来想起这个不会提交,应该用readonly

  6. C#实现通用数据过滤窗体

    最近一直在做WINFORM项目,所以经常有些新的想法或尝试与大家分享,之前与大家分享了通用窗体遮罩层.通用可附加数据绑定的DataGridView.窗体渐显,今天来分享一个大家在其它软件中常见的功能: ...

  7. js jquery 异常

    1.0 TypeError: $(...).carousel is not a function原因:可能是没有引用或者引用了多个jquery:<script src="~/js/jq ...

  8. C#微信公众平台开发—高级群发接口

    涉及access_token的获取请参考<C#微信公众平台开发—access_token的获取存储与更新> 一.为了实现高级群发功能,需要解决的问题 1.通过微信接口上传图文消息素材时,J ...

  9. .net的垃圾回收机制简述

    .如何理解.net中的垃圾回收机制. .NET Framework 的垃圾回收器管理应用程序的内存分配和释放.每次您使用 new 运算符创建对象时,运行库都从托管堆为该对象分配内存.只要托管堆中有地址 ...

  10. Ext.NET 4.1 系统框架的搭建(后台) 附源码

    Ext.NET 4.1 系统框架的搭建(后台) 附源码 代码运行环境:.net 4.5  VS2013 (代码可直接编译运行) 预览图: 分析图: 上面系统的构建包括三块区域:North.West和C ...