Skip to content

docs(progress): beef up progress docs, fix #750 #751

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Apr 16, 2019
Merged

docs(progress): beef up progress docs, fix #750 #751

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
38 changes: 25 additions & 13 deletions pages/css/components/progress.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,50 +7,62 @@ bundle: progress
---


Use Progress components to visualize task completion.

## Default Progress
Use Progress components to visualize task completion. The `Progress` class adds a background color and aligns its children horizontally with flexbox. The children should be individually colored with [background utilities](/css/utilities/colors#background-colors) and sized with inline `width` styles in percentages. Overflow is hidden, so children that overflow will be clipped.

```html
<span class="Progress">
<span class="Progress-value bg-green" style="width: 50%;"></span>
<span class="bg-green" style="width: 50%;"></span>
</span>
```

## Large Progress
Large progress bars are slightly taller than the default.

```html
<span class="Progress Progress--large">
<span class="Progress-value bg-green" style="width: 50%;"></span>
<span class="bg-green" style="width: 50%;"></span>
</span>
```

## Small Progress
Large progress bars are shorter than the default.

```html
<span class="Progress Progress--small">
<span class="Progress-value bg-green" style="width: 50%;"></span>
<span class="bg-green" style="width: 50%;"></span>
</span>
```

## Inline Progress
For inline progress indicators, use the `Progress` and `d-inline-flex` with an inline element such as `<span>` and add a custom `width` style:

```html
<span class="text-small text-gray mr-2">4 of 16</span>
<span class="Progress d-inline-flex" style="width: 160px">
<div class="bg-green" style="width: 25%"></div>
</span>
```

## Progress with tooltip
## Accessibility
In cases where it's not possible to describe the progress in text, provide an `aria-label` attribute that does so:

```html
<div class="tooltipped tooltipped-n" aria-label="78 done / 6 in progress / 2 to do">
<div aria-label="tasks: 8 of 10 complete">
<span class="Progress">
<span class="Progress-value bg-green" style="width: 50%;"></span>
<span class="bg-green" style="width: 80%;"></span>
</span>
</div>
```

## Progress with multiple values
To show the progress of tasks in multiple states (such as "done", "in progress", and "open"), use distinct background color utilities and give each one a percentage width proportional to the total number. Children are stacked from left to right, so if your widths add up to 100%, your bars will too.

```html
<div class="tooltipped tooltipped-n" aria-label="78 done / 6 in progress / 2 to do">
<div class="tooltipped tooltipped-n" aria-label="tasks: 80 done, 14 in progress, 6 open">
<span class="Progress">
<span class="Progress-value bg-green" style="width: 50%;"></span>
<span class="Progress-value bg-purple" style="width: 25%;"></span>
<span class="Progress-value bg-red" style="width: 5%;"></span>
<span class="bg-green" style="width: 80%;"></span>
<span class="bg-purple" style="width: 14%;"></span>
<span class="bg-red" style="width: 6%;"></span>
</span>
</div>
```
Expand Down