# @solid-aria/progress

> Primitives for building accessible progress bar component.

Latest version **0.0.2** (published 2022-07-15) · MIT license · 0 weekly downloads

## Install

```sh
npm install @solid-aria/progress
pnpm add @solid-aria/progress
yarn add @solid-aria/progress
bun add @solid-aria/progress
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2022-07-15 |
| First published | 2022-06-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 14.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 293 |
| Author | Fabien Marie-Louise |
| Maintainers | fabienml, davedbase |
| Keywords | solid, aria, headless, design, system, components |

## Links

- npm: https://www.npmjs.com/package/@solid-aria/progress
- Repository: https://github.com/solidjs-community/solid-aria
- Homepage: https://github.com/solidjs-community/solid-aria/tree/main/packages/progress#readme
- Issues: https://github.com/solidjs-community/solid-aria/issues
- npm.io page: https://npm.io/package/@solid-aria/progress

## Dependencies (6)

- [@solid-aria/i18n](https://npm.io/package/@solid-aria/i18n.md) ^0.2.0
- [@solid-aria/label](https://npm.io/package/@solid-aria/label.md) ^0.1.4
- [@solid-aria/types](https://npm.io/package/@solid-aria/types.md) ^0.1.4
- [@solid-aria/utils](https://npm.io/package/@solid-aria/utils.md) ^0.2.1
- [@solid-primitives/props](https://npm.io/package/@solid-primitives/props.md) ^2.1.7
- [@solid-primitives/utils](https://npm.io/package/@solid-primitives/utils.md) ^2.1.0

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@progress/kendo-vue-listbox](https://npm.io/package/@progress/kendo-vue-listbox.md) — 932 weekly downloads

## Recent versions

- 0.0.2 (latest) — 2022-07-15
- 0.0.1 — 2022-06-19

## README

<p>
  <img width="100%" src="https://assets.solidjs.com/banner?type=Aria&background=tiles&project=Progress" alt="Solid Aria - Progress">
</p>

# @solid-aria/progress

[![pnpm](https://img.shields.io/badge/maintained%20with-pnpm-cc00ff.svg?style=for-the-badge&logo=pnpm)](https://pnpm.io/)
[![turborepo](https://img.shields.io/badge/built%20with-turborepo-cc00ff.svg?style=for-the-badge&logo=turborepo)](https://turborepo.org/)
[![size](https://img.shields.io/bundlephobia/minzip/@solid-aria/progress?style=for-the-badge&label=size)](https://bundlephobia.com/package/@solid-aria/progress)
[![version](https://img.shields.io/npm/v/@solid-aria/progress?style=for-the-badge)](https://www.npmjs.com/package/@solid-aria/progress)
[![stage](https://img.shields.io/endpoint?style=for-the-badge&url=https%3A%2F%2Fraw.githubusercontent.com%2Fsolidjs-community%2Fsolid-primitives%2Fmain%2Fassets%2Fbadges%2Fstage-0.json)](https://github.com/solidjs-community/solid-aria#contribution-process)

Progress bars show either determinate or indeterminate progress of an operation over time.

- [`createProgressBar`](#createprogressbar) - Provides the accessibility implementation for a progress bar component.

## Installation

```bash
npm install @solid-aria/progress
# or
yarn add @solid-aria/progress
# or
pnpm add @solid-aria/progress
```

## `createProgressBar`

### Features

The `<progress>` HTML element can be used to build a progress bar, however it is very difficult to style cross browser. `createProgressBar` helps achieve accessible progress bars and spinners that can be styled as needed.

- Exposed to assistive technology as a progress bar via ARIA
- Labeling support for accessibility
- Internationalized number formatting as a percentage or value
- Determinate and indeterminate progress support

### How to use it

```tsx
import { AriaProgressBarProps, createProgressBar } from "@solid-aria/progress";
import { createMemo, Show } from "solid-js";

function ProgressBar(props: AriaProgressBarProps) {
  const { progressBarProps, labelProps, percentage } = createProgressBar(props);

  const barWidth = createMemo(() => `${Math.round(percentage() * 100)}%`);

  return (
    <div {...progressBarProps} style={{ width: "200px" }}>
      <div style={{ display: "flex", "justify-content": "space-between" }}>
        <Show when={props.label}>
          <span {...labelProps}>{props.label}</span>
          <span>{progressBarProps["aria-valuetext"]}</span>
        </Show>
      </div>
      <div style={{ height: "10px", background: "gray" }}>
        <div style={{ width: barWidth(), height: "10px", background: "orange" }} />
      </div>
    </div>
  );
}

function App() {
  return <ProgressBar label="Loading..." value={30} />;
}
```

### Indeterminate state

Progress bars can represent an indeterminate operation. They may also be used to represent progress visually as a circle rather than as a line. The following example shows an indeterminate progress bar visualized as a circular spinner using SVG.

```tsx
import { createProgressBar } from "@solid-aria/progress";

function Spinner() {
  const { progressBarProps } = createProgressBar({
    isIndeterminate: true,
    "aria-label": "Loading..."
  });

  const center = 16;
  const strokeWidth = 4;
  const r = 16 - strokeWidth;
  const c = 2 * r * Math.PI;
  const offset = c - (1 / 4) * c;

  return (
    <svg
      {...progressBarProps}
      width={32}
      height={32}
      viewBox="0 0 32 32"
      fill="none"
      stroke-width={strokeWidth}
    >
      <circle cx={center} cy={center} r={r} stroke="gray" />
      <circle
        cx={center}
        cy={center}
        r={r}
        stroke="orange"
        stroke-dasharray={c.toString()}
        stroke-dashoffset={offset}
      >
        <animateTransform
          attributeName="transform"
          type="rotate"
          begin="0s"
          dur="1s"
          from="0 16 16"
          to="360 16 16"
          repeatCount="indefinite"
        />
      </circle>
    </svg>
  );
}

function App() {
  return <Spinner />;
}
```

### Internationalization

#### Value formatting

`createProgressBar` will handle localized formatting of the value label for accessibility automatically. This is returned in the `aria-valuetext` prop in `progressBarProps`. You can use this to create a visible label if needed and ensure that it is formatted correctly. The number formatting can also be controlled using the `formatOptions` prop.

#### RTL

In right-to-left languages, the progress bar should be mirrored. Ensure that your CSS accounts for this.

## Changelog

All notable changes are described in the [CHANGELOG.md](./CHANGELOG.md) file.

---
_Source: https://npm.io/package/@solid-aria/progress · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._