LegalPad Loader Clone - Pure CSS

In this example below you will see how to do a LegalPad Loader Clone - Pure CSS with some HTML / CSS and Javascript

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.

Thumbnail
This awesome code was written by progietheus, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright progietheus ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<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/progietheus/legalpad-loader-clone-pure-css-AbatD */
#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;
  }
}

Comments