Loading icon

by manoj_antony32

HTML

<!-- Start - Blue icon loader -->
    <div class="overlay set-none"></div>
    <div class="loader">
        <div>
            <div class="loaderIcon three-quarters-loader "></div>
            <div class="loaderMessage">Authenticating...</div>
        </div>
    </div>
    <!-- End - Blue icon loader -->

CSS

/*Start - Blue icon loader style*/
.loader
{
   position:relative;
   width:300px;
   margin:0 auto

}
.loader>div
{
   position:absolute;
   top:200px;
   z-index:9999999999;
   width:100%;
   height:100%

}
.loader .loaderIcon,.loader .loaderMessage
{
position:absolute;
top:20px;
left:48%

}
.loader .loaderMessage
{
   top:95px;
   left:8px;
   width:240px;
   text-align: center;
   color:#fff;
   font-weight:400;
   font-size:16px;
   padding:0 30px

}

/*Loading overlay popup style*/
.overlay
{
  position:fixed;
  top:0;
  left:0;
  z-index:9999999999;
  background-color:rgba(0,0,0,.6);
  text-align:center;
  width:100%;
  overflow:hidden;
  height:100%;

}
.overlay img
{
  max-width:90%;
  margin:25% auto

}
/*End - Blue icon loader style*/

@-moz-keyframes three-quarters-loader{0%{-moz-transform:rotate(0deg);transform:rotate(0deg)}100%{-moz-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes three-quarters-loader{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes three-quarters-loader{0%{-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.three-quarters-loader:not(:required){-moz-animation:three-quarters-loader 1250ms infinite linear;-webkit-animation:three-quarters-loader 1250ms infinite linear;animation:three-quarters-loader 1250ms infinite linear;border:8px solid #19b5fe;border-right-color:transparent;border-radius:16px;box-sizing:border-box;display:inline-block;position:relative;overflow:hidden;text-indent:-9999px;width:22px;height:22px}::-webkit-scrollbar{display:none}.scrollList{color:grey;list-style-type:none;width:48px;height:108px;overflow:scroll;text-align:center;z-index:10000;position:absolute;top:-4px;left:28px;background:url(../images/listBg1.png) no-repeat 0...