Componentes
Barra de progresso
Quanto de uma tarefa já foi feito, com rótulo e valor visíveis — na cor do estado, ou no degradê da família do sistema.
Quando usar
- etapas de um roteiro, envio de arquivo, passos de um cadastro
Quando não usar
- quanto de um limite (use o medidor dos gráficos)
- espera sem valor (use o giro com texto)
- barra sem rótulo
Estado
claro
62%
100%
80%
35%
20%
escuro
62%
100%
80%
35%
20%
<div class="hx-progress-field"><label class="hx-label" for="pp">Padrão (cobalto)</label><span class="hx-progress-value">62%</span><progress class="hx-progress" id="pp" max="100" value="62">62%</progress></div>
<div class="hx-progress-field"><label class="hx-label" for="psuccess">Concluído</label><span class="hx-progress-value">100%</span><progress class="hx-progress hx-progress-success" id="psuccess" max="100" value="100">100%</progress></div>
<div class="hx-progress-field"><label class="hx-label" for="pwarning">Atenção</label><span class="hx-progress-value">80%</span><progress class="hx-progress hx-progress-warning" id="pwarning" max="100" value="80">80%</progress></div>
<div class="hx-progress-field"><label class="hx-label" for="pdanger">Perigo</label><span class="hx-progress-value">35%</span><progress class="hx-progress hx-progress-danger" id="pdanger" max="100" value="35">35%</progress></div>
<div class="hx-progress-field"><label class="hx-label" for="pneutral">Neutro</label><span class="hx-progress-value">20%</span><progress class="hx-progress hx-progress-neutral" id="pneutral" max="100" value="20">20%</progress></div>Família do sistema, em degradê
claro
40%
49%
58%
67%
76%
85%
94%
escuro
40%
49%
58%
67%
76%
85%
94%
<div class="hx-progress-field"><label class="hx-label" for="fcobalt">Cobalto</label><span class="hx-progress-value">40%</span><progress class="hx-progress hx-progress-cobalt" id="fcobalt" max="100" value="40">40%</progress></div>
<div class="hx-progress-field"><label class="hx-label" for="focean">Oceano</label><span class="hx-progress-value">49%</span><progress class="hx-progress hx-progress-ocean" id="focean" max="100" value="49">49%</progress></div>
<div class="hx-progress-field"><label class="hx-label" for="faurora">Aurora</label><span class="hx-progress-value">58%</span><progress class="hx-progress hx-progress-aurora" id="faurora" max="100" value="58">58%</progress></div>
<div class="hx-progress-field"><label class="hx-label" for="fmint">Menta</label><span class="hx-progress-value">67%</span><progress class="hx-progress hx-progress-mint" id="fmint" max="100" value="67">67%</progress></div>
<div class="hx-progress-field"><label class="hx-label" for="fviolet">Violeta</label><span class="hx-progress-value">76%</span><progress class="hx-progress hx-progress-violet" id="fviolet" max="100" value="76">76%</progress></div>
<div class="hx-progress-field"><label class="hx-label" for="fslate">Ardósia</label><span class="hx-progress-value">85%</span><progress class="hx-progress hx-progress-slate" id="fslate" max="100" value="85">85%</progress></div>
<div class="hx-progress-field"><label class="hx-label" for="fnight">Noite</label><span class="hx-progress-value">94%</span><progress class="hx-progress hx-progress-night" id="fnight" max="100" value="94">94%</progress></div>O degradê é identidade — a família do sistema (ADR-0029), como na ajuda do primeiro produto —, não estado. No escuro, usa os tons do símbolo da família, mais claros.
Tamanhos
claro
escuro
<progress class="hx-progress hx-progress-sm" max="100" value="45" aria-label="45%"></progress>
<progress class="hx-progress" max="100" value="45" aria-label="45%" style="margin-block:12px"></progress>
<progress class="hx-progress hx-progress-lg" max="100" value="45" aria-label="45%"></progress>Referência
| Classe ou atributo | Para quê |
|---|---|
progress.hx-progress | o elemento nativo; max e value |
.hx-progress-success / -warning / -danger / -neutral | estado |
.hx-progress-cobalt … -night | degradê da família |
.hx-progress-sm / -lg | altura |
.hx-progress-field, .hx-progress-value | rótulo e valor |
Origem: cap. 10 §3.3 · ADR-0038 · desde a versão 0.4.0