LudoJS

ludo.progress.Bar

ludo.progress.

new ludo.progress.Bar(config)

Progress Bar
The progress bar is created using SVG. It is made out of 4 elements in this stacking order(bottom to top)

1) The background svg path rendered with the css class '.ludo-progress-bg' and styles defined in bgStyles object
2) Eventual background image defined in bgPattern. If the background path(1) has a border, the background image will be
shrinked to fit inside. The background image will be repeated when smaller than the progress bar. If bigger, it will be scaled
down.
3) Progress Bar SVG path
4) Eventual background image defined in frontPattern.

Demo: Progress Bar Demo

Parameters:
Name Type Description
config Object
Properties
Name Type Description
steps Number

Number of progress bar steps, default = 10
progress Number

Initial step, default = 0
bgPattern String

Path to background image for the progress bar background.
frontPattern String

Path to background image for the progress bar. The background images will be repeated if smaller than the progress bar. If bigger, it will be scaled down.
textSizeRatio float

Size of text relative to height of progress bar, default = 0.6
borderRadius float

Fixed border radius, default = height / 2
bgStyles float

SVG background styles
barStyles float

SVG moving bar styles
textStyles float

Styling of text on progress bar
easing function

Easing function for animation. default: ludo.svg.easing.linear
animationDuration Number

Animation duration in milliseconds (1/1000s) - default: 100
Source:
Fires:
  • ludo.progress.Bar#change Fired when value is changed. Arguments. 1) Percent completed 2) current step 3) number of steps, 4) ludo.progress.Bar 4) Current percentage. If animated, the change event will be triggered once animation is complete.event:
  • ludo.progress.Bar#animate Fired during progress animation and when value is changed. This is a good event to listen to when you want to update texts for the progress bar. Arguments. 1) Animated percent completedevent:

Extends

  • ludo.progress.Base

Methods

increment(by, animate)

Increment progress bar

Parameters:
Name Type Description
by Number
animate Boolean
Source:

percent(percent, animate)

Update or get percent completed.

Parameters:
Name Type Description
percent Number

New percentage value
animate Boolean

True to animate, default = false
Source:
Example
var progressBar = ludo.$('progressBar');
// get percent completed with no decimals
var percent = progressBar.percent();
// update percent and animate it
progressBar.percent(20, true);

ratio(ratio, animate)

Get or set ratio. To get current ratio, send no arguments to this function.

The ratio is also updated automatically when you use the increment function.

Parameters:
Name Type Description
ratio Number

New ratio - 0 = starting, 1 = finished
animate Boolean

True to animate, default = false
Source:
Example
var progressBar = ludo.$('progressBar');
// get ratio
var ratio = progressBar.ratio();
// set ratio
progressBar.ratio(0.5, true);

setProgress(progress, animate)

Set new progress value

Parameters:
Name Type Description
progress Number
animate Boolean
Source:

text(text)

Display text on progress bar.

Parameters:
Name Type Description
text String
Source:
Example
{
         id: 'progress',
         type: 'progress.Bar',
         borderRadius: 3,
         steps: 100,
         layout: {
             width: 300,
             height:30
         },
         listeners:{
            // Update text on animate
             animate:function (percent) {
                 this.text(percent.toFixed(0) + '%');
             }
          }
      }