top of page

Loading Buttons in CSS

To use the Font Awesome icons, add the following line inside the <head> section of your HTML page:

<link rel="stylesheet" href="">

Below is the example where we have 5 types of Loading Buttons:


<!DOCTYPE html>
<link rel="stylesheet" href="" >
<meta name="viewport" content="width=device-width, initial-scale=1">
.buttonload {
  background-color: blue; 
  border: solid-black ; 
  color: yellow; 
  padding: 12px 24px; 
  font-size: 18px; 

/* Add a right margin to each icon */
.fa {
  margin-left: -12px;
  margin-right: 8px;

<h2>Loading Buttons in CSS</h2>

<button class="buttonload">
  <i class="fa fa-spinner fa-spin"></i>Loading

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

<button class="buttonload">
  <i class="fa fa-refresh fa-spin"></i>Loading

<button class="buttonload">
  <i class="fa fa-spinner fa-pulse"></i>Loading

<button class="buttonload">
  <i class="fa fa-gear fa-spin"></i>Loading



For more Font Awesome icons visit - . For more information or any queries related to this article, Contact us - or Social Platforms @thetechplatform

Resource: Wikipedia , W3school

The Tech Platform


Recent Posts

See All


bottom of page