Simple yet functional

What is a simple yet functional How do you make a simple yet functional? This script and codes were developed by Matheus Silva on 24 December 2021, Friday.

How do I make an simple yet functional?
  1. Simple yet functional Previews
  2. Simple yet functional HTML Codes
  3. Simple yet functional CSS Codes
Simple yet functional Previews

Simple yet functional HTML Codes

<!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>

Simple yet functional CSS Codes

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;
  }
}
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.