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 make layout like notes in Google Keep using CSS?

    How is a CSS “display: table-column” supposed to work?

    How do I get Html Table to respect margins when its width is set to 100%?

    How to animate selection / deselection in ace editor?

    How to set up simple hover buttons with block format?

    How to rewrite a CSS @import statement

    How to apply pseudo-element styling to specific class only?

    How to use font-family with same name?

    How to center an absolutely positioned item in CSS

    How to change inline css using jquery in joomla

    How to switch images on click in html and css

    A text shows up smoothly when hovering thumbnails. Is this a jQuery plugin or just CSS?

    How determine what CSS selector to use from my HTML source code?

    Bootstrap How to make a responsive grid degradating in two steps?

    In CSS/SVG, how to rotate each character of a word?

    CSS - how to code for a specific resolution

    how to improve this CSS layout which look like a table [closed]

    How to make a braille interface for our website

    How to make Flexbox span multiple lines?

    How can I target a block after another block with css?

    CSS: How to clear a floating object only one level, not the all the way to the left?

    How to scroll a page or a element using css

    How to fit textarea exactly inside a div - CSS

    How to use Less variables in CSS

    How to redefine a CSS class for the whole document?

    How can I use CSS `resize` to resize an element to a height/width less than initial height/width on Chrome?

    How to make agile layout?

    How can I force an image to display in its entirety with CSS?

    How to Override bootstrap img height and width properties?

    How can I tell if a particular CSS property is inherited with jQuery?