{"id":728,"date":"2024-04-27T23:48:10","date_gmt":"2024-04-27T23:48:10","guid":{"rendered":"https:\/\/www.cssportal.com\/blog\/?p=728"},"modified":"2024-04-27T23:48:10","modified_gmt":"2024-04-27T23:48:10","slug":"css-loader-on-button-click","status":"publish","type":"post","link":"https:\/\/www.cssportal.com\/blog\/css-loader-on-button-click\/","title":{"rendered":"CSS Loader on Button Click"},"content":{"rendered":"

In today’s blog post, we’ll be looking at how to create a user-friendly and visually appealing experience by implementing CSS loaders on button clicks. Ever clicked a button and felt stuck waiting for something to happen? A well-designed loading animation can significantly improve user experience by providing visual feedback during actions that take time. Not only do loaders enhance user experience, but they’re also surprisingly easy to create using CSS! Let’s get started and explore how to add these interactive elements to your buttons.<\/p>\n

The HTML Code<\/h3>\n

Now that we understand the benefits of using CSS loaders on buttons, let's set up the basic structure using HTML. The code we'll be using is quite simple:<\/p>\n

HTML<\/div>\n
<button type="submit" class="loaderbutton" id="submit">Click Me!<\/button>\r\n<\/code><\/pre>\n
This code snippet defines a button element with the following attributes:<\/p>\n
    \n
  • type="submit"<\/strong>: This specifies that the button is intended for submitting a form (optional and can be omitted if not submitting a form).<\/li>\n
  • class="loaderbutton"<\/strong>: We've assigned a class named "loaderbutton" to the button. This class will be used later in our CSS styles to target and style the button, including the loader animation.<\/li>\n
  • id="submit"<\/strong>: An id attribute is assigned with the value "submit". While not strictly necessary for this example, IDs can be useful for more specific targeting with JavaScript if needed.<\/li>\n<\/ul>\n
    The text content within the opening and closing <button><\/code> tags defines the label displayed on the button ("Click Me!" in this case).<\/p>\n
    In the next section, we'll look at the CSS to create the actual loading animation for this button.<\/p>\n
    The CSS Code<\/h3>\n
    We've established the basic button structure with HTML. Now, let's bring it to life with some CSS magic! Here's the code that will style the button and create the loading animation:<\/p>\n
    CSS<\/div>\n
    .loaderbutton {\r\n  padding: 10px 30px;\r\n  background: #3e52c1;\r\n  border: none;\r\n  color: #fff;\r\n  border-radius: 5px;\r\n  cursor: pointer;\r\n  font-size: 1.2em;\r\n  position: relative;\r\n  display: block;\r\n}\r\n\r\n.loaderbutton::after {\r\n  content: '';\r\n  display: block;\r\n  width: 1.1em;\r\n  height: 1.1em;\r\n  position: absolute;\r\n  left: calc(50% - 0.75em);\r\n  top: calc(50% - 0.75em);\r\n  border: 0.2em solid transparent;\r\n  border-right-color: white;\r\n  border-radius: 50%;\r\n  animation: loader-animation 0.7s linear infinite;\r\n  opacity: 0;\r\n}\r\n\r\n@keyframes loader-animation {\r\n  from {\r\n    transform: rotate(0);\r\n  }\r\n  to {\r\n    transform: rotate(360deg);\r\n  }\r\n}\r\n\r\n.loaderbutton.loading {\r\n  color: transparent;\r\n}\r\n\r\n.loaderbutton.loading::after {\r\n  opacity: 1;\r\n}\r\n<\/code><\/pre>\n
    Let's break down what this code does:<\/p>\n
      \n
    1. Styling the Button (.loaderbutton)<\/strong>:<\/li>\n<\/ol>\n
        \n
      • This block defines styles for the button element with the class "loaderbutton". <\/li>\n
      • Properties like padding<\/code>, background<\/code>, border<\/code>, color<\/code>, and font-size<\/code> define the button's appearance.<\/li>\n<\/ul>\n
          \n
        1. Creating the Loader Element (.loaderbutton::after)<\/strong>:<\/li>\n<\/ol>\n
            \n
          • This uses the CSS pseudo-element ::after<\/code> to create a hidden element positioned within the button.<\/li>\n
          • We define its size, position, and a border that creates a circle using border-radius<\/code>.<\/li>\n
          • The animation<\/code> property references the loader-animation<\/code> keyframes to create the rotation effect.<\/li>\n
          • Initially, the opacity is set to 0 (opacity: 0<\/code>), making it invisible.<\/li>\n<\/ul>\n
              \n
            1. Animation Definition (@keyframes loader-animation)<\/strong>:<\/li>\n<\/ol>\n
                \n
              • This defines the animation named loader-animation<\/code>.<\/li>\n
              • It specifies a rotation from 0 degrees to 360 degrees, creating a spinning motion. <\/li>\n
              • The animation duration is set to 0.7 seconds with a linear timing function (0.7s linear<\/code>).<\/li>\n<\/ul>\n
                  \n
                1. Activating the Loader (.loaderbutton.loading)<\/strong>:<\/li>\n<\/ol>\n
                    \n
                  • This block targets the button element with the class "loaderbutton" that also has the additional class "loading".<\/li>\n
                  • When this class is added, the button text color becomes transparent (color: transparent<\/code>).<\/li>\n
                  • This allows the loader animation to become visible.<\/li>\n<\/ul>\n
                      \n
                    1. Showing the Loader (.loaderbutton.loading::after)<\/strong>:<\/li>\n<\/ol>\n
                        \n
                      • This targets the pseudo-element within the button that has both "loaderbutton" and "loading" classes.<\/li>\n
                      • When the "loading" class is added, the opacity is set to 1 (opacity: 1<\/code>), making the loader animation visible.<\/li>\n<\/ul>\n
                        By combining these styles, we achieve a button that displays a loading animation (spinning circle) when the "loading" class is added. In the next section, we'll explore how to use JavaScript to control this behavior based on button clicks.<\/p>\n
                        The JavaScript Code<\/h3>\n
                        We've styled the button and created the loading animation using HTML and CSS. Now, it's time to make it interactive! JavaScript will allow us to control the loader animation based on user interaction (clicking the button). Here's the code that brings it all together:<\/p>\n
                        Javascript<\/div>\n
                        const animBtn = document.getElementById("submit");\r\n\r\nanimBtn.addEventListener('click', () => {\r\n  animBtn.classList.add("loading");\r\n  \/\/The following is used for demo purposes only\/\/\r\n  setTimeout(() => animBtn.classList.remove("loading"), 5000);\r\n});\r\n<\/code><\/pre>\n
                        Let's understand what this code does:<\/p>\n
                          \n
                        1. Get Button Reference (const animBtn)<\/strong>:\n
                            \n
                          • This line uses document.getElementById("submit")<\/code> to select the button element with the ID "submit" and assigns it to a constant variable named animBtn<\/code>.<\/li>\n<\/ul>\n<\/li>\n
                          • Add Click Event Listener<\/strong>:\n
                              \n
                            • This line uses animBtn.addEventListener('click', () => { ... })<\/code> to attach a click event listener to the button element referenced by animBtn<\/code>.<\/li>\n
                            • The part within the curly braces ({}<\/code>) is a function that will be executed when the button is clicked.<\/li>\n<\/ul>\n<\/li>\n
                            • Add and Remove Loading Class<\/strong>:\n
                                \n
                              • Inside the event listener function, we use animBtn.classList.add("loading")<\/code> to add the class "loading" to the button element.<\/li>\n
                              • This class addition triggers the CSS styles defined earlier to show the loader animation and hide the button text.<\/li>\n
                              • Important Note:<\/strong> The commented line (\/\/The following is used for demo purposes only\/\/<\/code>) uses setTimeout<\/code> to simulate a 5-second delay before removing the "loading" class. This is for demonstration purposes only. In your actual application, the button should return to its normal state after the intended action is complete.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n
                                The Result<\/h3>\n
                                Now that we've implemented all the code snippets, let's see the final outcome!  With this code in place, clicking the button will trigger the following sequence:<\/p>\n