Back to blog
Creating a button with loading animation on click step-by-step

Creating a button with loading animation on click step-by-step

Hiring designer
9 min read

The digital world is incredibly fast-paced. New trends appear here and there, and some of them become outdated in months. What stays unchanged is that the user experience is paramount. Users expect your app to be attractive, intuitive, and responsive. 

To achieve this, consider upgrading the buttons in your app — create a submit button with loading animation on click. First, it looks adorable. Second, it gives your user much more information about what will happen next. This animation lets the user understand that they are interacting with an app and that their request has been accepted and is being processed. You can even hint at how long they have to wait to move to the next step.

Adding animation to the button involves a combination of HTML, CSS, and JavaScript. The concept is the following: when a user clicks the button, its appearance changes to demonstrate something is happening. Once the operation is finished, the button returns to its original state.

In this article, we explain how to add animation on a button click in JavaScript step by step. As you will see, it's an easy but rewarding process. We at Arounda have experience working with apps of different types and complexity and know how to make them more intuitive and user-friendly with animation. 

OnClick Button Loading Animation CSS

Let's start with the CSS for the loading animation. It can look like a spinning spinner, progress bar, or something else. Here is a basic example of creating a spinner:

/* CSS for the loading spinner */ .button-loader { position: relative; overflow: hidden; } .button-loader:after { content: ""; position: absolute; top: 50%; left: 50%; width: 24px; height: 24px; margin: -12px 0 0 -12px; border: 4px solid #fff; border-top: 4px solid #3498db; border-radius: 50%; animation: spin 1s linear infinite; box-sizing: border-box; transform-origin: 50% 50%; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

In the code above, we create a spinning loader using CSS animations. You can customize the loader's appearance by adjusting properties like `border`, `border-top`, and `border-radius`.

Likewise, you can define line-height, background, color-property, text-shadow, position, transition, and box-shadow with corresponding values. 


Now, add the HTML structure for our button and loading animation. Here is an example of a standard HTML document structure with a <!DOCTYPE> declaration, <html>, <head>, and <body> elements.

Loading Button Example

This part is very intuitive. The most important thing here is to include your CSS file (styles.css) and JavaScript file (script.js) as external resources. Double-check you’ve done it before moving forward. 


The next step is adding the CSS to style the button. For example, let’s write a CSS code to create the button with a simple color scheme and hover effect.

/* CSS for the button */ #loading-button { padding: 10px 20px; background-color: #3498db; color: #fff; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s ease; } #loading-button:hover { background-color: #2980b9; }

How to Make The Button Work

After creating the HTML and CSS for the animated button, let’s make the button actually perform after a click. To do so, use JavaScript. The following is the complete JS function to animate the button. Start by creating a JavaScript file (script.js) and including it in your HTML document:

// JavaScript for the loading button const button = document.getElementById("loading-button"); button.addEventListener("click", () => { // Disable the button to prevent multiple clicks button.disabled = true; // Add the loading animation CSS class button.classList.add("button-loader"); // Simulate an asynchronous task (replace this with your actual task) setTimeout(() => { // Re-enable the button button.disabled = false; // Remove the loading animation CSS class button.classList.remove("button-loader"); }, 2000); // Simulated 2-second task });

In this example of JavaScript code, we use the `addEventListener` method to listen for a click event on the button. We deactivate the loading button when clicked to prevent multiple submissions. Then add the `loading` class to apply the animation and simulate an asynchronous task using `setTimeout`. 

When the task is completed, re-enable the button and remove the `loading` class to take it to its previous state.

In Conclusion

Adding a loading animation to a button click makes your application’s interface more interactive, intuitive, and stylish. It is an effortless yet effective way to bring user experience to the next level. 

You don’t have to spend much time on this; from the tech side, you need HTML, CSS, and JavaScript. Loading animation on a button click immediately turns a usual design element into a nice-looking and well-performing one. Feel free to use the code from above as a reference or inspiration. Replace the simulated asynchronous task in the JavaScript code with your actual task. It might be submitting a form or whatever your functionality offers.

Incorporate these techniques and make your interface as user-friendly and responsive as possible. If you have questions or clarifications or would rather entrust your design decisions to a partner with profound expertise, contact us


Get for freeLearn more

Hire a caring and experienced developer for your project.

Contact Us

Have a project in your mind?
Let’s communicate

Get estimation
Table of contents
  1. Text Link
9 min read
Hire a caring and experienced developer for your project.
Contact Us

FAQ on UI/UX design services

How do you add a loading animation to a button click?

Adding loading animation to a button click starts with building the HTML structure. First and foremost, create an HTML button element to which you want to add the loading animation.Then, choose the CSS for the loading animation. Write CSS code to define the appearance of the animation: spinner, progress bar, or whatever your creativity and imagination are willing to create.Move to styling the button. Add CSS styles, including the button's appearance, color, and hover effects.Write JavaScript code. When the button is clicked, you have to turn it off so there is no chance of multiple clicks. Apply the loading animation CSS class and perform the desired action (send the form, for example).Simulate an asynchronous task. This process could involve using `setTimeout` in your JavaScript code to delay for a few seconds. Or you can replace it with your actual asynchronous task.At the end, re-enable the button. You must do it to allow further interactions when the task is completed. Don’t forget to remove the loading animation CSS class.

How do I create a loading button in HTML?

As the first step, define the HTML structure for the button. This way, you get a button element with the ID loading-button and a class button-loader for styling and animation.Then, incorporate CSS for the button and loading animation. This includes styling the button's appearance and creating animations for the button effects on click.Once this is done, integrate JavaScript functionality. Create a JavaScript function and turn off the button to prevent multiple clicks. Add the loading animation CSS class to the button. Simulate an asynchronous task (e.g., using `setTimeout`). Re-enable the button and remove the loading animation class when the task is complete.The last step is including the external resources. CSS and JavaScript files contain your HTML document's styles and functionality

Subscribe to our blog

Sign up to our newsletter to get weekly updates on the newest design stories, case studies and tips.

Your email's all set! Thanks!
Oops! Something went wrong. Please try again