🟠 Colored circles that can pulse https://status-indicator.webcomponent.io

Find a file

Ayo 2a1096ab1e 2.1.0		2026-05-14 12:31:57 +02:00
.husky	chore: add husky post-commit auto push to gh & sh	2026-05-08 18:08:53 +02:00
public	refactor(site): move pico.css to public dir	2026-05-09 10:43:37 +02:00
src	feat: add types & source to distribution	2026-05-14 12:31:46 +02:00
.gitignore	Initial commit	2026-05-08 13:16:37 +02:00
index.html	feat(site): add paragraph to quick start	2026-05-14 09:54:59 +02:00
LICENSE	chore: update copyright year	2026-05-08 20:37:31 +02:00
package.json	2.1.0	2026-05-14 12:31:57 +02:00
pnpm-lock.yaml	feat: add types & source to distribution	2026-05-14 12:31:46 +02:00
pnpm-workspace.yaml	chore: update deps; setup allowBuild	2026-05-08 17:07:16 +02:00
README.md	chore: update readme with asides	2026-05-14 09:31:20 +02:00
screenshot.png	chore: update readme & screenshot	2026-05-08 19:42:58 +02:00
vite-lib.config.ts	feat: add types & source to distribution	2026-05-14 12:31:46 +02:00

README.md

<status-indicator>

Colored circles that can pulse. That's it. That's the component.

Quick Start using a CDN

Copy the following to your HTML page:

<script type="module" src="https://esm.sh/@ayo-run/status-indicator"></script>

<status-indicator pulse status="positive">
  All systems operational
</status-indicator>

See example on CodePen: https://codepen.io/ayo-run/pen/RNorXrK

Note

In this example, esm.sh bundles the base class together with the component. For most use cases, that is good enough but, still, "it depends". Copying the code will work just fine, but it woudn't hurt to read around about the trade-offs how bundling affects your application.

Installation via NPM

If you want to install the library as a node module, you can install the published package and the base class via NPM:

# using npm
npm install web-component-base @ayo-run/status-indicator

# or using pnpm
pnpm add web-component-base @ayo-run/status-indicator

Usage: Imports

Without a bundler that resolves node_module imports for you, you can use import maps:

<html>
  <head>
    <script type="importmap">
      {
        "imports": {
          "web-component-base": "./node_modules/web-component-base/dist/index.js",
          "status-indicator": "./node_modules/@ayo-run/status-indicator/dist/status-indicator.js"
        }
      }
    </script>
    <script type="module">
      import StatusIndicator from "status-indicator";
    </script>
  </head>
  <body>
    <!-- you can use the status-indicator component now -->
  </body>
</html>

Note

Using import maps can also work with the CDN: https://codepen.io/ayo-run/pen/emBdQRg

Usage: Attributes

1. `status` attribute

To indicate the status that determines the color of the circle, set the status attribute of the status-indicator component to any of the following values: positive, negative, active, or intermediary.

<status-indicator status="positive"> All systems operational </status-indicator>
<status-indicator status="negative"> Something's wrong </status-indicator>
<status-indicator status="active"> It's just fine; carry on </status-indicator>
<status-indicator status="intermediary"> Slow down... </status-indicator>
<status-indicator> Nothing matters </status-indicator>

2. `pulse` animation

You can add the pulse attribute to make the circle... pulse

<status-indicator pulse status="positive">
  All systems operational
</status-indicator>

Result

A project by Ayo