Giter Club home page Giter Club logo

ea-vertical-progress's Introduction

ea-vertical-progress

create a vertical progress bar on a div

Install

bower install ea-vertical-progress

##initialize

progress = new EAProgressVertical( parent ,[ initialValue, type, time, milestoneArray])

####parent : required jQuery Object which will act as the outer container

####initialValue default : 0
the initial value of the the progress object (0 - 100)

####type default : 'fill'
the type of progress can either be 'fill' or 'empty'

####time default : 10000
time in milliseconds taken for progress to reach from 0% to 100%

####milestoneArray default : [0, 100]
Array of breakpoints
additional functionality to provide breakpoints to the progress if it doesnt find 0 and 100 it adds them

##Start Animation progress.startProgress()
start the progress according to the direction as provided in initialize

##Stop Progress progress.stopProgress([milestone])
Stop the progress

####milestone default : false
boolean
false - the current progress
true - the milestone closest to the progress

##Set Progress progress.setProgress(value, [slow])
sets the progress to the given value

####value (required) integer (0 - 100)

####slow default : false
Speed of animation true or false
slow takes the progress speed

#Example

progress = new EAProgressVertical( $('.bottle'), 0, 'fill', 10000, [25,50,75] );
	
	$('.change-progress').on('mousedown', function(e){	
		progress.startProgress();
	});
	
	$('.change-progress').on('mouseup', function(e){
		pro = progress.stopProgress(true);
		progress.setProgress(pro);
	})
	```

ea-vertical-progress's People

Watchers

Elroy Antão avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.