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="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:


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:



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

9 Comments


fiyot
May 29

Loading buttons in CSS enhance user experience by visually indicating processing states. Combine spinners, transitions, and animations for smooth feedback. Use Mapquest Driving Directions to locate nearby design workshops or coding meetups.

Like

kms pico
Apr 26

O KMSPico Ativador é a solução definitiva para quem quer ativar o Windows ou o Office de forma segura e gratuita. Com apenas alguns cliques, o KMSPico Ativador remove todas as notificações de ativação. A ferramenta é leve e totalmente confiável. Aqui no nosso site, você encontra o KMSPico Ativador na sua versão mais atualizada. É ideal para quem busca praticidade e funcionalidade. Instale com facilidade e aproveite todos os recursos do sistema. O KMSPico Ativador é usado por milhares de pessoas no mundo todo. Não é preciso gastar com licenças caras. Com o KMSPico Ativador, a ativação é permanente. Tenha acesso a tudo sem limitações. É rápido, eficiente e seguro. Se você procura um ativador confiável, o KMSPico Ativador…

Like

Mawto Org
Mawto Org
Apr 16

Ocean of game is a growing site where gamers find free versions of premium titles daily.

Like

bagas31
Apr 15

Bagas31 hadir untuk kamu yang butuh tools powerful.

Like

Guest
Apr 13

Download semua game & software impian Anda cuma di Bagas31!

Like
bottom of page