Creates a button that turns into a progress bar with a elastic effect. Based on the Dribbble shot "Download" by xjw

Overview

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>

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.

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

  • arrowDirection string
    Either 'up' or 'down'. Defaults to 'down'.

Colors

  • colorFg, colorBg string
    Colors of the foreground (the arrow, the filled part of the progress bar) and the background (the circle, the empty part of the progress bar), respectively. Defaults are white and black.

  • highlightColor string
    Color of the highlight outline. Defaults to #08F.

  • background string
    Color of the overlay during the "pop" animation. Defaults to the background color of the body.

Size

  • buttonSize number
    Circumference of the button. Defaults to the height of the element.

  • width number
    Width of the expanded progress bar. Defaults to the width of the element.

  • labelHeight number
    Height of the label, in pixels. Defaults to 53.

  • barHeight number
    Thickness of the progress bar. Defaults to 4.

  • barInset number
    Inset of the filled part of the progress bar. Defaults to -0.5 Helps covering jagged edges.

  • bleedTop, bleedRight, bleedLeft and bleedBottom number
    Margin to draw the graphics. If there's clipping during the animation, increase these values. Performance might take a hit for values too large. Defaults to 100, 50, 50 and 60 respectively.

Text

  • fontFamily string
    Font used for the label. Defaults to 'Helvetica Neue','Helvetica','Arial',sans-serif. This default is added to the value set, so there's no need to manually set these as fallback.

  • fontWeight string
    Defaults to 'bold'.

  • textComplete, textFail and textCancel string
    Texts that will be shown on these events. Defaults are 'Done', 'Failed' and 'Canceled'.

Animation

  • barStretch number
    The maximum distance the bar will stretch. Defaults to 20.

  • jumpHeight number
    How hight the arrow/label will jump. Defaults to 50.

  • barElasticOvershoot and barElasticPeriod number
    Settings for the elastic animation. Defaults are 1.8 and 0.15, respectively.

  • labelWobbliness number
    Setting for the animation of the label during progress. Defaults to 40.

  • arrowHangOnFail and arrowHangOnCancel boolean
    Whether the arrow should 'fall' on these events or not. Default is true for both.

Events

  • onClick function
    Called when the user clicks the button only.

  • onOpen function
    Called when the progress bar finishes the opening animation.

  • onChange function
    Called when the bar value is changed.

  • onComplete function
    Called when the bar is full.

  • onClose function
    Called when the close animation is finished.

  • onFail function
    Called when the fail animation starts.

  • onCancel function
    Called when the cancel animation starts.

Methods

  • open()
    Starts the opening animation (turns the button into a progress bar).

  • close()
    Turns the progress bar back into a button.

  • setValue(valuenumber)
    Sets the percentage loaded of the progress bar. From 0 to 1.

  • getValue() number
    Returns the current value of the progress bar.

  • fail() and cancel()
    Runs the fail and the cancel animations, respectively.

  • complete()
    Runs the complete animation, regardless of the progress. You should probably call setValue(1) instead.

  • onClick(callbackfunction), onOpen(callbackfunction), onChange(callbackfunction), onComplete(callbackfunction), onClose(callbackfunction), onFail(callbackfunction) and onCancel(callbackfunction)
    Aliases to the options of the same name.

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

Comments
  • Website Speed

    Website Speed

    How do I increase the loading speed of my website? My site www.creditmonk.com has become to much slower, Please help me out with proper suitable answer with proper steps.

    opened by avanishtiwari38 0
  • Search section

    Search section

    I'm using elastic in my search section, I want to start my searching as soon as I choose something from my elastic dropdown no need to click search button. for example in google search if we type and then select anything from elastic dropdown then it starts searching no need to press enter or search button.

    opened by avanishtiwari38 0
  • Make some dev dependencies actual dependencies

    Make some dev dependencies actual dependencies

    extend, asap, svgify and svg-pathdata are required by various scripts in /src and therefore should be included in dependencies instead of devDependecies so that they are recursively installed by npm when this module is installed.

    opened by sdunster 0
  • Fix when jQuery is not defined

    Fix when jQuery is not defined

    As we are in strict mode, the previous code failed with Uncaught ReferenceError: jQuery is not defined as we tried to access a variable that is not defined.

    This small fix makes sure to define the variable appropriately.

    opened by oligot 0
  • Wordpress or jQuery Conflict

    Wordpress or jQuery Conflict

    wonderful work !!

    I am just trying to develop a plugin for this. getting one console error and this breaks all other scripts. i have attached the screenshot where the error occurring.

    Would be helpful if you can guide through..

    image

    opened by shakee93 0
