Easily Create a Button Spinner in Javascript & CSS

Adding a spinner to inform the user to wait is a great UX tool. It can be used on buttons or other elements to educate the user about a possible wait time. The best part is that you don’t need another library to install to be able to do it. It’s something you can accomplish with some basic JavaScript and CSS. Below is everything you need to add a spinner to your next project.

1. HTML

Here’s the HTML for the example button spinner:


<!DOCTYPE html>
<html>
<title>Submit Button Spinner

<head>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <button id="submit_btn">
        <pan>Submit Form</span>
        <div class="spinner"></div>
    </button>
    <script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
    <script src="scripts.js"></script>
</body>

</html>

2. CSS

Here’s the CSS:


button {
    border: none;
    width: 200px;
    height: 50px;
    background-color: rgb(191, 4, 191);
    border-radius: 5px;
    color: white;

    font-family: Avenir;
    font-weight: bold;
    font-size: 1em;
    cursor: pointer;
    transition: 0.5s;

    display: flex;
    align-items: center;
    justify-content: center;
}

button:hover {
    background-color: rgb(128, 4, 128);
}

button .spinner {
    display: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 6px solid rgba(0, 0, 0, 0.25);
    border-right-color: white;
    animation: rotateBorder 1s linear infinite;
}

@keyframes rotateBorder {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(365deg);
    }
}

3. JavaScript

Here’s the JavaScript:


$(function() {
    $('#submit_btn').click(function() {
        $(this).find('span')
            .fadeOut(400);
        $(this).find('.spinner')
            .delay(400)
            .fadeIn(400);
    });
});

Conclusion

Watch me walk through all of these steps in action on my YouTube Channel:

Happy Coding!

~ Derek Codes

Menu