How to create send button with loader

A step-by-step guide on how to create send button with loader.

HTML

For HTML we need a button with two svgs and a text element.
First svg will be "paper-airplane" and will indicate the send button.

After clicking on this button, using javascript we'll remove the text element and add "rotate" animation (which we will create later using css) to icon, to indicate loading.

After sending is completed, we'll hide the "paper-airplane" icon and display the second one, the "check" icon, which is now hidden, since it has the opacity set to 0 (inline styling).

<button id="send_button" onclick="send()">
    <svg id="send_button_icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" width="12">
        <path stroke-linecap="round" stroke-linejoin="round" d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5" />
    </svg>
    <svg id="done_button_icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" style="opacity: 0;" width="0">
        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
    <span id="button_text">Send</span>
</button>

CSS

For CSS, first we need to style the button.

We'll align items using flexbox, set width to 80px and height to 30px, add a little transition, remove the border and set it;'s radius to 15px.

Now we'll set text color to white, background to light blue and cursor to pointer.

#send_button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    width: 80px;
    transition: .2s;
    border: none;
    border-radius: 15px;
    color: #fff;
    background-color: rgb(35, 194, 202);
    cursor: pointer;
}

Now we'll style the text.

We'll just align text to the end, set width to 35px and add a little transition.

#button_text {
    text-align: end;
    width: 35px;
    transition: .2s;
}

We'll also add transition to our svgs.

#send_button svg {
    transition: .2s;
}

And create an animation that rotates the element.

@keyframes rotate {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

Javascript

Using javascript, we'll create a "send" function, which is executed on button click.

First, we'll set loading (remove the text element and set rotation on icon) with "setLoading" function, and after two seconds, using setTimeout, we'll set our check icon to indicate that the process has completed, with "setDone" function.

function send() {
    setLoading();
    setTimeout(() => setDone(), 2000);
}

Now we'll create the "setLoading" function.

First we'll select the button element and decrease it's width to 30px and set cursor to default since it's no longer clickable.

Now we'll select the first icon (the "paper-airplane" icon) and set the rotate animation that we created earlier with css.

Lastly, we'll hide the text element by setting width and opacity to 0 and overflow to hidden. With this approach, we'll create a nice and smooth disappearing.

function setLoading() {
    let button = document.getElementById('send_button');
    button.style.width = '30px';
    button.style.cursor = 'default';

    let send_button_icon = document.getElementById('send_button_icon');
    send_button_icon.style.animation = 'rotate 0.7s infinite cubic-bezier(.16,.65,.65,.34)';

    let button_text = document.getElementById('button_text');
    button_text.style.overflow = 'hidden';
    button_text.style.width = '0px';
    button_text.style.opacity = '0';
}

And now we'll create the "seDone" function, to show that the sending has completed.

First we'll change button's background color and set it to light green.

Now we'll hide the first icon, by setting it's opacity and width to 0, transform scale to 0 and animation to none, to achieve the smooth disappearing.

And lastly, we'll display the second icon, "check" svg. We'll set it's width to 15px and opacity to 1.

function setDone() {
    let button = document.getElementById('send_button');
    button.style.backgroundColor = 'rgb(54, 225, 111)';

    let send_button_icon = document.getElementById('send_button_icon');
    send_button_icon.style.animation = 'none';
    send_button_icon.style.transform = 'scale(0)';
    send_button_icon.style.opacity = '0';
    send_button_icon.style.width = '0px';

    let done_button_icon = document.getElementById('done_button_icon');
    done_button_icon.style.width = '15px';
    done_button_icon.style.opacity = '1';
}

And that's it. Simple, huh?

Video tutorial

You can find the video with step-by-step guide (or play a bit in the playground) here.

Thank you for reading. ❤️

Comments

[rss2nse]

That was interesting one.. I want to send marks to google sheet by this button click.. How can i? imaine. I am having 45 text fields with filled marks, how could i send it? i am able to send via koular application but dont know from html