Yoummday Light Light Dark System

Stat Progress

<sl-stat-progress> | SlStatProgress
Since 2.0 stable

Stat Progress displays statistics with a progress bar in a card format.

Examples

Basic Usage

Use stat progress cards to display key metrics with visual progress indicators.

Shift Fulfillment 1,926/2,106 spots Talent Booking Rate 134/147 talents Talent Cancellations 93/1,926 spots 
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem;">
  <sl-stat-progress variant="success" icon="lucide:chart-pie" value="91" value-text="91%">
    <span slot="title">Shift Fulfillment</span>
    <span slot="info">1,926/2,106 spots</span>
  </sl-stat-progress>

  <sl-stat-progress variant="info" icon="lucide:chart-pie" value="89" value-text="89%">
    <span slot="title">Talent Booking Rate</span>
    <span slot="info">134/147 talents</span>
  </sl-stat-progress>

  <sl-stat-progress variant="danger" icon="lucide:chart-pie" value="5" value-text="5%">
    <span slot="title">Talent Cancellations</span>
    <span slot="info">93/1,926 spots</span>
  </sl-stat-progress>
</div>

import SlStatProgress from '@yoummday/ymmd-shoelace/dist/react/stat-progress';

const App = () => (
  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem;">
    <SlStatProgress variant="success" icon="lucide:chart-pie" value={91} valueText="91%">
      <span slot="title">Shift Fulfillment</span>
      <span slot="info">1,926/2,106 spots</span>
    </SlStatProgress>

    <SlStatProgress variant="info" icon="lucide:chart-pie" value={89} valueText="89%">
      <span slot="title">Talent Booking Rate</span>
      <span slot="info">134/147 talents</span>
    </SlStatProgress>

    <SlStatProgress variant="danger" icon="lucide:chart-pie" value={5} valueText="5%">
      <span slot="title">Talent Cancellations</span>
      <span slot="info">93/1,926 spots</span>
    </SlStatProgress>
  </div>
);

Variants

Use different variants to indicate the nature of the statistic.

Success Rate Information Warning Level Critical Issues Neutral Status 
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem;">
  <sl-stat-progress variant="success" icon="lucide:chart-pie" value="85" value-text="85%">
    <span slot="title">Success Rate</span>
  </sl-stat-progress>

  <sl-stat-progress variant="info" icon="lucide:chart-pie" value="70" value-text="70%">
    <span slot="title">Information</span>
  </sl-stat-progress>

  <sl-stat-progress variant="warning" icon="lucide:chart-pie" value="60" value-text="60%">
    <span slot="title">Warning Level</span>
  </sl-stat-progress>

  <sl-stat-progress variant="danger" icon="lucide:chart-pie" value="25" value-text="25%">
    <span slot="title">Critical Issues</span>
  </sl-stat-progress>

  <sl-stat-progress variant="neutral" icon="lucide:chart-pie" value="50" value-text="50%">
    <span slot="title">Neutral Status</span>
  </sl-stat-progress>
</div>

import SlStatProgress from '@yoummday/ymmd-shoelace/dist/react/stat-progress';

const App = () => (
  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem;">
    <SlStatProgress variant="success" icon="lucide:chart-pie" value={85} valueText="85%">
      <span slot="title">Success Rate</span>
    </SlStatProgress>

    <SlStatProgress variant="info" icon="lucide:chart-pie" value={70} valueText="70%">
      <span slot="title">Information</span>
    </SlStatProgress>

    <SlStatProgress variant="warning" icon="lucide:chart-pie" value={60} valueText="60%">
      <span slot="title">Warning Level</span>
    </SlStatProgress>

    <SlStatProgress variant="danger" icon="lucide:chart-pie" value={25} valueText="25%">
      <span slot="title">Critical Issues</span>
    </SlStatProgress>

    <SlStatProgress variant="neutral" icon="lucide:chart-pie" value={50} valueText="50%">
      <span slot="title">Neutral Status</span>
    </SlStatProgress>
  </div>
);

With Additional Info

Add contextual information using the info slot.

