| 12345678910111213141516 |
- ---
- 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>
- ```
|
