How to overlay the animation of loading into a div?

Question

all right with you? I am creating a form where by clicking on any of the buttons I would like an animation to load. But when clicking it overlap the div in which the form is inserted.

I wonder how I do to leave the animation under the buttons when clicked.

Follow the code I’m developing.

    .sessao00{
        padding-left: 5px;
        margin-left: 5px;
        background-color: #ffffff;
        color: #000000;
        width: 200px;
        height: 335px;
        border-radius: 3px;
        box-shadow: 3px 3px 3px #8998d3a2;
    }



.carregar-animacao {
        animation: is-rotating 1s infinite;
        border: 6px solid #000;
        border-radius: 50%;
        border-top-color: #ffffff;
        width: 30px;
        height: 30px;
        margin-top: 10px;
        margin-left: 50px;
        bottom: 10px;
    }

I apologize if the code is too clumsy.

Answer 1

Next question remember to put your complete code, you didn’t send your HTML.

Possible solution

Just change the text inside your button using JS when you click it, and create a condition for the button to return with its original text.

Take a look at the fiddle below:

https://jsfiddle.net/15ebrLnc/