Skip to main content

Make a simple Loading Animation With the help of HTML and CSS

 

Make a simple Loading Animation With the help of HTML and CSS


Source code :


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> CSS animation Tutorial</title>
    <style>
  
 a{
     animation: bouncing 0.5s ease 0s infinite alternate both;
  background-color: blue;
  border-radius: 50%;
  display: inline-block;
  color: white;
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0.2em;
  padding: 1em 1em 1.1em;
  position: relative;
  text-decoration: none;
  text-transform: uppercase;
  vertical-align: top;
  margin-top: 100px;
  box-shadow: 3px 3px 3px solid black;
 }
 @keyframes bouncing{
     0%{
         bottom: 0;
         box-shadow: 0 0 5px rgb(0, 0,0.5);

     }
     100%{
         bottom: 50px;
         box-shadow: 0 50px 50px rgb(0, 0,0.1);;
     }
 }
    </style>
</head>
<body>
    
    <a>Loading</a>
</body>
</html>











IF THIS CODE IF HELPFUL FOR YOU
DON'T FORGET TO HIT THE LIKE BUTTON
AND DO SUBCRIBE TO MY YOUTUBE CHANNEL

CODING WITH ROANNIE