🟠 Colored circles that can pulse
https://status-indicator.webcomponent.io
| .husky | ||
| public | ||
| src | ||
| .gitignore | ||
| index.html | ||
| LICENSE | ||
| package.json | ||
| pnpm-lock.yaml | ||
| pnpm-workspace.yaml | ||
| README.md | ||
| screenshot.png | ||
| vite-lib.config.ts | ||
<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>
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
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