Revenue Growth Compared to last month Task Completion Due by end of week Documentation Coverage All public APIs 
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem;">
  <sl-stat-progress variant="success" icon="lucide:chart-pie" value="95" value-text="95%">
    <span slot="title">Revenue Growth</span>
    <span slot="info">Compared to last month</span>
  </sl-stat-progress>

  <sl-stat-progress variant="warning" icon="lucide:chart-pie" value="67" value-text="67%">
    <span slot="title">Task Completion</span>
    <span slot="info">Due by end of week</span>
  </sl-stat-progress>

  <sl-stat-progress variant="neutral" icon="lucide:chart-pie" value="42" value-text="42%">
    <span slot="title">Documentation Coverage</span>
    <span slot="info">All public APIs</span>
  </sl-stat-progress>
</div>

import SlStatProgress from '@yoummday/ymmd-shoelace/dist/react/stat-progress';

const App = () => (
  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem;">
    <SlStatProgress variant="success" icon="lucide:chart-pie" value={95} valueText="95%">
      <span slot="title">Revenue Growth</span>
      <span slot="info">Compared to last month</span>
    </SlStatProgress>

    <SlStatProgress variant="warning" icon="lucide:chart-pie" value={67} valueText="67%">
      <span slot="title">Task Completion</span>
      <span slot="info">Due by end of week</span>
    </SlStatProgress>

    <SlStatProgress variant="neutral" icon="lucide:chart-pie" value={42} valueText="42%">
      <span slot="title">Documentation Coverage</span>
      <span slot="info">All public APIs</span>
    </SlStatProgress>
  </div>
);

Without Progress Bar

Hide the progress bar using the hide-progress attribute.

Achievement Rate Customer Satisfaction 
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem;">
  <sl-stat-progress variant="success" icon="lucide:chart-pie" value="92" value-text="92%" hide-progress>
    <span slot="title">Achievement Rate</span>
  </sl-stat-progress>

  <sl-stat-progress variant="info" icon="lucide:chart-pie" value="78" value-text="78%" hide-progress>
    <span slot="title">Customer Satisfaction</span>
  </sl-stat-progress>
</div>

import SlStatProgress from '@yoummday/ymmd-shoelace/dist/react/stat-progress';

const App = () => (
  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem;">
    <SlStatProgress variant="success" icon="lucide:chart-pie" value={92} valueText="92%" hideProgress>
      <span slot="title">Achievement Rate</span>
    </SlStatProgress>

    <SlStatProgress variant="info" icon="lucide:chart-pie" value={78} valueText="78%" hideProgress>
      <span slot="title">Customer Satisfaction</span>
    </SlStatProgress>
  </div>
);

Progress Bar Labels

Display values inside the progress bar to show current and remaining amounts. The left label (centered in the colored part) shows the filled amount, and the right label (centered in the gray part) shows the remaining amount.

Talent Recruitment Target: 200 talents Shift Coverage This week’s bookings Task Progress Due this month 
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem;">
  <sl-stat-progress variant="success" icon="lucide:chart-pie" value="75" value-text="75%" progress-right-label="50">
    <span slot="title">Talent Recruitment</span>
    <span slot="info">Target: 200 talents</span>
  </sl-stat-progress>

  <sl-stat-progress variant="info" icon="lucide:chart-pie" value="60" value-text="60%" progress-right-label="80">
    <span slot="title">Shift Coverage</span>
    <span slot="info">This week's bookings</span>
  </sl-stat-progress>

  <sl-stat-progress variant="warning" icon="lucide:chart-pie" value="45" value-text="45%" progress-right-label="55">
    <span slot="title">Task Progress</span>
    <span slot="info">Due this month</span>
  </sl-stat-progress>
</div>

import SlStatProgress from '@yoummday/ymmd-shoelace/dist/react/stat-progress';

const App = () => (
  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem;">
    <SlStatProgress variant="success" icon="lucide:chart-pie" value={75} valueText="75%" progressRightLabel="50">
      <span slot="title">Talent Recruitment</span>
      <span slot="info">Target: 200 talents</span>
    </SlStatProgress>

    <SlStatProgress variant="info" icon="lucide:chart-pie" value={60} valueText="60%" progressRightLabel="80">
      <span slot="title">Shift Coverage</span>
      <span slot="info">This week's bookings</span>
    </SlStatProgress>

    <SlStatProgress variant="warning" icon="lucide:chart-pie" value={45} valueText="45%" progressRightLabel="55">
      <span slot="title">Task Progress</span>
      <span slot="info">Due this month</span>
    </SlStatProgress>
  </div>
);

