Priority Support
Help Center > Elementor Editor > Widgets > Basic functionality > Progress Bar widget

Progress Bar widget

Last Update: January 28, 2024

This post has been translated using machine translation, which may result in minor inaccuracies or differences in wording compared to the original. We apologize for any errors or ambiguities. Please feel free to contact us if we can clarify anything for you.

The Progress Bar Widget allows you to add fully styled, animated progress bars to your page.

Content

Progress Bar

  1. Title: Enter the title text that is displayed above the progress bar
  2. Title HTML Tag: Use the dropdown menu to designate the title of the progress bar as a header (H1-6).This helps search engines find and understand the progress bar, boosting SEO. The title can also be tagged as a paragraph, span or div
  3. Percentage: Set the completion percentage number
  4. Display Percentage: Use the switch to show or hide the actual percentage number text at the end of the bar
  5. Inner Text: Enter the text to be displayed within the bar

Style

Progress Bar

  1. Color: Change the color of the bar
  2. Background: Choose the color of the background of the bar
  3. Inner Text Color: Choose the color of the text to be displayed within the bar

Title style

  1. Color: Choose the color of the title text that is displayed above the progress bar
  2. Typography: Set the typography options of the title text

Advanced

Set the Advanced options that are applicable to this widget

On this page

Share this article

Hosted with