Loading Buttons in CSS

The Tech Platform
Jul 20, 2021
1 min read

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

www.thetechplatform.com

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.

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…