創建一個按鈕，變成具有彈性效果的進度條：Elastic Progress

創建一個按鈕，變成具有彈性效果的進度條。

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.baiduhome.net/lib/view/home/1443349328752