ayo/status-indicator
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: implement pulse animation

Browse source
This commit is contained in:
ayo 2026-05-08 21:41:16 +02:00
parent 9c7aa20685
commit 322e9dc337
3 changed files with 48 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
README.md
View file

@ -25,14 +25,26 @@ 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.
### 1. `status` property
To indicate the status that determines the color of the circle, set the `status` property of the `status-indicator` component to any of the following: `positive`, `negative`, `active`, or `intermediary`.
```html
<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>
<status-indicator> Nothing matters </status-indicator>
```
### `pulse` animation
You can add the `pulse` attribute to make the circle... pulse
```html
<status-indicator status="positive" pulse>
All systems operational
</status-indicator>
```
### Result

4
index.html
View file

@ -21,7 +21,7 @@
status-indicator {
font-family: 'Courier New', Courier, monospace;
}
</style>
</style>
</head>
<body>
<header>
@ -33,7 +33,7 @@
</p>
</header>
<main>
<status-indicator status="positive">
<status-indicator status="positive" pulse>
All systems operational
</status-indicator>
<br />

44
src/status-indicator.ts
View file

@ -7,14 +7,24 @@ class StatusIndicator extends WebComponent {
static props = {
status: 'default',
pulse: false
}
#indicatorColor: any = {
default: [216, 226, 233],
active: [0, 149, 255],
positive: [75, 210, 143],
intermediary: [255, 170, 0],
negative: [255, 77, 77]
default: '216, 226, 233',
active: '0, 149, 255',
positive: '75, 210, 143',
intermediary: '255, 170, 0',
negative: '255, 77, 77'
}
#pulseAnimationCSSRules = {
animationName: 'pulse',
animationDuration: '2s',
animationTimingFunction: 'ease-in-out',
animationIterationCount: 'infinite',
animationDelay: '0',
animationFillMode: 'none'
}
get template(): any {
@ -26,13 +36,23 @@ class StatusIndicator extends WebComponent {
width: '10px',
height: '10px',
backgroundColor: `rgba(${this.#indicatorColor[this.props.status]})`,
marginRight: '0.05rem'
}}
></div>
<span class="status-indicator-label">
<slot></slot>
</span>
`
marginRight: '0.05rem',
...(this.props.pulse ? this.#pulseAnimationCSSRules : [])
}}> </div>
<span class="status-indicator-label"><slot></slot></span>
${
/** if pulse is set, add animation keyframes */
this.props.pulse && html`
<style>
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(${this.#indicatorColor[this.props.status]}, 0.5);}
70% { box-shadow: 0 0 0 10px rgba(${this.#indicatorColor[this.props.status]}, 0); }
100% { box-shadow: 0 0 0 0 rgba(${this.#indicatorColor[this.props.status]}, 0); }
}
</style>`
}`
}
}