Skip to content
forked from samyDzz/ProBar

this script will allow you to configure a progress bar with a timer with other options

Notifications You must be signed in to change notification settings

rlakhneche1/ProBar

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 

Repository files navigation

ProBar

ProBar is a progress bar with multiple options.

Features !

  • config a ProBar color.
  • config a ProBar background.
  • config a Speed of ProBar.
  • config a "Goto" option with timing.
  • cutomize with your own CSS.

Requirement

ProBar require JQuery.

How to Use :

FIRST require CDN JQuery:

<script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>

Link ProBar.js from your html file

<script src="/your/path/to/ProBar.js"></script>

Secondly instantiate ProBar:

var probar = new ProBar(options);

The options :

{
    color : "#2a2a2a", // color of the Progress bar. 
    bgColor : "#efefef", // color background of the Progress bar
    speed 0.3, // speed of animation. ( unit in secondes )
    wrapper : "body" // the wrapper who append ProBar. if class ".class" ,if id "#id" 
}

Functions :

probar.setColor("#2980b9"); // change color of ProBar.
probar.setWrapperColor("#ecf0f1"); // change background color of ProBar.
probar.setSpeed(3000); // change Speed to 3 secondes.
probar.goto(100); // reach 100%.
probar.goto(100,2000); // reach 100% in 2 secondes.

Upcoming features

  • Add Multiple Instantiation.
  • Remove JQuery requirement.

License

MIT

** Made with love ❤ **

About

this script will allow you to configure a progress bar with a timer with other options

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 64.0%
  • HTML 36.0%