How to use CSS Loader in my website?


Tags: html,css,css3

Problem :

I want to use this css loader before full load site.

CSS loader source: http://tobiasahlin.com/spinkit.

On this site no documents or help.

How to use this HTML code in my website?

HTML:

<div class="sk-cube-grid">
  <div class="sk-cube sk-cube1"></div>
  <div class="sk-cube sk-cube2"></div>
  <div class="sk-cube sk-cube3"></div>
  <div class="sk-cube sk-cube4"></div>
  <div class="sk-cube sk-cube5"></div>
  <div class="sk-cube sk-cube6"></div>
  <div class="sk-cube sk-cube7"></div>
  <div class="sk-cube sk-cube8"></div>
  <div class="sk-cube sk-cube9"></div>
</div>

CSS:

.sk-cube-grid {
    width: 40px;
    height: 40px;
    margin: 100px auto;
}

.sk-cube-grid .sk-cube {
    width: 33%;
    height: 33%;
    background-color: #333;
    float: left;
    -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
    animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
}
.sk-cube-grid .sk-cube1 {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s; }
.sk-cube-grid .sk-cube2 {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s; }
.sk-cube-grid .sk-cube3 {
    -webkit-animation-delay: 0.4s;
    animation-delay: 0.4s; }
.sk-cube-grid .sk-cube4 {
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s; }
.sk-cube-grid .sk-cube5 {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s; }
.sk-cube-grid .sk-cube6 {
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s; }
.sk-cube-grid .sk-cube7 {
    -webkit-animation-delay: 0s;
    animation-delay: 0s; }
.sk-cube-grid .sk-cube8 {
    -webkit-animation-delay: 0.1s;
    animation-delay: 0.1s; }
.sk-cube-grid .sk-cube9 {
    -webkit-animation-delay: 0.2s;
    animation-delay: 0.2s; }

@-webkit-keyframes sk-cubeGridScaleDelay {
    0%, 70%, 100% {
        -webkit-transform: scale3D(1, 1, 1);
        transform: scale3D(1, 1, 1);
    } 35% {
          -webkit-transform: scale3D(0, 0, 1);
          transform: scale3D(0, 0, 1);
      }
}

@keyframes sk-cubeGridScaleDelay {
    0%, 70%, 100% {
        -webkit-transform: scale3D(1, 1, 1);
        transform: scale3D(1, 1, 1);
    } 35% {
          -webkit-transform: scale3D(0, 0, 1);
          transform: scale3D(0, 0, 1);
      }
}

After refresh page, not work this code...



Solution :

Add the css inline in the head of the document. Then you can either add your css under it or in the footer before the closing body tag (isn't proper HTML but it works fine).

Add a css class for a preloader div and have it position fixed, top, right, bottom, left all as 0 and a high z-index. Place the HTML for the preloader in that div.

Then add your ja files after the css if they r in the footer otherwise add them before the closing body tag anyway.

And then you want some jquery or JavaScript to display none the containing div from above.

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>

<head>
  HEAD STUFF
  <style>
    .sk-cube-grid {
      width: 40px;
      height: 40px;
      margin: 100px auto;
    }
    .sk-cube-grid .sk-cube {
      width: 33%;
      height: 33%;
      background-color: #333;
      float: left;
      -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
      animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
    }
    .sk-cube-grid .sk-cube1 {
      -webkit-animation-delay: 0.2s;
      animation-delay: 0.2s;
    }
    .sk-cube-grid .sk-cube2 {
      -webkit-animation-delay: 0.3s;
      animation-delay: 0.3s;
    }
    .sk-cube-grid .sk-cube3 {
      -webkit-animation-delay: 0.4s;
      animation-delay: 0.4s;
    }
    .sk-cube-grid .sk-cube4 {
      -webkit-animation-delay: 0.1s;
      animation-delay: 0.1s;
    }
    .sk-cube-grid .sk-cube5 {
      -webkit-animation-delay: 0.2s;
      animation-delay: 0.2s;
    }
    .sk-cube-grid .sk-cube6 {
      -webkit-animation-delay: 0.3s;
      animation-delay: 0.3s;
    }
    .sk-cube-grid .sk-cube7 {
      -webkit-animation-delay: 0s;
      animation-delay: 0s;
    }
    .sk-cube-grid .sk-cube8 {
      -webkit-animation-delay: 0.1s;
      animation-delay: 0.1s;
    }
    .sk-cube-grid .sk-cube9 {
      -webkit-animation-delay: 0.2s;
      animation-delay: 0.2s;
    }
    @-webkit-keyframes sk-cubeGridScaleDelay {
      0%, 70%, 100% {
        -webkit-transform: scale3D(1, 1, 1);
        transform: scale3D(1, 1, 1);
      }
      35% {
        -webkit-transform: scale3D(0, 0, 1);
        transform: scale3D(0, 0, 1);
      }
    }
    @keyframes sk-cubeGridScaleDelay {
      0%, 70%, 100% {
        -webkit-transform: scale3D(1, 1, 1);
        transform: scale3D(1, 1, 1);
      }
      35% {
        -webkit-transform: scale3D(0, 0, 1);
        transform: scale3D(0, 0, 1);
      }
    }
    div#preloader {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 999;
  </style>
</head>

<body>
  <div id="preloader">
    <div class="sk-cube-grid">
      <div class="sk-cube sk-cube1"></div>
      <div class="sk-cube sk-cube2"></div>
      <div class="sk-cube sk-cube3"></div>
      <div class="sk-cube sk-cube4"></div>
      <div class="sk-cube sk-cube5"></div>
      <div class="sk-cube sk-cube6"></div>
      <div class="sk-cube sk-cube7"></div>
      <div class="sk-cube sk-cube8"></div>
      <div class="sk-cube sk-cube9"></div>
    </div>
  </div>
   
  
  HAVE YOUR MAIN BODY HERE
  
  
  CSS FILE LINKS & JS FILE LINKS GO HERE (YOU NEED JQUERY)
   <script>
    $("#preloader" ).fadeOut(300);
  </script>
</body>

</html>


    CSS Howto..

    how to implement list bullets in CSS [closed]

    AngularJS - how to show an alert when the length of an array is zero and hide the default behavior?

    How do I override a (css) metaclass property using a GreaseMonkey script?

    CSS - how to make the iframe inside the div center aligned and the main div also center?

    How do I output compressed CSS from Compass?

    How to use jQuery / CSS to swap out the contents of a DIV onmouseover on list items? [closed]

    How to create opacity effect on webOS?

    How to exclude last child in css psuedo class selector

    JavaScript CSS how to add and remove multiple CSS classes to an element

    how do you set css to add an asp img?

    How to hide specific TD borders in a TABLE using CSS

    How can I make a button change its position after being clicked?

    CSS - Superfish, how to float 4th level of dropdown

    CSS - How to select multiple attribute values?

    How do align texts in the child div

    How to remove unused CSS but keep comments?

    How to change CSS where id=array(index)?

    How to insert / edit / group css rules faster?

    How to change content of css using jQuery toggle

    How to get at Apache Wicket PropertyColumn data to dynamically change CSS class based on content?

    How to capture extra css class in addition to the pseduo class in this less (css) code?

    How to make a horizontal list start in the center of the page?

    How to change CSS id property depending upon screen size

    How to scale canvas and keep its position on screen?

    How to append bind-attr class to initial one in Ember?

    How to use CSS to create a matrix of cells, and not use HTML tags at all

    How to decrease spacing between bootstrap glyphicons

    How to use Grunt while continually compressing css / javascript

    resize/expanding slideshow (inside a div) overtakes content that follows below

    How to give shadow to a border