LegalPad Loader Clone - Pure CSS

Saw a legal pad loader on CodePen's front page which inspired me to make this. It was helpful in Learning the basics of keyframes and their role in css animation.

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>LegalPad Loader Clone - Pure CSS</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div id="loader-pad">
  <div id="header"></div>
  <div id="page">
    <hr class="first" />    
    <hr class="second" />
    <hr class="third" />
    <hr class="fourth" />
    <hr class="fifth" />
    <span class="label">loading</span>
  </div>
</div>
  
  
</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
#loader-pad {
  width: 50px;
  height: 65px;
  border: 2px solid #ff625a;
  margin: 8% auto;
  padding: 0;
}

#header {
  width: 50px;
  height: 23%;
  border-bottom: 2px solid #ff625a;
  margin: 0;
}

#page {
  width: 100%;
  height: 100%;
  padding: 5px 3px;
}

hr {
  opacity: 0;
  width: 70%;
  margin: 5px 2%;
  border: 1px solid #ff625a;
  -webkit-animation: load 3s infinite ease-in;
  -moz-animation: load 3s infinite ease-in;
  -o-animation: load 3s infinite ease-in;
  animation: load 3s infinite ease-in;
}

.first {
  -webkit-animation-delay: 0s;
  -moz-animation-delay: 0s;
  -o-animation-delay: 0;
  animation-delay: 0s;
}

.second {
  -webkit-animation-delay: 0.25s;
  -moz-animation-delay: 0.25s;
  -o-animation-delay: 0.25s;
  animation-delay: 0.25s;
}

.third {
  -webkit-animation-delay: 0.5s;
  -moz-animation-delay: 0.5s;
  -o-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.fourth {
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  -o-animation-delay: 1s;
  animation-delay: 1s;
}

.fifth {
  -webkit-animation-delay: 1.5s;
  -moz-animation-delay: 1.5s;
  -o-animation-delay: 1.5s;
  animation-delay: 1.5s;
}

.label {
  font-size: 10px;
  font-family: "Trebuchet MS";
  color: #ff625a;
  position: relative;
  bottom: 66px;
  left: 5px;
  -webkit-animation: glow 3s infinite ease-in;
  -moz-animation: glow 3s infinite ease-in;
  -o-animation: glow 3s infinite ease-in;
  animation: glow 3s infinite ease-in;
}

@-webkit-keyframes load {
  0% {
    width: 0px;
    opacity: 0;
  }

  25% {
    width: 40px;
    opacity: 1;
  }

  75% {
    border-color: #000;
  }

  100% {
    width: 40px;
    opacity: 0;
  }
}

@-moz-keyframes load {
  0% {
    width: 0px;
    opacity: 0;
  }

  25% {
    width: 40px;
    opacity: 1;
  }

  75% {
    border-color: #000;
  }

  100% {
    width: 40px;
    opacity: 0;
  }
}

@-o-keyframes load {
  0% {
    width: 0px;
    opacity: 0;
  }

  25% {
    width: 40px;
    opacity: 1;
  }

  75% {
    border-color: #000;
  }

  100% {
    width: 40px;
    opacity: 0;
  }
}

@keyframes load {
  0% {
    width: 0px;
    opacity: 0;
  }

  25% {
    width: 40px;
    opacity: 1;
  }

  75% {
    border-color: #000;
  }

  100% {
    width: 40px;
    opacity: 0;
  }
}

@-webkit-keyframes glow {
  0% {
    color: #ff625a;
  }

  50% {
    color: #000;
  }

  100% {
    color: #ff625a;
  }
}

@-moz-keyframes glow {
  0% {
    color: #ff625a;
  }

  50% {
    color: #000;
  }

  100% {
    color: #ff625a;
  }
}

@-o-keyframes glow {
  0% {
    color: #ff625a;
  }

  50% {
    color: #000;
  }

  100% {
    color: #ff625a;
  }
}

@keyframes glow {
  0% {
    color: #ff625a;
  }

  50% {
    color: #000;
  }

  100% {
    color: #ff625a;
  }
}
/* Downloaded from https://www.codeseek.co/ */

This awesome code ( LegalPad Loader Clone - Pure CSS ) is write by John Balzac, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © John Balzac