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;
}
-
+
-
+
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`
+ `
+ }`
}
}