mami/src/mami.js/ui/ping.jsx

const MamiPingIndicator = function(initialStrength) {
    const bars = [];
    const html = <div class="ping">
        <div class="ping-colour ping-colour-top"/>
        <div class="ping-colour ping-colour-bottom"/>
        <div class="ping-background"/>
        <div class="ping-antenna"/>
        <div class="ping-antenna-dot"/>
        <div class="ping-antenna-over ping-antenna-left"/>
        <div class="ping-antenna-over ping-antenna-right"/>
    </div>;

    for(let i = 1; i <= 3; ++i)
        bars.push(html.appendChild(<div class={`ping-bar ping-bar-${i}`}/>));

    let interval;

    const setStrength = strength => {
        if(typeof strength !== 'number')
            throw 'strength must be a number';

        if(strength < 0) {
            if(interval === undefined) {
                const cyclesMax = bars.length * 2;
                let cycles = -1;

                const updateCycle = () => {
                    let curCycle = ++cycles % cyclesMax;
                    if(curCycle > bars.length)
                        curCycle = cyclesMax - curCycle;

                    for(const i in bars)
                        bars[i].classList.toggle('ping-bar-on', curCycle === (parseInt(i) + 1));
                };

                interval = setInterval(updateCycle, 200);
                updateCycle();
            }
        } else {
            if(interval !== undefined) {
                clearInterval(interval);
                interval = undefined;
            }

            for(const i in bars)
                bars[i].classList.toggle('ping-bar-on', i < strength);
        }

        html.classList.toggle('ping-state-good', strength > 1);
        html.classList.toggle('ping-state-warn', strength == 1);
        html.classList.toggle('ping-state-poor', strength < 1);
    };

    if(typeof initialStrength !== 'number')
        initialStrength = bars.length;

    setStrength(initialStrength);

    return {
        getElement: () => html,
        setStrength: setStrength,
    };
};