mirror of
https://github.com/tabler/tabler.git
synced 2025-12-22 01:44:25 +04:00
17 lines
1.1 KiB
Plaintext
17 lines
1.1 KiB
Plaintext
---
|
|
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>
|
|
```
|