Progress

Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.

50%

Props

Features

💬 Assistive reading technology support

Usage

Builder
Component

<script lang="ts">
  import { Progress } from "melt";

  const progress = new Progress();
</script>

<div {...progress.root}>
  <div {...progress.progress} />
</div>

<style>
  [data-melt-progress-root] {
    height: 1.5rem;
    width: 300px;
  }

  [data-melt-progress-progress] {
    transform: translateX(calc(var(--progress) * -1));
  }
</style>

<script lang="ts">
  import { Progress } from "melt/components";
</script>

<Progress>
  {#snippet children(progress)}
    <div {...progress.root}>
      <div {...progress.progress} />
    </div>
  {/snippet}
</Progress>

<style>
  [data-melt-progress-root] {
    height: 1.5rem;
    width: 300px;
  }

  [data-melt-progress-progress] {
    transform: translateX(calc(var(--progress) * -1));
  }
</style>

API Reference

Constructor Props

The props that are passed when calling

new Progress()

export type ProgressProps = {
  /**
   * The value for the progress.
   *
   * @default undefined
   */
  value?: MaybeGetter<number | undefined>;

  /**
   * The maximum value of the progress.
   *
   * @deafult 100
   */
  max?: MaybeGetter<number | undefined>;

  /**
   * The callback invoked when the value of the progress changes.
   */
  onValueChange?: (value: number) => void;
};

export type ProgressProps = {
  /**
   * The value for the progress.
   *
   * @default undefined
   */
  value?: MaybeGetter<number | undefined>;

  /**
   * The maximum value of the progress.
   *
   * @deafult 100
   */
  max?: MaybeGetter<number | undefined>;

  /**
   * The callback invoked when the value of the progress changes.
   */
  onValueChange?: (value: number) => void;
};

Properties

The properties returned from

new Progress()

max
```
number
```
```
number
```
value
```
number
```
```
number
```

root

{
  "data-melt-progress-root": string
  value: number
  max: number
  role: string
  "aria-valuemin": number
  "aria-valuemax": number
  "aria-valuenow": number
  "data-value": number
  "data-state": string
  "data-max": number
}

{
  "data-melt-progress-root": string
  value: number
  max: number
  role: string
  "aria-valuemin": number
  "aria-valuemax": number
  "aria-valuenow": number
  "data-value": number
  "data-state": string
  "data-max": number
}

Spread attributes for the Progress root element.

progress

{
  "data-melt-progress-progress": string
  style: `--progress: ${string}; --neg-progress: ${string}`
}

Spread attributes for the Progress percentage element. Provides a --progress CSS variable that can be used to style the progress:

transform: translateX(calc(var(--progress) * -1));