From 322e9dc3372ec4dc50f699284db3583525089159 Mon Sep 17 00:00:00 2001 From: Ayo Date: Fri, 8 May 2026 21:41:16 +0200 Subject: [PATCH] feat: implement pulse animation --- README.md | 16 +++++++++++++-- index.html | 4 ++-- src/status-indicator.ts | 44 ++++++++++++++++++++++++++++++----------- 3 files changed, 48 insertions(+), 16 deletions(-) diff --git a/README.md b/README.md index 4828fb5..2da23d7 100644 --- a/README.md +++ b/README.md @@ -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 All systems operational Something's wrong It's just fine; carry on - Nothing matters Slow down... + Nothing matters +``` + +### `pulse` animation + +You can add the `pulse` attribute to make the circle... pulse + +```html + + All systems operational + ``` ### Result diff --git a/index.html b/index.html index 9919fae..b9b0e77 100644 --- a/index.html +++ b/index.html @@ -21,7 +21,7 @@ status-indicator { font-family: 'Courier New', Courier, monospace; } - +
@@ -33,7 +33,7 @@

- + All systems operational
diff --git a/src/status-indicator.ts b/src/status-indicator.ts index b9d234a..3030101 100644 --- a/src/status-indicator.ts +++ b/src/status-indicator.ts @@ -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' - }} - > - - - - ` + marginRight: '0.05rem', + ...(this.props.pulse ? this.#pulseAnimationCSSRules : []) + }}> + + + + ${ + /** if pulse is set, add animation keyframes */ + this.props.pulse && html` + ` + }` } }