创建一个按钮，变成具有弹性效果的进度条。

Article on Codrops

Demo

Instructions

This project requires GSAP. You can use either TweenMax...

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>

...or TweenLite, with EasePack and the CSS and attr plugins:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenLite.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/easing/EasePack.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/plugins/CSSPlugin.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/plugins/AttrPlugin.min.js"></script>

Then, include theelastic-progress.min.jsfile, located in thedistfolder:

<script src="path/to/js/elastic-progress.min.js"></script>

Usage

Create the element you want to turn into a button:

<div class="Upload" role="button" aria-label="Upload file"></div>

_{Note: We are using adivelement withrole="button"instead of abuttonelement because, according to W3C recommendation,buttonelements should have no interactive elements as descendants.}

Then, via JS:

var element=document.querySelector('.Upload');  var progress=new ElasticProgress(element, { /*options*/ });    // or...    var progress=new ElasticProgress('.Upload', { /*options*/});

Or, in case you are using jQuery:

$('.Upload').ElasticProgress({/*options*/});

项目主页：http://www.open-open.com/lib/view/home/1443349328752