Progress Bar

The Progress Bar widget allows you to add fully styled, animated progress bars to your page. Whether you’re tracking project milestones, skill levels, or any other progress, this widget provides an engaging visual representation for your website.

View Live Demo

Content Tab

Progress Bar

• Title: Enter the title for your progress bar, which typically represents the skill or task being measured.
• Title HTML Tag: Choose the HTML tag that best fits the context of the title, such as span , p , or heading tags like h1 , h2 , etc.
• Type: Select the style type for the progress bar. Options include Default, Info, Success, Warning, and Danger, each potentially corresponding to different color schemes.
• Percentage: Set the percentage value to display how much of the task is completed. This is visually represented by the filled portion of the progress bar.
• Display Percentage: Toggle whether to show the percentage number on the progress bar.
• Inner Text: If you wish to display text inside the progress bar (such as a job title or skill level), enter it here.

Style Tab

Progress Bar

• Color: Customize the color of the progress bar to match your design or to signify different levels of progress.
• Background Color: Choose a color for the background of the progress bar, which is the part that's not filled.
• Height: Adjust the thickness of the progress bar.
• Border Radius: Round the corners of the progress bar by setting the radius.

Inner Text

• Color: Decide the color of the inner text, if you have any.
• Typography: Customize the font settings for the inner text, such as family, size, weight, transform, style, decoration, line-height, and letter-spacing.
• Text Shadow: Add a shadow effect to the inner text for better readability or stylistic preference.

Title Style

• Text Color: Choose the color of the title text of the progress bar.
• Typography: Adjust the typography of the title, where you can change the font family, size, weight, and other font properties.
• Text Shadow: Optionally, add a shadow to the title text to enhance visibility or as a design choice.