Progress Bar

The Progress Bar module for Divi Essential (Divi 5) is a high-performance tool designed to visualize completion. Whether you want to track a user’s scroll progress through a long article or display static skill percentages, this module offers the flexibility of both Horizontal and Circular layouts.

Content Tab Settings

The Content Tab handles the logic and data source of your progress indicator.

Progress Configuration

• Progress Bar Type: Select Horizontal for a linear bar or Circle for a radial design.
• Tooltip Style: Choose from pre-defined layouts to display the percentage value in a styled bubble that follows the progress.
• Progress Relative To: This is the “brain” of the module.
• Page: Tracks progress based on the entire height of the webpage.
• Selector: Tracks progress based on a specific section, row, or element on the page.
  Selector Field: (Visible when Selector is chosen) Enter the CSS ID (e.g., #my-article) or Class (e.g., .post-content) of the element you wish to track
• Bar Display Position: Decide if the bar stays at its layout position or sticks to the Top or Bottom of the viewport.
  Show Percentage: Toggle to show or hide the numerical percentage text.

Design Tab Settings

Style every detail to match your brand’s visual identity.

Horizontal & Circle Design

• Thickness: Adjust Bar Height (Horizontal) or Stroke Width (Circle) to control the weight of the progress line.
• Colors: Separately style the Background (the empty track) and the Fill (the active progress).Percentage Text: For Circle layouts, use the dedicated Percentage Text sub-section to control the font, weight, and size of the number centered in the ring.

Pro Guide
Tracking a Specific Section (Selector Mode)

One of the most powerful ways to use this module is to track progress for a specific long-form article while ignoring the header, footer, and sidebar.

Step 1: Assign an ID to your Target Section

1. Open the settings of the Section or Row that contains your main article text.
2. Go to the Advanced Tab > CSS ID & Classes.
3. In the CSS ID field, type a unique name, for example: reading-area.

Step 2: Configure the Progress Bar

1. Open your Progress Bar module settings.
2. In the Content Tab, set Progress Relative To to Selector.
3. In the Selector field, type your ID with a hashtag: #reading-area.

Step 3: Set the Position
If you want the bar to follow the user as they scroll through that specific section, set the
Bar Display Position to Top.
Why use this? By targeting a specific ID, the progress bar will only start filling when the user reaches the #reading-area and will hit 100% exactly when that section ends, providing a much more accurate “reading time” experience than tracking the whole page.