Color Changing Shiny Loader using CSS | Loader CSS

Color Changing Shiny Loader using CSS | Loader CSS, this shiny CSS spinner make your website awesome.

Colorful Shiny Loader CSS

Loader.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;
  }

}

Output 

(this image is not animated just an image, try yourself to see animation)  

loader css, spinner css, shiny loader css

Download Code: Download

This Animated CSS Shiny Loader helps you to understand Pure CSS Animation. 

Support CodeSnail

If you appreciate my work, or if it has helped you along your journey. It would mean a lot to me if you could write a message on my wall and share a cup of coffee (or tea) with me.

Buy Me A Coffee

4 thoughts on “Color Changing Shiny Loader using CSS | Loader CSS”

Leave a Comment

Copy link
Powered by Social Snap