Font Awesome Cogs Animation

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900" rel="stylesheet">
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div class="animation-wrapper">
      <div class="fa-animation">
        <i class="fa fa-cog fa-lg fa-spin"></i>
        <i class="fa fa-cog fa-md fa-spin"></i>
        <i class="fa fa-cog fa-sm fa-spin"></i>
      </div>
      Loading
    </div>
  </body>

</html>

/* Styles go here */

.animation-wrapper{
  height:100px; 
  width:100px; 
  padding:20px; 
  margin:100px auto;
  background-color:#dfe7eb; 
  color:#667984;
  font-family: 'Roboto', sans-serif;
  text-align:center;
  text-transform:uppercase;
  font-weight:500;
}
  
  .fa-animation{
    height:70px; 
    width:70px; 
    margin:0 auto;
    position:relative;
  }
  
  .fa-animation .fa{position:absolute;}
  
  .fa-lg{font-size:45px; top:8px; left:0px;}
  .fa-md{font-size:30px; top:0px; left:40px;}
  .fa-sm{font-size:24px; top:30px; left:35px;}