SaveIndicator
The SaveIndicator component provides visual feedback for save operations using a bouncing success/error icon. It uses a slot to wrap any control (button, select, etc.) and positions the indicator next to it automatically. Exposed success() and error() methods trigger the animation.
Standalone (external trigger)
The indicator can also be used as a sibling element, triggered by any external control (no slot wrapping). Useful when the trigger and indicator need to sit in a flex container together.
Usage
Wrapping a control
Standalone sibling
API
Exposed Methods
| Method | Description |
|---|
| success() | Show a success (green check) indicator for 1.5 seconds |
| error() | Show an error (red x-mark) indicator for 1.5 seconds |
Slots
| Slot | Description |
|---|
| default | The control (button, select, etc.) to attach the indicator to |
CSS Classes
| Class | Description |
|---|
| .pankow-save-indicator-wrapper | Relative-positioned inline wrapper around the slotted content and indicator |
| .pankow-save-indicator | Indicator element (position: absolute, right: -1.5em) |
| .pankow-save-indicator.success | Sets color to --pankow-color-success |
| .pankow-save-indicator.error | Sets color to --pankow-color-danger |
Notes
- The animation duration is 0.5s with a 1.5s auto-hide timeout.
- Calling
success() or error() while the indicator is already visible restarts the animation immediately.
ankow