How can I make an inventory status dot flash and adjust its padding?

Store Design
1

Hi, I seen bunch of sites putting a beutiful red/green living dot, I have managed to put on mine too and found a way to change the text for in stock… but I can’t make her look like she is moving like others did.

How can I make the dot look flashing and change the padding of this section?

I would like to not share my site please

2

Add a CSS class to your dot element. For example, if your dot element is an tag with a class of “dot”, you could add a “pulse” class like this:

Define the “pulse” class in your CSS. You can use the following code as a starting point:

.pulse {
    animation-name: pulse;
    animation-duration: 1s;
    animation-timing-function: ease-out;
    animation-iteration-count: infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

This will create an animation that scales the dot up to 1.2x its original size, then back down to its original size over the course of 1 second. The animation will repeat infinitely.
3

Hi, thank you for your answer, but can you please guide me how to add these codes step by steps please(I am using “Dawn” theme)?

I have inspected the dot of the inventory status and it looks like this:

In stock, ready to ship