Color Changing Shiny Loader using CSS | Loader CSS

#html #css #design #tutorial

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Loader</title>
    <link rel="stylesheet" href="style.css" type="text/css">
  </head>
  <body>
    <div class="center">
      <div class="text">LOADING</div>
      <div class="ring">

      </div>
    </div>
  </body>
</html>

style.css

*
{
  margin: 0;
  padding: 0;
  font-family: verdana;
  background: #262626;
}
.center{
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
.ring
{
  width: 300px;
  height: 300px;
  border-radius: 50%;
  /*box-shadow:1px 5px 2px #ff002e;*/
  background: transparent;
  animation: ani 2s linear infinite;
}
.text
{
  width: 300px;
  height: 300px;
  border-radius: 50%;
  color:#fff;
  position: absolute;
  text-align: center;
  line-height: 300px;
  top:0;
  left: 0;
  font-size:2em;
  background: transparent;
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.2);
}
@keyframes ani {
  0%{
    transform: rotate(0deg);
    box-shadow:1px 5px 2px #ff002e;
  }

  50%{
    transform: rotate(180deg);
    box-shadow:1px 5px 2px #18a401;
  }
  100%{
    transform: rotate(360deg);
    box-shadow:1px 5px 2px #033e8e;
  }

}

source: here

Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more