CH Loading

In this example below you will see how to do a CH Loading with some HTML / CSS and Javascript

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

<head>
  <meta charset="UTF-8">
  <title>CH Loading</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="menu"></div>

<div class="wrapper">
  <div class="icon">
    <svg width="128" height="128">
      <path fill="#FFFFFF" stroke="#000000" stroke-width="0" d="M0,0 L128,0 L128,128 L0,128 L0,0 Z M64.0093994,79.7749484 L34.1414472,67.4565277 C32.99852,66.9887448 32.2507629,65.8756263 32.2507629,64.6378796 L32.2507629,59.1235046 L64.0093994,72.2153036 L108.271851,54.3490701 L108.271851,40.3907016 L64.0093994,58.3764418 L19.7469482,40.3907016 L19.7469482,66.6377609 C19.7469482,72.5106556 23.3119952,77.7911391 28.7540999,79.9729878 L64.0093994,94.347922 L99.264699,79.9729878 C104.706804,77.7911391 108.271851,72.5106556 108.271851,66.6377609 L108.271851,61.910422 L64.0093994,79.7749484 Z"></path>
    </svg>
  </div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/hugodesgayets/ch-loading-JMKVgB */
* {
  margin: 0;
  padding: 0;
}

.menu {
  position: fixed;
  width: 100%;
  z-index: 2;
  background: #fff;
  height: 5rem;
  box-shadow: 0 1px 4px 0 rgba(99, 114, 130, 0.15);
}

.wrapper {
  padding-top: 8rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon {
  position: relative;
  overflow: hidden;
  width: 8rem;
  height: 8rem;
  background: #dfe4eb -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0.001)), to(rgba(255, 255, 255, 0.001)), color-stop(0.8, rgba(255, 255, 255, 0.7)));
  background-repeat: no-repeat;
  box-shadow: inset 0px 0px 0px 10px #fff;
  -webkit-animation-name: shimmer;
  -webkit-animation-duration: 1.25s;
  -webkit-animation-timing-function: ease;
  -webkit-animation-iteration-count: infinite;
  background-position-x: 20px;
}

@-webkit-keyframes shimmer {
  0% {
    background-position: -8rem top;
  }
  100% {
    background-position: 8rem top;
  }
}

Comments