primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2024-11-30 01:04:04 +03:00
Code Issues Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Shawn Allen 2019-04-09 11:52:09 -07:00 committed by GitHub
parent 0140cfcfba
commit 4adae2a48b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 25 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
pages/css/components/progress.md
View File

@ -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>
```
## Progress with tooltip
## 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
<div class="tooltipped tooltipped-n" aria-label="78 done / 6 in progress / 2 to do">
<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>
```
## Accessibility
In cases where it's not possible to describe the progress in text, provide an `aria-label` attribute that does so:
```html
<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>
```