Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- 1. Use following codes in the styles.css file, which is located in the css folder.You can use it at the bottom of the file
- .site_preloader{
- position: fixed;
- width: 100%;
- height: 100%;
- background-color: rgba(255, 255, 255, 0.95);
- z-index: 999;
- left: 0;
- top: 0;
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: vertical;
- -webkit-box-direction: normal;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-pack: center;
- -ms-flex-pack: center;
- justify-content: center;
- }
- .loader,
- .loader:after {
- border-radius: 50%;
- width: 7em;
- height: 7em;
- }
- .loader {
- margin: 50px auto;
- font-size: 10px;
- position: relative;
- text-indent: -9999em;
- border-top: 3px solid rgba(2, 32, 47, 0.8);
- border-right: 3px solid rgba(2, 32, 47, 0.8);
- border-bottom: 3px solid rgba(2, 32, 47, 0.8);
- border-left: 3px solid #ffffff;
- -webkit-transform: translateZ(0);
- -ms-transform: translateZ(0);
- transform: translateZ(0);
- -webkit-animation: load8 1.1s infinite linear;
- animation: load8 1.1s infinite linear;
- }
- @-webkit-keyframes load8 {
- 0% {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- 100% {
- -webkit-transform: rotate(360deg);
- transform: rotate(360deg);
- }
- }
- @keyframes load8 {
- 0% {
- -webkit-transform: rotate(0deg);
- transform: rotate(0deg);
- }
- 100% {
- -webkit-transform: rotate(360deg);
- transform: rotate(360deg);
- }
- }
- 2.Use following codes in the custom.js file, which is located in the Js folder.Please paste the codes, within line 120 to 130.
- function custom(){
- $('.site_preloader').fadeOut(1000, function () {
- $('this').remove();
- });
- }
- $(document).ready(function () {
- custom();
- });
- 3. Now you need to call the preloader from every html pages.like index.html type.Please delete line from 70 to 81 in each html page, and use their the following codes.
- <div class="site_preloader">
- <div class="loader"></div>
- </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement