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

Find a file

Ayo 7e8cdee7df chore: separate build:lib script		2026-05-08 19:55:33 +02:00
.husky	chore: add husky post-commit auto push to gh & sh	2026-05-08 18:08:53 +02:00
src	feat: export default class constructor	2026-05-08 19:34:15 +02:00
.gitignore	Initial commit	2026-05-08 13:16:37 +02:00
index.html	feat(site): footer link to ayo.ayco.io	2026-05-08 19:26:13 +02:00
package.json	chore: separate build:lib script	2026-05-08 19:55:33 +02:00
pico.min.css	feat(site): use pico css; content safe center	2026-05-08 19:23:45 +02:00
pnpm-lock.yaml	chore: separate build:lib script	2026-05-08 19:55:33 +02:00
pnpm-workspace.yaml	chore: update deps; setup allowBuild	2026-05-08 17:07:16 +02:00
README.md	chore: update readme & screenshot	2026-05-08 19:42:58 +02:00
screenshot.png	chore: update readme & screenshot	2026-05-08 19:42:58 +02:00
vite-lib.config.ts	chore: separate build:lib script	2026-05-08 19:55:33 +02:00

README.md

<status-indicator> web component

Circles with colors. That's it. That's the component.

Quick usage via CDN

Inside your HTML <head>:

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

Installation

# using npm
npm install @ayo-run/status-indicator

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

Usage

Set the status property of the status-indicator component to any of the following: positive, negative, active, 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> Nothing matters </status-indicator>
<status-indicator status="intermediary"> Slow down... </status-indicator>

Result

A project by Ayo