Button With Loading Animation On Click with CSS and JavaScript

In this tutorial we will see how to create Button With Loading Animation On Click with CSS and JavaScript. Pure CSS and JavaScript is used for this purpose, complete code is given.

Table of Contents

HTML Code

Take a look at the HTML code given below.


<button id="btn" class="login-button">Log In</button>

CSS Code

CSS code is given below.


<style>
*
{
    font-family: 'Barlow Condensed',sans-serif;
}
.login-button
{
    background-color: #0051A1;
    color: #fff;
    border: none;
    cursor: pointer;
    padding: 5px 25px;
    font-size: 16px;
    box-shadow: 0px 0px 2px 0px #000;
}
.icon
{
    margin-right: 5px;
    display: none;
}
.loading
{
    background-color: #014B94;
    color: #eee;
}
.loading .icon
{
    display: inline-block;
    color: #eee;
    animation: spin 2s linear infinite;
}
@keyframes spin
{
    0%
    {
    transform: rotate(0deg);
    }
    100%
    {
    transform: rotate(360deg);
    }
}
</style>

JavaScript Code

Take a look at the JavaScript Code given below.


<script>
document.getElementById('btn').addEventListener("click", function(){
    this.classList.add("loading");
    this.innerHTML = "↻Logging In..";
});
</script>

Demo

Check Demo

Video Tutorial

Watch our video tutorial on Button With Loading Animation On Click with CSS and JavaScript.