# <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: ```html All systems operational ``` ## Installation via NPM If you want to install the library as a node module, you can install the [published package](https://npmx.dev/@ayo-run/status-indicator) and the [base class](https://webcomponent.io) via NPM: ```bash # using npm npm install web-component-base @ayo-run/status-indicator # or using pnpm pnpm add web-component-base @ayo-run/status-indicator ``` ## Usage Without a bundler that resolves `node_module` imports for you, you can use [import maps](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script/type/importmap): ```html ``` ## 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`. ```html All systems operational Something's wrong It's just fine; carry on Slow down... Nothing matters ``` ### 2. `pulse` animation You can add the `pulse` attribute to make the circle... pulse ```html All systems operational ``` ## Result ![screenshot](./screenshot.png) --- A project by _Ayo_