# @internetarchive/ia-activity-indicator

> Webcomponent ia-activity-indicator following open-wc recommendations

Latest version **1.0.0** (published 2026-04-29) · MIT license · 0 weekly downloads

## Install

```sh
npm install @internetarchive/ia-activity-indicator
pnpm add @internetarchive/ia-activity-indicator
yarn add @internetarchive/ia-activity-indicator
bun add @internetarchive/ia-activity-indicator
```

## Health

**Score 60/100 (C)** — status: active.

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

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2026-04-29 |
| First published | 2020-03-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 1.5 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | ia-activity-indicator |
| Maintainers | bfalling, mitraardron, vbanos, kngenie, iisa, cdrini, nsharma123, dualcnhq, latonv, ibnesayeed, tracey.pooh, jim-at-ia, jeffwklein, rebecca-shoptaw, jbuckner, dhallia |

## Links

- npm: https://www.npmjs.com/package/@internetarchive/ia-activity-indicator
- npm.io page: https://npm.io/package/@internetarchive/ia-activity-indicator

## Dependencies (1)

- [lit](https://npm.io/package/lit.md) ^2.8.0 || ^3.3.2

## Recent versions

- 1.0.0 (latest) — 2026-04-29
- 0.0.6-alpha.4 (canary) — 2025-01-17
- 0.0.5-alpha.1 (alpha) — 2023-04-20
- 0.0.6 — 2025-01-17
- 0.0.6-alpha.3 — 2025-01-16
- 0.0.6-alpha.2 — 2025-01-16
- 0.0.6-alpha.1 — 2025-01-16
- 0.0.5-alpha1 — 2023-08-07
- 0.0.5 — 2023-05-23
- 0.0.4 — 2023-03-06
- 0.0.4-alpha.1 — 2023-03-01
- 0.0.4-a1 — 2022-04-22
- 0.0.3 — 2022-04-20
- 0.0.2 — 2021-11-15
- 0.0.2-alpha.1 — 2021-11-10
- … 4 more at https://npm.io/package/@internetarchive/ia-activity-indicator/versions

## README

# IA Activity Indicator

A customizable activity indicator.

![Preview](./assets/preview-customize.gif "Preview")

## Installation
```bash
yarn add @internetarchive/ia-activity-indicator
```

## Usage
```html
<script type="module">
  import '@internetarchive/ia-activity-indicator';
</script>

<style>
ia-activity-indicator {
  width: 100px;
  height: 100px;
  display: block;
  --activityIndicatorLoadingDotColor: purple;
  --activityIndicatorLoadingRingColor: green;
  --activityIndicatorCheckmarkColor: green;
  --activityIndicatorCompletedRingColor: purple;
}
</style>

<ia-activity-indicator mode="processing"> <!-- or "complete" -->
</ia-activity-indicator>
```

## Linting with ESLint, Prettier, and Types
To scan the project for linting errors, run
```bash
yarn run lint
```

You can lint with ESLint and Prettier individually as well
```bash
yarn run lint:eslint
```
```bash
yarn run lint:prettier
```

To automatically fix many linting errors, run
```bash
yarn run format
```

You can format using ESLint and Prettier individually as well
```bash
yarn run format:eslint
```
```bash
yarn run format:prettier
```

## Testing with Karma
To run the suite of karma tests, run
```bash
yarn run test
```

To run the tests in watch mode (for <abbr title="test driven development">TDD</abbr>, for example), run

```bash
yarn run test:watch
```

## Demoing with Storybook
To run a local instance of Storybook for your component, run
```bash
yarn run storybook
```

To build a production version of Storybook, run
```bash
yarn run storybook:build
```


## Tooling configs

For most of the tools, the configuration is in the `package.json` to reduce the amount of files in your project.

If you customize the configuration a lot, you can consider moving them to individual files.

## Local Demo with `es-dev-server`
```bash
yarn start
```
To run a local development server that serves the basic demo located in `demo/index.html`

---
_Source: https://npm.io/package/@internetarchive/ia-activity-indicator · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._