Awesome & convenient to use

Progress bar element is convenient to show your statistical information with eye-catching progress lines. Just use this element by drag-n-drop.

Progress Bar Image

Style options galore

Dozens of style options are ready. If you want you can fully-customize the look of progress bar, title and percentage as well.

Progress Bar Image

Control text position

This option is to control the position of progress bar title. Choose one you like.

Progress Bar Image

Percentage position

This option is to control the position of progress percentage.

Progress Bar Image

Change color & type

This option is to control the type and color of progress bar.

Progress Bar Image

Custom bar size

This option is to control the height of progress bar. Input value from 0 to 100.

Progress Bar Image

Customize shape

This option is to adjust the border radius of progress bar. Both px and % are possible.

Progress Bar Image

Customize title

This option is to control the color and typography of progress bar title.

Provide many style to choose

Choose among 6 fashionable types supported by UDesign theme. If you mind you can build your own progress bars using style options.

End of bar style

Performance86%
Average Improvements98%
Promotion69%

End of percent

Performance86%
Average Improvements98%
Promotion69%

After title percent

Performance86%
Average Improvements98%
Promotion69%

Gradient color

Performance86%
Average Improvements98%
Promotion69%

Animated colors

Performance86%
Average Improvements98%
Promotion69%

Size, shape & inner text

Performance98%
Performance86%
Performance69%

Glossary

Progress bar element options

Customize Elements Globally or Individually

  • Text Position – Control the location of progress bar title.
  • Display Percentage – Enable to display percentage or not.
  • Percentage Position – Select available percentage position.
  • Title – Input any progress bar title.
  • Skin – Select the progress bar skin from 10 default types.
  • Percentage – Pick up the percentage value from 0 to 100.
  • Spacing – Control the space between progress bar it.
  • Effect – Choose your effect for progressbars.
  • Background Color – Control background color of each progress bar.
  • Color Type – Select color types from 2 options – Gradient and Classic.
  • Height – Adjust the height of progress bar.
  • Border Radius – Control the border radius of progress bar.
  • Padding – Control the padding of progress box.
  • Text Color – Control color of progress bar title.
  • Typography – Control the typography of progress bar title.
  • Percentage Color – Control color of percentage.
  • Percentage Typography – Control the typography of percentage.