Card Variants

Use the card-variant property to change the card styling.

Borderless: Removes border and shadow, uses a primary-colored background. Transparent: Removes background, border, shadow, and hover effects - perfect for custom layouts.

Success Rate Borderless with background Completion Transparent, no background Task Progress Clean minimal style 
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem;">
  <sl-stat-progress variant="success" icon="lucide:chart-pie" value="95" value-text="95%" card-variant="borderless">
    <span slot="title">Success Rate</span>
    <span slot="info">Borderless with background</span>
  </sl-stat-progress>

  <sl-stat-progress variant="info" icon="lucide:chart-pie" value="88" value-text="88%" card-variant="transparent">
    <span slot="title">Completion</span>
    <span slot="info">Transparent, no background</span>
  </sl-stat-progress>

  <sl-stat-progress variant="warning" icon="lucide:chart-pie" value="67" value-text="67%" card-variant="transparent">
    <span slot="title">Task Progress</span>
    <span slot="info">Clean minimal style</span>
  </sl-stat-progress>
</div>

import SlStatProgress from '@yoummday/ymmd-shoelace/dist/react/stat-progress';

const App = () => (
  <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem;">
    <SlStatProgress variant="success" icon="lucide:chart-pie" value={95} valueText="95%" cardVariant="borderless">
      <span slot="title">Success Rate</span>
      <span slot="info">Borderless with background</span>
    </SlStatProgress>

    <SlStatProgress variant="info" icon="lucide:chart-pie" value={88} valueText="88%" cardVariant="transparent">
      <span slot="title">Completion</span>
      <span slot="info">Transparent, no background</span>
    </SlStatProgress>

    <SlStatProgress variant="warning" icon="lucide:chart-pie" value={67} valueText="67%">
      <span slot="title">Task Progress</span>
      <span slot="info">Clean minimal style</span>
    </SlStatProgress>
  </div>
);

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

Script Import Bundler React

To import this component from the CDN using a script tag:

<script type="module" src="https://v2-61-1-JIRA-YMM-4317-0.yoummday-theme.pages.dev/components/stat-progress/stat-progress.js"></script>

To import this component from the CDN using a JavaScript import:

import 'https://v2-61-1-JIRA-YMM-4317-0.yoummday-theme.pages.dev/components/stat-progress/stat-progress.js';

To import this component using a bundler:

import '@yoummday/ymmd-shoelace/dist/components/stat-progress/stat-progress.js';

To import this component as a React component:

import SlStatProgress from '@yoummday/ymmd-shoelace/dist/react/stat-progress';

Slots

Name Description
value The main statistic value (e.g., percentage or number). Optional if value-text is provided.
title The title/label for the statistic.
info Additional information or subtitle text.

Learn more about using slots.

Properties

Name Description Reflects Type Default
icon The icon name to display. string ''
variant The variant affects the icon color and progress bar color. StatProgressVariant 'success'
cardVariant
card-variant 		The card variant affects the card styling. CardVariant 'default'
value The progress value as a percentage (0–100). number 0
valueText
value-text 		The text to display as the main value (e.g., “75%” or “150/200″). string ''
progressRightLabel
progress-right-label 		Label to show on the right side inside the progress bar (e.g., “55” for remaining). number 0
hideProgress
hide-progress 		When true, hides the progress bar section. boolean false
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Custom Properties

Name Description Default
--icon-color The color of the icon.
--icon-background The background color of the icon container.
--title-color The color of the title text.
--value-color The color of the value text.
--info-color The color of the info text.
--card-background The background color of the card.
--card-border-color The border color of the card.

Learn more about customizing CSS custom properties.

Parts

Name Description
base The component’s base wrapper (card).
header The header section with icon and content.
icon-container The container for the icon.
content The container for title and value.
title The title text.
value The main value/statistic.
info The additional info text.
progress The progress bar container.
progress-wrapper The wrapper for progress bar and numbers.
progress-numbers The container for the numeric values below progress.

Learn more about customizing CSS parts.