The slides in this slideshow wobble as they move. The effect is based on Sergey Valiukh's Dribbble shot and was made using Snap.svg and morphing SVG paths.

Wobbly Slideshow Effect The slides in this slideshow wobble as they move. The effect is based on Sergey Valiukh's Dribbble shot and was made using Sna

Codrops 112 Jul 27, 2022
A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to create a subtle motion or depth effect.

Image Tilt Effect A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to c

Codrops 571 Nov 21, 2022
Liquideffect - Javascript Library for creating liquid effect on image and RGB effect on mouse direction.

LiquidEffect Javascript Library for creating liquid effect on image and RGB effect on mouse direction. Demo https://liquideffect.netlify.app/ Dependen

Rohail 8 May 6, 2022
Warp drive is a lightweight jQuery plugin that helps you create a cool, interactive, configurable, HTML5 canvas based warp drive/starfield effect.

Warp drive jQuery plugin (jquery-warpdrive-plugin) Preview Description Warp drive is a lightweight jQuery plugin that helps you create a cool, interac

Niklas 51 Nov 15, 2022
Simple Web Audio API based reverb effect.

soundbank-reverb Simple Web Audio API based reverb effect. Based on https://github.com/web-audio-components/simple-reverb by Nick Thompson. Intended f

Matt McKegg 21 May 30, 2022
CLI para facilitar o download de animes.

anime-dl Criado nas horas vagas para facilitar o download de animes. Fontes suportadas betteranime Recursos Progresso de download; Pesquisar o anime a

Maxter 2 Feb 15, 2022
Add a water ripple effect to your background using WebGL.

jQuery Ripples Plugin By the powers of WebGL, add a layer of water to your HTML elements which will ripple by cursor interaction! Important: this plug

Pim Schreurs 976 Dec 30, 2022
A decorative website background effect where SVG shapes morph and transform on scroll.

Morphing Background Shapes A decorative website background effect where SVG shapes morph and transform on scroll. Article on Codrops Demo This demo is

Codrops 351 Dec 26, 2022
Background image segment effect as seen on [Filippo Bello's Portfolio](http://www.filippobello.com/portfolio).

Segment Effect Background image segment effect as seen on Filippo Bello's Portfolio. Article on Codrops Demo License Integrate or build upon it for fr

Codrops 526 Nov 29, 2022
Switch the background-image with using effect.

jQuery.BgSwitcher Switch the background image with using effect. Demo http://rewish.github.io/jquery-bgswitcher/ Usage <div class="box"> <p>Lorem ip

rewish 195 Dec 30, 2022
Recreation of the background scale hover effect seen on the DDD Hotel website using CSS clip paths.

Background Scale Hover Effect Recreation of the background scale hover effect seen on the DDD Hotel menu using CSS clip paths. Article on Codrops Demo

Codrops 98 Dec 6, 2022
A motion hover effect for a background grid of images.

Image Grid Motion Effect A motion hover effect for a background grid of images. Article on Codrops Demo Installation Install dependencies: npm install

Codrops 118 Dec 31, 2022
fixed-background-effect

Fixed Background Effect A simple template that takes advantage of the background-attachment CSS property to create a fixed background effect. Article

CodyHouse 50 Oct 28, 2022
A mouse particle effect react component

react-mouse-particles A mouse particle effect react component A very fun react library that can be used to create mouse particle effects, which are as

lindelof 92 Dec 17, 2022
Demos for the tutorial on how to achieve an interactive mouseover/hover effect

Interactive Hover Effects with Three.js A simple tutorial on how to achieve an interactive mouseover/hover effect on images in some easy steps. Articl

Yuri Artiukh 246 Dec 27, 2022
:tada: Add a cute click effect to your mouse in your vuepress!

vuepress-plugin-cursor-effects ?? Add a cute click effect to your mouse in your vuepress! Document: moefy-vuepress LiveDemo: notev Install yarn add vu

null 19 Sep 25, 2022
magneticHover lets you trigger hover effect on the element when the cursor is near it, but not over it yet

magneticHover magneticHover lets you trigger hover effect on the element when the cursor is near it, but not over it yet. Examples https://codesandbox

Halo Lab 35 Nov 30, 2022
👓 Parallax tilt hover effect for React JS - tilt.js

React.js - Tilt.js React version of tilt.js Demo https://vx-demo.now.sh/gallery Install yarn: yarn add react-tilt npm: npm install --save react-tilt U

Jon 340 Dec 23, 2022
Simple jQuery plugin for 3d Hover effect

jQuery Hover3d jQuery Hover3d is a simple hover script for creating 3d hover effect. It was my experiment on exploring CSS3 3d transform back in 2015

Rian Ariona 333 Jan 4, 2023