How to create loading buttons with CSS?


Buttons can be displayed as loading when they are clicked. On click, the button may reach the next page but just before that, the loading stage is visible. On your web page, you can easily display the loading buttons with HTML and CSS. First, load the icons.

Set the CDN for the icons

To add the icons on our web page, we have used the Font Awesome Icons. Include it on a web page using the <link> element −

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Create the buttons

The buttons are created using the <button> element. The three different loading icons are set within the <i> element −

fa-spinner fa-spin
fa-circle-o-notch fa-spin
fa-refresh fa-spin

Here is the code to place the icons on the buttons −

<button><i class="fa fa-spinner fa-spin"></i>Loading</button>
<button><i class="fa fa-circle-o-notch fa-spin"></i>Loading</button>
<button><i class="fa fa-refresh fa-spin"></i>Loading</button>

Style the buttons

The buttons are styled like this −

button {
   background-color: rgb(60, 24, 126);
   border: none;
   outline: none;
   color: white;
   padding: 12px 24px;
   font-size: 26px;
}

Style the icons

The loading circular icons are placed correctly using the margin-left and margin-right properties −

i {
   margin-left: -12px;
   margin-right: 8px;
}

Example

The following is the code to create loading buttons with CSS −

<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
   <style>
      button {
         background-color: rgb(60, 24, 126);
         border: none;
         outline: none;
         color: white;
         padding: 12px 24px;
         font-size: 26px;
      }
      h1{
         font-size: 50px;
         font-family: monospace,sans-serif,serif;
      }
      i {
         margin-left: -12px;
         margin-right: 8px;
      }
   </style>
</head>
<body>
   <h1>Loading Buttons Example</h1>
   <button><i class="fa fa-spinner fa-spin"></i>Loading</button>
   <button><i class="fa fa-circle-o-notch fa-spin"></i>Loading</button>
   <button><i class="fa fa-refresh fa-spin"></i>Loading</button>
</body>
</html>

Updated on: 14-Dec-2023

277 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements