simple yet functional

Tutorials of (Simple yet functional) by Matheus silva

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>simple yet functional</title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      body{
  background-color: rgb(43,43,43);
}
.con{
  width: 100px;
  height: 12px;
  background-color: rgb(43,43,43);
  border-radius: 9px;
  position: absolute;
  left: 46%;
  top: 54%;
  border: 3px solid white;
}
.con:after{
  content: '';
  width: 10px;
  height: 10px;
  background-color: #fff;
  border-radius: 100px;
  position: absolute;
  left: 90%;
  top: 10%;
  animation: cross_y 3s infinite;
}
.con:before{
  content: 'Loading';
  width: 10px;
  height: 10px;
  color: #fff;
  border-radius: 100px;
  position: absolute;
  left: 26%;
  top: 102%;
}
@keyframes cross_y {
  0%{
    left: 90%;
    background-color: green;
  }
  50%{
    left: 1%;
    background-color: yellow;
  }
  100%{
    background-color: green;
  }
}
    </style>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>
  <div class="con"></div>
  
  
</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
body{
  background-color: rgb(43,43,43);
}
.con{
  width: 100px;
  height: 12px;
  background-color: rgb(43,43,43);
  border-radius: 9px;
  position: absolute;
  left: 46%;
  top: 54%;
  border: 3px solid white;
}
.con:after{
  content: '';
  width: 10px;
  height: 10px;
  background-color: #fff;
  border-radius: 100px;
  position: absolute;
  left: 90%;
  top: 10%;
  animation: cross_y 3s infinite;
}
.con:before{
  content: 'Loading';
  width: 10px;
  height: 10px;
  color: #fff;
  border-radius: 100px;
  position: absolute;
  left: 26%;
  top: 102%;
}
@keyframes cross_y {
  0%{
    left: 90%;
    background-color: green;
  }
  50%{
    left: 1%;
    background-color: yellow;
  }
  100%{
    background-color: green;
  }
}
/* Downloaded from https://www.codeseek.co/ */

This awesome code ( simple yet functional ) is write by Matheus Silva, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Matheus Silva