Camel2.0 — Dokumentacja komponentów UI

2.29 #Components.ProgressBar Progress Bar

Pasek postępu z animacją fill, tytułem, podtytułem i opisem. JS: src/js/modules/progress-bar.js — viewport animation, auto-text.

Examples

Default styling

Postęp odblokowania nagrody

3 / 6 odebranych voucherów

Odbierz 6 voucherów, aby odblokować nagrodę specjalną.

Nagroda specjalna odblokowana!

6 / 6 odebranych voucherów

Gratulacje!

.progress-bar--success

Wariant sukcesu (złote tło, pomarańczowy fill, burst + iskierki)

Postęp odblokowania nagrody

3 / 6 odebranych voucherów

Odbierz 6 voucherów, aby odblokować nagrodę specjalną.

Nagroda specjalna odblokowana!

6 / 6 odebranych voucherów

Gratulacje!

.progress-bar--animated

Animacja width (dodawana przez JS)

Postęp odblokowania nagrody

3 / 6 odebranych voucherów

Odbierz 6 voucherów, aby odblokować nagrodę specjalną.

Nagroda specjalna odblokowana!

6 / 6 odebranych voucherów

Gratulacje!

Markup: progress-bar.html

<div style="display: flex; flex-direction: column; gap: 24px; max-width: 600px;">
  <div class="progress-bar progress-bar--animated" style="--progress: 50%;">
    <p class="progress-bar__title">Postęp odblokowania nagrody</p>
    <p class="progress-bar__subtitle">3 / 6 odebranych voucherów</p>
    <div class="progress-bar__track">
      <div class="progress-bar__fill" style="width: 50%;"></div>
    </div>
    <p class="progress-bar__desc">Odbierz 6 voucherów, aby odblokować nagrodę specjalną.</p>
  </div>
  <div class="progress-bar progress-bar--success progress-bar--animated" style="--progress: 100%;">
    <p class="progress-bar__title">Nagroda specjalna odblokowana!</p>
    <p class="progress-bar__subtitle">6 / 6 odebranych voucherów</p>
    <div class="progress-bar__track">
      <div class="progress-bar__fill" style="width: 100%;"></div>
    </div>
    <p class="progress-bar__desc">Gratulacje!</p>
  </div>
</div>

Source: src/scss/components/_progress-bar.scss, line 1