Ping

A radar-style status dot that emits expanding, fading rings behind a solid center. Ideal for live, online or realtime indicators on dashboards. The effect is purely decorative, so it is marked aria-hidden and pairs well with a text label.

Live

The rings are driven entirely by CSS keyframes. When prefers-reduced-motion is set the rings are removed and only the solid dot remains.

Props

color?: "gray" | "primary" | "danger" | "info" | "success" | "warning"
The color of the dot and its ping, mapped to the matching Flux color token.
Default: success

size?: number
The diameter of the dot in pixels.
Default: 9

duration?: number
The length of one ping cycle in seconds.
Default: 1.4

Examples

Statuses

Combine differently colored pings with a label to build a compact service status list.

Preview

API gateway

Operational

Background jobs

Degraded

Payments

Outage

Code

<template>
    <FluxFlex
        direction="vertical"
        :gap="15">
        <FluxFlex
            v-for="service in services"
            :key="service.name"
            align="center"
            direction="horizontal"
            justify="between">
            <FluxFlex
                align="center"
                direction="horizontal"
                :gap="9">
                <FluxVisualPing :color="service.color"/>

                <span style="font-weight: 500;">{{ service.name }}</span>
            </FluxFlex>

            <span style="color: var(--gray-500);">{{ service.status }}</span>
        </FluxFlex>
    </FluxFlex>
</template>

<script
    lang="ts"
    setup>
    import { FluxFlex } from '@flux-ui/components';
    import { FluxVisualPing } from '@flux-ui/visuals';

    const services = [
        {name: 'API gateway', status: 'Operational', color: 'success' as const},
        {name: 'Background jobs', status: 'Degraded', color: 'warning' as const},
        {name: 'Payments', status: 'Outage', color: 'danger' as const}
    ];
</script>