Manual

The fundamentals of using Slider Revolution.

[wd_asp elements=’search’ ratio=’100%’ id=2]

Add and Style Progress Bars

Learn how to add progress bars to any module.

What Do Progress Bars Do?

Progress bars give visitors a visual indicator of how much time is left on the current slide, or on the entire module.

As the slide or module progresses, the bar will gradually fill up. When the slide or module is complete, the progress bar will reset and begin to fill again:

You can add a progress bar to both custom modules you’ve designed from scratch, and to template based modules that don’t already use a progress bar.

To illustrate, in this guide our examples will all use the Isometric Slider template. 

Enabling a Progress Bar

To enable a progress bar for a module, go to the Navigation Options tab, Progress Bar sub-section:

At the top of the Progress Bar panel there is a toggle switch. Toggle it to ON to add a progress bar to the module:

By default, a freshly added progress bar will be a 5px high translucent white bar, running along the bottom edge of the module:

Progress Bar Options

Once a progress bar is enabled, all its configuration options will appear in the Progress Bar panel:

Based On

The Based On option allows you to choose whether the bar reflects the progress of the current slide, or of the entire module:

Style

The Style option gives you four different types of progress bars to choose from:

Horizontal

A Horizontal progress bar is a line that fills from left to right, or right to left:

Vertical

A Vertical progress bar is a line that fills from bottom to top, or top to bottom:

Circle CW

A Circle CW progress bar is a circle that fills clockwise:

Circle CCW

A Circle CCW progress bar is a circle that fills counter-clockwise:

Progress Bar

The Progress Bar option allows you to set the fill color of the bar:

Background

The Background option allows you to set the background color of the bar:

Aligned by

The Aligned by option allows you to decide what the progress bar’s alignment should be relative to:

In Slider Revolution, the Layer Area is the space indicated by the dotted blue lines on the canvas:

However the Scene is the entire module space, which is often wider than the Layer Area:

As such, if you set Aligned by to Layer Area, the progress bar will be positioned relative to those blue dotted lines.

In this case, Horizontal progress bars will never be any wider than that area:

Vertical progress bars, (if aligned left or right), will be aligned inside a blue line:

And Circle progress bars, (if aligned left or right), will be positioned near a blue line:

However, if you set Aligned by to Scene, the progress bar will be positioned relative to the outermost edges of the module.

In this case, Horizontal progress bars will fill all the available space:

Vertical progress bars, (if aligned left or right), will sit flush with an outer edge:

And Circle progress bars, (if aligned left or right), will be positioned near an outer edge:

Alignment

The Alignment option allows you to set the horizontal and vertical alignment of your progress bar. You will see a grid of points representing the available alignment settings, and this grid differs between progress bar styles depending on the ways in which they can be aligned.

Circle progress bars can be horizontally aligned to the left, center or right, and vertically aligned to the top, middle or bottom. As such their alignment grid shows 9 possible alignment settings:

Horizontal progress bars can be horizontally aligned to the left or right, and vertically aligned to the top, middle or bottom. As such their alignment grid shows 6 possible alignment settings:

Note: If Horizontal progress bars are aligned to the left they will fill from left to right, and if aligned to the right they will fill from right to left.

Vertical progress bars can be horizontally aligned to the left, center or right, and vertically aligned to the top or bottom. As such their alignment grid shows 6 possible alignment settings:

Note: If Vertical progress bars are aligned to the bottom they will fill from bottom to top, and if aligned to the top they will fill from top to bottom.

X/Y

The X and Y options allow you to offset a progress bar’s position by a pixel(px) amount:

The X option creates a horizontal offset and is available when using a Circle or Vertical progress bar style. If the progress bar is left aligned, the offset will move the bar to the right. If the progress bar is right aligned, the offset will move the bar to the left.

For example, here is a Vertical progress bar, with Aligned by set to Scene, Alignment set to the bottom right, and X set to 80px:

The Y option creates a vertical offset and is available when using a Circle or Horizontal progress bar style. If the progress bar is top aligned, the offset will move the bar down. If the progress bar is bottom aligned, the offset will move the bar up.

For example, here is a Horizontal progress bar, with Aligned by set to Layer Area, Alignment set to the top left, and X set to 15px:

Strength

The Strength option sets the width of bar in pixels(px):

Reset

The Reset option controls what the progress bar does once it has filled up and needs to reset to an empty state:

If Animation is selected, when the bar fills up you will see it shrink back down again to nothing before it starts filling again.

If No Animation is selected, when the bar resets there will be no shrinking effect, it will just disappear then start filling up again.

Device Size Toggles

If you want to hide the progress bar on certain device sizes, set the toggles at the bottom of the panel to OFF for those sizes:

Add and Style Progress Bars

Newsletter

Join over 30.000 others on the Slider Revolution email list to get access to the latest news and exclusive content.