top of page
Search

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="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">

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

ree

Code:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" >
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.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;
}
</style>
</head>
<body>

<h2>Loading Buttons in CSS</h2>

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

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

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

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

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

</body>
</html>


Output:


ree

For more Font Awesome icons visit - https://fontawesome.com/ . For more information or any queries related to this article, Contact us - www.thetechplatform.com or Social Platforms @thetechplatform



Resource: Wikipedia , W3school


The Tech Platform

21 Comments

KulluK
Oct 25

I am searching for a proper source to read the Hanuman Chalisa in Kannada PDF and found this page really helpful. The content is clear and easy to read for anyone who wants to recite the Chalisa daily in Kannada. It’s a great resource for devotees who wish to download and keep it offline for regular prayers.

Edited
Like
Anderson
Oct 22

UnicodeConverter.co online text converter is the most accurate I’ve seen.


It maintains every single character and spacing perfectly.


You can easily process long documents without issues.


Even supports multiple languages in a single conversion.


The clean UI makes the whole process enjoyable.


UnicodeConverter.co online text converter truly stands out.

Like
Guest
Oct 19

Sarathi Parivahan and parivahan gov.in represent India’s digital stride toward smarter, faster, and more transparent transport services. Launched under the Ministry of Road Transport and Highways, these platforms serve as a unified gateway for citizens to access driving license, vehicle registration, and transport-related services online. By connecting regional transport offices across the nation, Sarathi and Parivahan eliminate the need for long queues and paperwork, making governance more efficient and citizen-friendly.

Like
talha
Oct 01

Cricket fans, buckle up because the 2026 T20 World Cup is serving up some absolute blockbusters that’ll have you glued to your screens! These matches are going to be the talk of every cricket conversation for years to come and also click here to read about Points Table.

Like
alex
Oct 01

Gone are the days when a government employee had to carry a thick file from one desk to another just to get a leave sanctioned or a service record updated. Manav Sampada Portal, also known as eHRMS (Electronic Human Resource Management System), is a digital platform developed by the National Informatics Centre (NIC) to solve exactly this problem.

Like
bottom of page