ProgressBar.js – 漂亮的响应式 SVG 进度条
ProgressBar.js 是一个借助动态 SVG 路径的漂亮的,响应式的进度条效果。使用 ProgressBar.js 可以很容易地创建任意形状的进度条。这个 JavaScript 库提供线条,圆形和方形等几个内置的形状,但你可使用 Illustrator 或任何其它的矢量图形编辑器创建自己的进度条效果。
线条进度条:
var line = new ProgressBar.Line('#example-line-container', {
color: '#FCB03C'
}); line.animate(1);
圆形进度条:
var circle = new ProgressBar.Circle('#example-circle-container', {
color: '#FCB03C',
strokeWidth: 2,
fill: '#aaa'
}); circle.animate(1, function() {
circle.animate(0);
})
自定义形状和路径:
var container = document.getElementById('example-custom-container');
container.innerHTML = '<object id="scene" type="image/svg+xml" data="images/moon-scene.svg"></object>'; var scene = document.getElementById('scene');
scene.addEventListener('load', function() {
var path = new ProgressBar.Path(scene.contentDocument.querySelector('#asterism-path'), {
duration: 1000
}); path.animate(1, function() {
path.animate(0);
});
});
本文链接:ProgressBar.js – 漂亮的响应式 SVG 进度条
编译来源:梦想天空 ◆ 关注前端开发技术 ◆ 分享网页设计资源
ProgressBar.js – 漂亮的响应式 SVG 进度条的更多相关文章
- AudioPlayer.js,一个响应式且支持触摸操作的jquery音频插件
AudioPlayer.js是一个响应式.支持触摸操作的HTML5 的音乐播放器.本文是对其官网的说用说明文档得翻译,博主第一次翻译外文.不到之处还请谅解.之处. JS文件地址:http://osva ...
- 【转】【翻译】对响应式SVG的再思考
来源: http://www.w3ctech.com/topic/1555 原文地址:http://www.smashingmagazine.com/2014/03/rethinking-respon ...
- 10个漂亮的响应式的食品 WordPress 美食模板
您是否拥有一个餐厅,酒吧,咖啡馆,小酒馆,比萨饼店?如果答案是肯定的,请确保您在网上也提供服务.为了使您的工作更轻松,我们选择了一些新的和独特的餐厅主题,覆盖了范围很广的食品企业.这些主题提供了很多很 ...
- 【css】25个漂亮的响应式布局的web设计【转】
响应的web设计的做法是提高用户的浏览质量,并在不同设备上能够完美的浏览使用,就像大前端推出的D7主题.看看下面美丽的响应的网站布局,通过本文你会在以后的设计中找到响应的web设计的灵感. 1.Mar ...
- 【译】用 Chart.js 做漂亮的响应式表单
数据包围着我们.虽然搜索引擎和其他应用都对基于文本方式表示的数据偏爱有加,但人们发现可视化是更容易理解的一种方式.今年初,SitePoint 发表了 Aurelio 的文章< Chart.js简 ...
- CSS3 圆形时钟式网页进度条
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- HTML+JS实现视频上传显示进度条
示例代码: css部分: #content{border: 1px solid saddlebrown;padding: 16px;border-radius: 2px} .list {top: 15 ...
- js 文件异步上传 显示进度条 显示上传速度 预览文件
通常文件异步提交有几个关键 1.支持拖拽放入文件.2.限制文件格式.3.预览图片文件.4.上传进度,速度等,上传途中取消上传.5.数据与文件同时上传 现在开始笔记: 需要一个最基础的元素<inp ...
- 【原生JS】制作网页头部刷新进度条
之前的某次番啬看到油管上有这么一个进度条,当时觉得挺好玩,一直想着做一个试试,刚才弄了一下写了一个不算太好看的简陋版本,哈哈. (本博客刷新会头部会出现,因为并没有真正的参与到浏览器加载是否完整这个渲 ...
随机推荐
- 大型.NET商业软件代码保护技术 技术与实践相结合保护辛苦创造的劳动成果
列举工作以来遇到的各种类型的软件所采用的代码保护技术,只讲原理不涉及技术细节实现,以避免产生法律问题.有些朋友说直接把代码放在Github开源下载,开源可以促进技术交流与进步,然而值钱的代码都积压在硬 ...
- 关于Git和Github你不知道的十件事
Git 和 GitHub都是非常强大的工具.即使你已经使用他们很长时间,你也很有可能不知道每个细节.我整理了Git和GitHub可能提高日常效率的10个常用技巧. GitHub 快捷键: t 和 w ...
- 【WP开发】如何处理溢出的文本
本文内容适用于Runtime App框架 在用户界面上显示文本,用得严重多的是TextBlock,凡是轻量级的东西都会很常用,TextBlock对于显示简单.少量的文本内容相当适合,不过,在我们考虑要 ...
- vc操作windows防火墙的方法
收藏该地址,以备不时之需. http://msdn.microsoft.com/en-us/library/aa364726.aspx
- 如何用Python实现目录遍历
1. 基本实现 [root@localhost ~]# cat dirfile.py import os path='/tmp' for dirpath,dirnames,filenames in o ...
- 机器学习&数据挖掘笔记_13(用htk完成简单的孤立词识别)
最近在看图模型中著名的HMM算法,对应的一些理论公式也能看懂个大概,就是不太明白怎样在一个具体的机器学习问题(比如分类,回归)中使用HMM,特别是一些有关状态变量.观察变量和实际问题中变量的对应关系, ...
- Testing - 质量保证与质量控制
QA QC QM 概念 Quality Assurance (质量保证) Quality Control (质量控制) Quality Manage (质量管理) 定义 为达到质量要求所采取的作业技术 ...
- Windows Azure Cloud Service (42) 使用Azure In-Role Cache缓存(1)Co-located Role
<Windows Azure Platform 系列文章目录> Update 2016-01-12 https://azure.microsoft.com/zh-cn/documentat ...
- Azure Automation (2) 定期删除存储账号中的文件
<Windows Azure Platform 系列文章目录> 本文介绍的是国内由世纪互联运维的Azure China. 本文是对笔者之前的文档Azure Backup (1) 将SQL ...
- 也说说TIME_WAIT状态
也说说TIME_WAIT状态 一个朋友问到,自己用go写了一个简单的HTTP服务端程序,为什么压测的时候服务端会出现一段时间的TIME_WAIT超高的情况,导致压测的效果不好呢? 记得老王有两篇文章专 ...