How to use CSS Properties & Animation In CSS

Using Font Awesome Spinner and CSS

In this approach we will use custom CSS to make loading animation with styling a green heading, a smaller subheading, and a button with various properties. Additionally, we will animate circular element is positioned using absolute positioning and defined keyframes for rotation and spinning effects.

Approach

First, make separate HTML and CSS files. Then, link the external stylesheet to the HTML document.
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, relative position, font-size, font-weight, border-radius, background-color, color, and border.
The element with class .innerbox Positioned absolutely at 20% from the top and 70% from the left within its container.
The element (.innerbox::before) is an additional circular element positioned within the .innerbox. The @keyframes loader-animation defines a rotation animation starting from 0 degrees to 360 degrees whereas the @keyframes loader-spin defines a spinning animation, transforming the element by 360 degrees.

Example: The example illustrates the implementation of the code for loading buttons using CSS.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport"
          content="width=device-width"> 
      <title>Loading Buttons</title> 
    <link rel="stylesheet"
          href="style.css"> 
</head> 
  
<body> 
    <h1>w3wiki</h1> 
    <h3>Spinner with CSS</h3> 
    <button>Click Me 
        <div class="box"> 
            <div class="innerbox"></div> 
        </div> 
    </button> 
</body> 
  
</html>

CSS

h1 { 
    color: green; 
} 
  
h3 { 
    font-size: 20px; 
} 
  
.innerbox { 
    position: absolute; 
    top: 20%; 
    left: 70%; 
    width: 20px; 
    height: 20px; 
    border-radius: 50%; 
    border: 4px solid rgb(231, 214, 214); 
    border-top-color: #284018; 
    animation: loader-spin 1.8s linear infinite; 
} 
  
.innerbox::before { 
    content: ""; 
    position: absolute; 
    top: 12px; 
    left: 12px; 
    width: 56px; 
    height: 56px; 
    border-radius: 50%; 
    background-size: 100%; 
    animation: loader-animation 3s infinite ease-in-out; 
} 
  
@keyframes loader-animation { 
    0% { 
        transform: rotate(0deg); 
    } 
  
    100% { 
        transform: rotate(360deg); 
    } 
} 
  
@keyframes loader-spin { 
    to { 
        transform: rotate(360deg); 
    } 
} 
  
button { 
    position: relative; 
    font-size: 20px; 
    font-weight: 700; 
    padding: 10px; 
    background-color: rgb(39, 138, 39); 
    border-radius: 20px; 
    color: antiquewhite; 
    border: 2px solid rgb(223, 190, 190); 
    padding-right: 50px; 
} 
  
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; 
}

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 Font Awesome Spinner and CSS

How to use CSS Properties & Animation In CSS

Approach

HTML

CSS

How to create Animated Loading Button using CSS ?

Similar Reads