Status Dot Component
Some time ago, I came across a small UI component that used a dot to indicate a status. I found it to be a delightful little component worth building myself. Therefore, I went ahead and created it.
You can see the outcome in the following CodePen example.
This component offers several functionalities:
Customizable Colors and Sizes: The component can be configured with different colors and sizes for the dot, providing flexibility in design.
Animated State: When the component represents a live item, it can display an animated effect to indicate its real-time status.
- data-status Attribute: The component utilizes a data-status attribute to set the status of the item. Depending on the value of this attribute, the color of the dot will be adjusted accordingly:
- If data-status="live", the dot will be displayed in green.
- If data-status="offline", the dot will be shown in red.
By combining these features, the component becomes a versatile and visually informative element that can adapt to different scenarios and communicate the status of the item effectively.