A Pen by Chris Barr

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

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Chris Barr</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="loader"></div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/chrismbarr/a-pen-by-chris-barr-WdYepZ */
.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #007acc;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
  left: 45%;
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  z-index: 10;
  box-shadow: 0 0 18px -3px;
}

.loader::before {
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.6);
  z-index: 10;
}

@keyframes spin {
  from {
    transform: translateY(-50%) rotate(0deg);
  }
  to {
    transform: translateY(-50%) rotate(360deg);
  }
}

Comments