Progress Bar

Progress bars are great ways to display statistics and progress throughout the site.

Customization Available:

  • Bar Appearance: Horizontal, vertical, circular, semi circular
  • Bar Progress Type: Color, gradient, image
  • Striped Selector: Yes/no (will only work if bar progress type chosen is “color”)
  • Horizontal Layout: Number & text above or below progress bar, number & text inside progress bar, number inside & text outside progress bar

  • Horizontal Bar

  • Vertical Bar

  • Circular Bar

  • Semicircular Bar

Horizontal Bar

  • Bar Appearance: Horizontal
  • Bar Progress Type: Color
  • Striped Selector: Yes
  • Horizontal Layout: Number & text above progress bar
  • JS
    0%
  • PHP
    0%
  • HTML
    0%
  • fruit
    0%
  • Bread
    0%
  • Meat
    0%
  • Sugar
    0%
  • Veggies
    0%

Vertical Bar

  • Bar Appearance: Vertical
  • Bar Progress Type: Image
  • Striped Selector: No
  • Horizontal Layout:
    Number & text below progress bar

Circular Bar

  • Bar Appearance: Circular 
  • Bar Progress Type: Color (only color is possible with circular bar)
  • Striped Selector: No
  • Layout: Center
  • Before Text
    0%
    After Text
  • Before Text
    0%
    After Text
  • Before Text
    0%
    After Text
  • Before Text
    0%
    After Text

Semicircular Bar

  • Bar Appearance: Semicircular
  • Bar Progress Type: Color (only color is possible with semicircular bar)
  • Striped Selector: No
  • Layout: Center
  • 0%
    0 100
  • 0%
    0 100
  • 0%
    0 100
  • 0%
    0 100