How to use Font Awesome Spinner and CSS In CSS

Using CSS Properties & Animation

This code illustrates the creation of loading buttons using Font Awesome icons for various spinner animations. The fa-spin class inside <i> tag is essential for rotation.

Approach

First, make separate HTML and CSS files. Then, link the external stylesheet to the HTML document. Additionally, integrate the Font Awesome CDN Link to the HTML document for using different Font Awesome icons.
The element <h1> defines the Heading having CSS property (color: green). Set the property (font-size: 20px) to the element <h3>.
Style the button with different CSS properties including padding, font-size, font-weight, border-radius, background-color, color, and border.
Make three button elements. Each button contains an <i> element with Font Awesome classes for specific spinner animations.

Example: The example illustrates the code for loading buttons using Font Awesome Spinner.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0"> 
    <title>Animated Loading Button</title> 
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> 
    <link rel="stylesheet" 
          href="style.css"> 
</head> 
  
<body> 
    <h1>w3wiki</h1> 
    <h3> 
        Loading buttons using CSS 
        and Font Awsome Icons. 
    </h3> 
    <button>Spinner 
        <i class="fa fa-spinner fa-spin"></i> 
    </button> 
    <button>Rotate-right 
        <i class="fa fa-spin  
                  fa-solid 
                  fa-rotate-right"> 
          </i> 
    </button> 
    <button>Circle-notch 
        <i class="fa fa-solid 
                  fa-spin  
                  fa-circle-notch"> 
          </i> 
    </button> 
</body> 
  
</html>

CSS

h1 { 
    color: green; 
} 
  
h3 { 
    font-size: 20px; 
} 
  
button { 
    padding: 10px; 
    font-size: 20px; 
    font-weight: 700; 
    border-radius: 10px; 
    background-color: green; 
    color: antiquewhite; 
    border: 2px solid rgb(223, 190, 190); 
    transition: all 0.3s ease; 
} 
  
button:hover { 
    background-color: rgb(15, 138, 66); 
    color: rgb(244, 244, 223); 
    box-shadow: rgba(32, 31, 31, 0.35) 0px 7px 10px; 
    font-weight: 900; 
} 
  
i { 
    margin-left: 5px; 
}

Output:

How to create Animated Loading Button using CSS ?

In this article, we will see the implementation for creating loading buttons using CSS. We can achieve the effect of loading buttons in many ways. In the first approach, we are exploring with Font Awesome Spinner & CSS properties whereas in the second approach, we are using CSS properties and CSS Animation.

Table of Content

Using Font Awesome Spinner and CSS
Using CSS Properties & Animation

Tags:
#CSS-Questions #CSS #Web Technologies #Web Templates

Using CSS Properties & Animation

How to use Font Awesome Spinner and CSS In CSS

Approach

HTML

CSS

How to create Animated Loading Button using CSS ?

Similar Reads