Progress

a bar that fills in whole cells.

usage

scenario

example

code

import { Progress } from 'charcell/react';

export function ProgressExample() {
  return <Progress value={42} label="filling the gas can" showValue />;
}

<script setup lang="ts">
import { Progress } from 'charcell/vue';
</script>

<template>
  <Progress :value="42" label="filling the gas can" showValue />
</template>

<script lang="ts">
  import { Progress } from 'charcell/svelte';
</script>

<Progress value={42} label="filling the gas can" showValue />

<div
  class="CharcellProgress"
  role="progressbar"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-valuenow="42"
  aria-label="filling the gas can"
>
  <span class="CharcellProgress__label" aria-hidden="true"
    >filling the gas can</span
  ><span class="CharcellProgress__track"
    ><span
      class="CharcellProgress__fill"
      style="--charcell-progress--ratio: 0.42"
    ></span></span
  ><span class="CharcellProgress__value" aria-hidden="true">42%</span>
</div>

import { Progress } from 'charcell/react';

export function ProgressExample() {
  return <Progress value={0} label="filling the gas can" showValue />;
}

<script setup lang="ts">
import { Progress } from 'charcell/vue';
</script>

<template>
  <Progress :value="0" label="filling the gas can" showValue />
</template>

<script lang="ts">
  import { Progress } from 'charcell/svelte';
</script>

<Progress value={0} label="filling the gas can" showValue />

<div
  class="CharcellProgress"
  role="progressbar"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-valuenow="0"
  aria-label="filling the gas can"
>
  <span class="CharcellProgress__label" aria-hidden="true"
    >filling the gas can</span
  ><span class="CharcellProgress__track"
    ><span
      class="CharcellProgress__fill"
      style="--charcell-progress--ratio: 0"
    ></span></span
  ><span class="CharcellProgress__value" aria-hidden="true">0%</span>
</div>

import { Progress } from 'charcell/react';

export function ProgressExample() {
  return <Progress value={100} label="filling the gas can" showValue />;
}

<script setup lang="ts">
import { Progress } from 'charcell/vue';
</script>

<template>
  <Progress :value="100" label="filling the gas can" showValue />
</template>

<script lang="ts">
  import { Progress } from 'charcell/svelte';
</script>

<Progress value={100} label="filling the gas can" showValue />

<div
  class="CharcellProgress"
  role="progressbar"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-valuenow="100"
  aria-label="filling the gas can"
>
  <span class="CharcellProgress__label" aria-hidden="true"
    >filling the gas can</span
  ><span class="CharcellProgress__track"
    ><span
      class="CharcellProgress__fill"
      style="--charcell-progress--ratio: 1"
    ></span></span
  ><span class="CharcellProgress__value" aria-hidden="true">100%</span>
</div>

import { Progress } from 'charcell/react';

export function ProgressExample() {
  return <Progress label="filling the gas can" showValue />;
}

<script setup lang="ts">
import { Progress } from 'charcell/vue';
</script>

<template>
  <Progress label="filling the gas can" showValue />
</template>

<script lang="ts">
  import { Progress } from 'charcell/svelte';
</script>

<Progress label="filling the gas can" showValue />

<div
  class="CharcellProgress"
  role="progressbar"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-label="filling the gas can"
>
  <span class="CharcellProgress__label" aria-hidden="true"
    >filling the gas can</span
  ><span class="CharcellProgress__track"
    ><span
      class="CharcellProgress__fill"
      style="--charcell-progress--ratio: 0"
    ></span></span
  ><span class="CharcellProgress__value" aria-hidden="true">0%</span>
</div>

import { Progress } from 'charcell/react';

export function ProgressExample() {
  return <Progress value={42} label="filling the gas can" showValue={false} />;
}

<script setup lang="ts">
import { Progress } from 'charcell/vue';
</script>

<template>
  <Progress :value="42" label="filling the gas can" :showValue="false" />
</template>

<script lang="ts">
  import { Progress } from 'charcell/svelte';
</script>

<Progress value={42} label="filling the gas can" showValue={false} />

<div
  class="CharcellProgress"
  role="progressbar"
  aria-valuemin="0"
  aria-valuemax="100"
  aria-valuenow="42"
  aria-label="filling the gas can"
>
  <span class="CharcellProgress__label" aria-hidden="true"
    >filling the gas can</span
  ><span class="CharcellProgress__track"
    ><span
      class="CharcellProgress__fill"
      style="--charcell-progress--ratio: 0.42"
    ></span
  ></span>
</div>

as text

at rest

filling the gas can                  42%

props

valuenumber: How far along, between min and max; the fill snaps down to whole cells. Left out, the bar is indeterminate.
minnumber= 0: The value at an empty track.
maxnumber= 100: The value at a full track.
labelstring: Names the bar, and leads the row in the mid gray.
showValueboolean: Prints the whole percent after the track.

it also takes any other attribute of its <div>.