创建一个按钮，变成具有弹性效果的进度条：Elastic Progress
pcbbe
9年前
创建一个按钮，变成具有弹性效果的进度条。
Article on Codrops
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*/});