pulsating_dot.scss

TLDR

The pulsating_dot.scss file contains the styling for a pulsating dot component. It uses CSS animation to create the pulsation effect.

Classes

.pulsating_dot

This class is used to style the pulsating dot component. It sets the position, display, alignment, margin, and cursor properties. The dot itself is created using the ::before and ::after pseudo-elements and is styled with a background color, width, height, and border-radius.

Keyframes

pulse1

This keyframe animation defines the pulsation effect for the dot. It starts by setting the opacity and scale of the dot to 1, then gradually increases the scale to 2.5 while decreasing the opacity. It holds this state for 80% of the animation duration before reaching a final state where the opacity is 0 and the scale is 2.5.

pulse2

This keyframe animation defines a slightly different pulsation effect for the dot. It starts by setting the opacity and scale of the dot to 1, then maintains this state for 30% of the animation duration. Finally, it changes the opacity to 0 and the scale to 2.5.

.pulsating_dot {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    cursor: pointer;

    &,
    &::before,
    &::after {
        width: 12px;
        height: 12px;
        background-color: #3db887;
        border-radius: 50%;
    }

    &::before,
    &::after {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        content: '';
    }

    &::after {
        animation: pulse1 2s ease 0s infinite;
    }

    &::before {
        animation: pulse2 2s ease 0s infinite;
    }
}

@keyframes pulse1 {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    80% {
        opacity: 0;
        transform: scale(2.5);
    }

    100% {
        opacity: 0;
        transform: scale(2.5);
    }
}

@keyframes pulse2 {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    30% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(2.5);
    }
}