1. Home
  2. Docs
  3. Blue Pro
  4. How to change preloader

How to change preloader

You can change pre-loader of template form preloader section(which is located top of our template)

Code have been used for preloader is

1. HTML Code:
[code language=”html”]
<!– preloader –>
<div id="preloader">
<div class="loder-box">
<div class="battery"></div>
</div>
</div>
<!– end preloader –>
[/code]

2. CSS Code:
[code language=”css”]
.battery{
width: 60px;
height: 25px;
top: 35%;
border: 1px #2E2E2E solid;
border-radius: 2px;
position: relative;
-webkit-animation: charge 5s linear infinite;
-moz-animation: charge 5s linear infinite;
animation: charge 5s linear infinite;
margin: 0 auto;
}

.battery:after {
background-color: #2E2E2E;
border-radius: 0 1px 1px 0;
content: "";
height: 10px;
position: absolute;
right: -5px;
top: 7px;
width: 3px;
}

@-webkit-keyframes charge{
0%{box-shadow: inset 0px 0px 0px #2E2E2E;}
100%{box-shadow: inset 60px 0px 0px #2E2E2E;}
}

@-moz-keyframes charge{
0%{box-shadow: inset 0px 0px 0px #2E2E2E;}
100%{box-shadow: inset 60px 0px 0px #2E2E2E;}
}

@keyframes charge{
0%{box-shadow: inset 0px 0px 0px #2E2E2E;}
100%{box-shadow: inset 60px 0px 0px #2E2E2E;}
}
[/code]

Change @keyframes as you want to change the behavior of preloader or you can add your own preloader.

If you don’t know how to make custom preloader, this article might help you.

And you can find some attractive preloaders in this page.

Was this article helpful to you? Yes No

How can we help?