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 ## 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 ```html
<status-indicator status="positive"> All systems operational </status-indicator> <status-indicator status="positive"> All systems operational </status-indicator>
<status-indicator status="negative"> Something's wrong </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="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 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 ### Result

4
index.html
View file

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

44
src/status-indicator.ts
View file

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