Vanilla by Plus Three
An Advanced, Flexible Front-End Development System

Vertical Progress Bar


Please view source to see sample CSS and JS code. Because of the nature of this component, there are no defaults in the vanilla assets except for the progress bar color, which is @primaryButtonColor.

The JS function has the following options:

  • direction: 'horizontal' or 'vertical'. Defaults to 'horizontal'.
  • value: An integer, from 0 - 100, to determine the length of the bar.
  • animSpeed: The time it takes the bar to be drawn. Defaults to 'slow' (600 milliseconds).