Color Changing Shiny Loader using CSS | Loader CSS

by • < 1 min read

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
Your subscription could not be saved. Please try again.
Your subscription has been successful.

Newsletter

Subscribe to our newsletter and stay updated.

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

  3. Right away I am going away to do my breakfast, later than having
    my breakfast coming again to read more news.

    Reply

Leave a Comment