waveterm/frontend/app/element/typingindicator.scss

// Copyright 2024, Command Line Inc.
// SPDX-License-Identifier: Apache-2.0

$dot-width: 11px;
$dot-color: var(--success-color);
$speed: 1.5s;

.typing {
    position: relative;
    height: $dot-width;

    span {
        content: "";
        animation: blink $speed infinite;
        animation-fill-mode: both;
        height: $dot-width;
        width: $dot-width;
        background: $dot-color;
        position: absolute;
        left: 0;
        top: 0;
        border-radius: 50%;

        &:nth-child(2) {
            animation-delay: 0.2s;
            margin-left: $dot-width * 1.5;
        }

        &:nth-child(3) {
            animation-delay: 0.4s;
            margin-left: $dot-width * 3;
        }
    }
}

@keyframes blink {
    0% {
        opacity: 0.1;
    }
    20% {
        opacity: 1;
    }
    100% {
        opacity: 0.1;
    }
}