Progress Bar

Add Title Here80%
Add Title Here60%
Add Title Here70%
Your Text65%
Your Text90%
Your Text55%

Shortcodes

[progress corner="square" label_pos="inside" text_brightness="light_text" progress_type="fill" size="small" animation="fade_in" filledcolor="#27ae60" unfilledcolor="#EBEDEF" value="80" title="Add Title Here"]
[progress corner="square" label_pos="outside" text_brightness="light_text" show_icon="yes" progress_type="fill" size="medium" icon="plane" filledcolor="#27ae60" unfilledcolor="#EBEDEF" value="60" title="Add Title Here"]
[progress corner="square" label_pos="inside" text_brightness="light_text" show_icon="yes" progress_type="fill" size="medium" icon="gift" filledcolor="#27ae60" unfilledcolor="#EBEDEF" value="70" title="Add Title Here"]
[progress corner="rounded" label_pos="outside" text_brightness="light_text" show_icon="yes" progress_type="gradient" size="medium" gradient_color="warm_orange" icon="picture-o" filledcolor="#27ae60" unfilledcolor="#EBEDEF" value="65" title="Your Text"]
[progress corner="rounded" label_pos="inside" text_brightness="light_text" show_icon="yes" progress_type="gradient" size="large" gradient_color="bright_blue" icon="flag" filledcolor="#27ae60" unfilledcolor="#EBEDEF" value="90" title="Your Text"]
[progress corner="square" label_pos="inside" text_brightness="light_text" show_icon="yes" progress_type="inverted_fill" size="medium" icon="leaf" filledcolor="#A1CF2B" unfilledcolor="#EBEDEF" value="55" title="Your Text"]

You can create Unlimited Variations.

Progress Bar Options

  • id: Add a unique ID to the shortcode.
  • class: Add a class or multiple classes to the shortcode.
  • animation: “fade_in”, “move_left”, “move_right”, “move_up”, “scale_up”, “little_bounce”, “fade_in_down”, “fade_in_left”, “fade_in_right”.
  • progress_type: Select Progress Bar Type. ‘fill’, ‘inverted_fill’, ‘gradient’.
  • corner: Select Progress Bar Corner Style. ‘square’, ’rounded’.
  • label_pos: Select the Title Position. ‘inside’, ‘outside’.
  • text_brightness: Select Light Text if using any darker background style. ‘dark_text’, ‘light_text’.
  • size: Select Progress Bar Size. ‘small’, ‘medium’, ‘large’.
  • gradient_color: Select Predefined Gradient Color Style. ‘default’, ‘green’, ‘warm_orange’, ‘red’, ‘pink’, ‘bright_blue’, ‘skygreen’, ‘white’, ‘violet’, ‘grey’, ‘dark_grey’.
  • filledcolor: Enter the filled color.
  • unfilledcolor: Enter the unfilled color.
  • value: Enter the percentage value.
  • show_icon: Select “yes” or “no” to enable/disable Icons.
  • icon: Add Font Awesome Icon name if icon_type value is either “yes” or “imageicon”. e.g. For fa-anchor, add the name without fa-. icon=”anchor”.
  • title: Enter the Progress Label Text.