---
url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/elements/progress-bar'
title: 'Adding a Progress Bar | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2023-11-06T09:33:52+00:00'
updated: '2026-10-23T14:31:17+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Horizontal progress'
tags:
  - 'Data and motion'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-23T14:31:17+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Adding a Progress Bar'
      description: 'Horizontal progress'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2023-11-06T09:33:52+0000'
      dateModified: '2026-10-23T14:31:17+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/elements/progress-bar'
      articleSection: 'Data and motion'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/elements/progress-bar'
      description: 'Horizontal progress'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: en
---
[Help Center](/hc)/[Documentation](/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Add content](/hc/documentation/learn-dxpr-builder/elements) /[Data and motion](/hc/documentation/learn-dxpr-builder/elements/data-and-motion) # Adding a Progress Bar.

Horizontal progress

 Learn DXPR BuilderBuild pagesAdd contentData and motion

   ## In this guide

 Related guides

- [Style tab](/hc/documentation/learn-dxpr-builder/element-settings/style-tab)

You get a coloured bar with a label that shows at a glance how far something has come. Use it for project status, fundraising goals, course progress or skill levels.

## Add a progress bar

Open your page while logged in: the builder controls appear when you hover the content area. [Your first page](/hc/documentation/learn-dxpr-builder/getting-started/first-page) shows the basics.

1. Hover the column and click **+** in its control bar, or click **Add Elements** on an empty page. Open the **Content** tab and click **Progress bar**. It lands at the top of the column and its settings dialog opens.
2. Type a **Label** for the bar, such as "Website redesign".
3. Drag **Progress** to set how far the bar fills, or type the value in the box beside the slider. Here we choose 73 percent.
4. Pick a **Front color** for the filled part from the palette.
5. Lower in the same dialog, choose whether the bar gets **Stripes**. Here we tick **Add striped pattern to bar**.
6. Click **Save** in the dialog. Then click **Save** in the toolbar at the top of the content area to store the page.

  ## What you see

A bar with your label fills to the value you set, in the colour you picked. The label sits inside the filled part. In the video, the striped bar reads Website redesign and fills 73% of its track. Visitors see it once you save the page and it is published.

## Set up your progress bar

Hover the element and open **More > Settings** in its control bar. Options:

- **Label:** the text on the bar. You can also click the label on the page and edit it there.
- **Progress:** how far the bar fills, from 0 to 100 percent. The default is 50.
- **Bar height:** the height of the bar in pixels. The default is 45.
- **Back color:** the colour of the empty track.
- **Front color:** the colour of the filled part.
- **Grow animation:** off by default. When on, the bar starts empty and fills once half of it is in view.
- **Stripes:** **Add striped pattern to bar** adds diagonal stripes. **Animate stripes (requires striped pattern)** makes them move.

## If you don't see it

- **Progress bar is not in the Content tab.** Your user profile hides it. Ask an administrator to enable it in [User Profiles](/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin).
- **It is gone after you reload.** The page was not saved. Add it again and click **Save** in the toolbar at the top of the content area.
- **The bar looks empty.** **Progress** is 0, or **Grow animation** is on and the bar is not yet half in view. Scroll down to the bar, or hover the element and open **More > Settings** to raise **Progress**.
- **There are no stripes, or they do not move.** **Add striped pattern to bar** is not ticked, and **Animate stripes (requires striped pattern)** needs it. Tick **Add striped pattern to bar** under **Stripes**.
- **The filled part blends into the track.** **Front color** and **Back color** are too alike. Pick a darker **Front color** or a lighter **Back color**.

## What's next?

[Style tab](/hc/documentation/learn-dxpr-builder/element-settings/style-tab) to change spacing and background for your progress bar.