Hourglass Animated #FontAwesome

hourglass-animated-fontawesome.markdown

Hourglass Animated #FontAwesome

Animated Hourglass #FontAwesome icon using sass with the options to adjust the speed, Color and font size.

HTML, SCSS | CSS

A Pen by Majed on CodePen.

License.

index.html

<div id="hourglass" class="fa-stack fa-4x">
  <i class="fa fa-stack-1x fa-hourglass-start"></i>
  <i class="fa fa-stack-1x fa-hourglass-half"></i>
  <i class="fa fa-stack-1x fa-hourglass-end"></i>
  <i class="fa fa-stack-1x fa-hourglass-end"></i>
  <i class="fa fa-stack-1x fa-hourglass-o"></i>
</div>

style.scss

// Modify These Values ( Use Even Numbers or Decimals )
$AnimationSpeed: 0.6;
$Font-size:20rem;
$Colors: #ffc400, #ffc400, #ffab00, #ffc400, #006064 ;
// End of modify
/* */
/* Animation */
/* */
#hourglass{
  opacity: 1;
  color: #6a1b9a ;
  font-size:$Font-size;
  $_animationSpin:hourglass-spin ($AnimationSpeed * 4s) ease-out infinite;
  i{
    opacity: 0;
    animation: hourglass ($AnimationSpeed * 4s) ease-in infinite,
      $_animationSpin;
  }
  @for $i from 1 through 4{
    &>i:nth-child(#{$i}){
      color: nth($Colors, $i);
      animation-delay: $AnimationSpeed * ($i - 1) * 1s ,0s;
    }
  }
  &>i:nth-child(4){
    animation: hourglass-end ($AnimationSpeed * 4s) ease-in infinite,
      $_animationSpin;
  }
  &>i:nth-child(5){
    color:nth($Colors, 5);
    opacity:1;
    animation: $_animationSpin;
  }
}
@keyframes hourglass{
  0% { opacity: 1 }
  24% { opacity: 0.9}
  26% { opacity: 0 }
}
@keyframes hourglass-end {
  0% { opacity: 0 }
  70% { opacity: 0 }
  75% { opacity: 1}
  100% { opacity: 1}
}
@keyframes hourglass-spin {
  75% { transform: rotate(0deg); }
  100% { transform: rotate(180deg); }
}
/* */
/* Layout */
/* */
body {
  display: flex;
  justify-content: center;
  align-items: center;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />