# RPG progress bar

Bronze\-framed bar with a glossy fill, slow shimmer and centred readout; gold, health, mana and more\.

- Kind: element
- Category: misc
- Default background: dark
- Use when: Quest or skill progress, health and resource meters, gamified dashboards\.
- Avoid when: Long lists of quiet progress rows, or plain loading states\.
- Requires: None
- Kit: [Lost Fantasy](https://thuvien.org/ui/kits/lost-fantasy.md)
- Credit: [Lost Fantasy](https://lostfantasy.net)
- License: MIT

## Variants

Add one variant class next to the root element's class.

- [Gold](https://thuvien.org/ui/elements/rpg-progress-bar?variant=gold): default, no extra class
- [Health](https://thuvien.org/ui/elements/rpg-progress-bar?variant=health): `tv-rpg-progress-bar--health`
- [Mana](https://thuvien.org/ui/elements/rpg-progress-bar?variant=mana): `tv-rpg-progress-bar--mana`
- [Experience](https://thuvien.org/ui/elements/rpg-progress-bar?variant=experience): `tv-rpg-progress-bar--experience`
- [Stamina](https://thuvien.org/ui/elements/rpg-progress-bar?variant=stamina): `tv-rpg-progress-bar--stamina`

## HTML

```html
<div class="tv-rpg-progress-bar" role="progressbar" aria-label="Quest progress" aria-valuemin="0" aria-valuemax="100" aria-valuenow="72">
  <div class="tv-rpg-progress-bar-track">
    <div class="tv-rpg-progress-bar-fill" style="width: 72%"></div>
    <span class="tv-rpg-progress-bar-readout">72 / 100</span>
  </div>
</div>
```

## CSS

```css
/* Bronze-framed bar. Set the fill width inline; pick a colour with a variant class. */
.tv-rpg-progress-bar {
  --tv-rpg-progress-bar-top: #fde68aa6;
  --tv-rpg-progress-bar-mid: #f59e0b;
  --tv-rpg-progress-bar-bot: #b45309;
  box-sizing: border-box;
  width: 100%;
  padding: 2px;
  border: 1px solid #8a6f3a;
  border-radius: 4px;
  background: linear-gradient(180deg, #4a3520 0%, #2a1a0e 50%, #4a3520 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 200, 130, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 1px 2px rgba(0, 0, 0, 0.4);
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.tv-rpg-progress-bar-track {
  position: relative;
  height: 18px;
  border-radius: 2px;
  overflow: hidden;
  background: linear-gradient(180deg, #0c0c10 0%, #17171d 100%);
}

.tv-rpg-progress-bar-fill {
  position: absolute;
  inset: 0;
  width: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.35);
  background: linear-gradient(180deg,
    var(--tv-rpg-progress-bar-top, #fde68aa6) 0%,
    var(--tv-rpg-progress-bar-mid, #f59e0b) 30%,
    var(--tv-rpg-progress-bar-bot, #b45309) 100%);
  transition: width 500ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* A slow shimmer across the fill. */
.tv-rpg-progress-bar-fill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.18) 50%, transparent 100%);
  background-size: 200% 100%;
  animation: tv-rpg-progress-bar-shimmer 5s linear infinite;
  pointer-events: none;
}

.tv-rpg-progress-bar-readout {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  text-shadow: 0 0 2px #000000, 0 0 3px rgba(0, 0, 0, 0.9), 0 1px 1px rgba(0, 0, 0, 0.8);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  pointer-events: none;
}

/* Health: the blood-red HP bar, on a darker red track. */
.tv-rpg-progress-bar--health {
  --tv-rpg-progress-bar-top: rgba(255, 130, 130, 0.55);
  --tv-rpg-progress-bar-mid: #dc2626;
  --tv-rpg-progress-bar-bot: #500a0a;
}

.tv-rpg-progress-bar--health .tv-rpg-progress-bar-track {
  background: linear-gradient(180deg, #1a0808 0%, #2a0e0e 100%);
}

.tv-rpg-progress-bar--mana {
  --tv-rpg-progress-bar-top: rgba(147, 197, 253, 0.65);
  --tv-rpg-progress-bar-mid: #3b82f6;
  --tv-rpg-progress-bar-bot: #1e3a8a;
}

.tv-rpg-progress-bar--experience {
  --tv-rpg-progress-bar-top: rgba(216, 180, 254, 0.65);
  --tv-rpg-progress-bar-mid: #a855f7;
  --tv-rpg-progress-bar-bot: #581c87;
}

.tv-rpg-progress-bar--stamina {
  --tv-rpg-progress-bar-top: rgba(110, 231, 183, 0.65);
  --tv-rpg-progress-bar-mid: #10b981;
  --tv-rpg-progress-bar-bot: #064e3b;
}

@keyframes tv-rpg-progress-bar-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tv-rpg-progress-bar-fill { transition: none; }
  .tv-rpg-progress-bar-fill::after { animation: none; }
}
```