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 change custom icon image on hover of the link next to it?

    How to properly use css will-change property?

    How to add custom tag to a header to make the font size larger in WordPress? [closed]

    How to use images for check boxes using CSS or may be Javascript?

    How to make a simple contact form input box responsive

    How do I have fieldset::before rule account for the legend?

    How do I absolutely position a relatively positioned element?

    How does max-width property make images responsive?

    How to call a jquery funcion with a css button?

    How to solve CSS dropdown border error?

    How to remove the gap between each list-item in an unordered list?

    How to use CSS to align a custom check box with its label?

    How to keep floated width of divs to stay exact instead of 100%?

    How to remove blue highlight when you hold on input buttons in css? [closed]

    CSS how to position element fixed just for y-axis?

    How to hook up CSS search bar to JavaScript or another server side language

    SCSS has the color in rgba() format, but the color is in hex format. How to keep the color in RGBA() format in the genrated css?

    how to add a CSS attribute just for specific time via JQuery (revert back to normal after 2 sec)

    How can I style a JavaFX SplitMenuButton in CSS

    HTML & CSS: How do I completely remove the scroll-bars on the side of
    ?

    How defile CSS rule path for iframe in cascade style sheet (CSS)?

    How do you align left / right a div without using float?

    How to set text area to maximum width in bootstrap

    How do I trigger successive CSS transforms with transitions using jQuery's .css()?

    CSS - how to apply styles to first elements in a static generated list

    How to center a div horizontally in a table using CSS

    meteorjs how to import a wrapbootstrap theme

    How to define margin (CSS) around an absolutely positioned, floating element?

    JQuery show delete button on appended div

    How to add html glyph markup to JQuery show/hide function