Home

Awesome

Elastic Progress

Creates a button that turns into a progress bar with a elastic effect. Based on a Dribbble shot by xjw. By Lucas Bebber.

Article on Codrops

Demo

Elastic Progress

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 the elastic-progress.min.js file, located in the dist folder:

<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>

<sub> Note: We are using a div element with role="button" instead of a button element because, according to W3C recommendation, button elements should have no interactive elements as descendants. </sub>

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*/});

Setting Options

Options are set on the constructor, like this:

var progress=new ElasticProgress('.Upload', {
  colorFg:"#FF0000",
  buttonSize:80,
  //...
})

A complete list of options can be found below.

Calling Methods

The button doesn't do much by itself - controlling the opening, bar progress, etc. is in your charge.

var progress=new ElasticProgress('.Upload', {
  // ...
  onClick:function(){
    progress.open();
  }
});
function theFunctionYouAreUsingToCheckProgress(){
  // ...
  progress.setValue(value);
}


// with jQuery
$(".Upload").ElasticProgress({
  // ...
  onClick:function(){
    $(this).ElasticProgress('open');
  }
});

function theFunctionYouAreUsingToCheckProgress(){
  // ...
  $(".Upload").ElasticProgress('setValue',value);
}

A complete list of methods can be found below.

Options

Colors

Size

Text

Animation

Events

Methods

Build

You need node and npm installed. Clone the repo, and on the terminal enter:

$ npm install
$ npm run build

License

Integrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell "as-is".

Read more here: License

Misc

Follow Lucas: Twitter, Codepen, GitHub

Follow Codrops: Twitter, Facebook, Google+, GitHub, Pinterest

© Codrops 2015