---
title: Progress background
description: By using a progress bar component as a background element, designers can create a dynamic and engaging visual experience for users. For example, the progress bar could be used to represent the completion of a long-term goal or project, such as a fundraising campaign or construction project. As users interact with the page, the progress bar could gradually fill up, creating a sense of momentum and progress.
---

```html code example vertical centered columns={1}
<div class="progressbg">
  <div class="progress progressbg-progress">
    <div class="progress-bar bg-primary-lt" style="width: 35%" role="progressbar" aria-valuenow="35" aria-valuemin="0" aria-valuemax="100" aria-label="35% Complete">
      <span class="visually-hidden">35% Complete</span>
    </div>
  </div>
  <div class="progressbg-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea eos ullam ut. Doloribus est in laborum, ratione recusandae reprehenderit tenetur. Accusantium consectetur ea enim facere ipsam praesentium quas soluta tenetur?</div>
  <div class="progressbg-value">35%</div>
</div>
```