Codrops 发布了一个如何创建一个基于弹性效果的 SVG 加载进度条教程，基于 SVG 和 TweenMax 实现。按钮开始的时候是一个带有箭头的图标，一旦它被点击，动画成一个有趣的小金属丝和一个标签，该标签指示下载百分比。如果你想使用这部分代码在你的项目，到 Github 页面并按照说明进行操作即可。

在线演示      源码下载

　

您可能感兴趣的相关文章

本文链接：灵感来自 Dribbble 下载按钮 SVG 弹性动画进度条

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

类似 Dribbble 下载按钮的 SVG 弹性动画进度条的更多相关文章

  1. iOS之小功能模块--彩虹动画进度条学习和自主封装改进

    前言: 首先展示一下这个iOS小示例的彩色进度条动画效果: 阅读本文先说说好处:对于基础不好的读者,可以直接阅读文末尾的"如何使用彩虹动画进度条"章节,然后将我封装好的这个功能模块 ...

  2. WPF下载远程文件，并显示进度条和百分比

    WPF下载远程文件,并显示进度条和百分比 1.xaml <ProgressBar HorizontalAlignment="Left" Height="10&quo ...

  3. CSS3动画进度条

    CSS3动画进度条   CSS CODE: @-webkit-keyframes move{ 0%{ background-position: 0 0; } 100%{ background-posi ...

  4. JS框架_(Progress.js)圆形动画进度条

    百度云盘 传送门 密码: 6mcf 圆形动画进度条效果: <!DOCTYPE html> <html lang="en"> <head> < ...

  5. unity编辑器扩展_07（创建对话框，检测按钮的点击，点击按钮后提示信息，保存设置的数据，显示点击按钮后的处理的进度条信息)

    代码: using UnityEditor;using UnityEngine; public class ChangeValue : ScriptableWizard {               ...

  6. svg实现圆环进度条

    开源实现:https://github.com/lugolabs/circles 自行实现:圆环与svg画布间剩的空间太多. <!DOCTYPE html> <html> &l ...

  7. 基于svg的环形进度条

    其实需求是这么一个基于日期的环形进度条,开始用css3写了一下感觉太麻烦了,于是抽了点时间用svg画了一个. 不多说 上代码: css: <style> circle { -webkit- ...

  8. 圆环自带动画进度条ColorfulRingProgressView

    这是项目中遇到了,我也是借鉴大神的, 下载地址:https://github.com/oooohuhu/ColorfulRingProgressView 我把它导入了github中了,里面有详细的使用 ...

  9. 9款极具创意的HTML5/CSS3进度条动画（免积分下载）

    尊重原创,原文地址:http://www.cnblogs.com/html5tricks/p/3622918.html 免积分打包下载地址:http://download.csdn.net/detai ...

随机推荐

  1. Ubuntu 14.04上安装caffe

    本来实在windows 10上尝试安装caffe,装了一天没装上,放弃; 改在windows上装ubuntu的双系统,装了一个下午,不小心windows的系统盘被锁死了,也不会unlock?只好含泪卸 ...

  2. 深入理解CSS变形transform(2d)

    × 目录 [1]变形原点 [2]变形函数 [3]多值 前面的话 CSS变形transform是一些效果的集合,主要是移动.旋转.缩放和倾斜这四种基本操作,还可以通过设置matrix矩阵来实现更复杂的效 ...

  3. HTML5之废弃和更新的元素与属性

    废弃的元素和属性 [1]标签替换 <acronym> 替代:<abbr> <applet> 替代:<embed> 或 <object> &l ...

  4. js实现打开本地文件或文件夹

    原网址:http://blog.csdn.net/cofesun/article/details/7904887javascript有个特殊的对象ActiveXObject,通过它可以访问window ...

  5. [Node.js] 对称加密、公钥加密和RSA

    原文地址:http://www.moye.me/2015/06/14/cryptography_rsa/ 引子 对于加解密,我一直处于一种知其然不知其所以然的状态,项目核心部分并不倚重加解密算法时,可 ...

  6. Tridiv：基于 Web 的 CSS 编辑器，创建炫丽 3D 图形

    Tridiv 是一个基于 Web 的编辑器,使用 CSS 创建 3D 形状.它提供了一个传统的四个面板的操作界面,给出了从每个平面的视图,以及一个预览窗格中示出的最终的效果.使用 Tridiv 可以创 ...

  7. GDB 和 windbg 命令对照(转载)

    From:http://blog.csdn.net/joeleechj/article/details/10020501 命令                                      ...

  8. Auto Mapper02《demo》

         学习这些基本上网上都有一些教程或者别人做的demo,我是按照这个方式去学习的.先做个demo,学会如何去使用它,接着去慢慢的了解它是如何的运行的,理解里面的一些基本的基础知识.我们不可以再像 ...

  9. Winform开发框架之存储过程的支持--存储过程的实现和演化提炼（2）

    本篇继续上篇<Winform开发框架之存储过程的支持--存储过程的实现和演化提炼(1)>来对Winform开发框架之存储过程的支持进行介绍,上篇主要介绍了SQLServer和Oracle两 ...

  10. ASP.NET MVC ValueProvider小结

    在Model绑定中,Model的数据来源有很多种,在MVC里面则定义了一套ValueProvider的组件来处理Model数据来源多样性的问题,ValueProvider整个结构类似于字典(Dictr ...