8.5 Snippet - Preloader

1. Loading Animation

<!DOCTYPE html>
<html>
<head>
  <style>
    .loader {
      height: 20px;
      width: 250px;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
    }
    .loader-dot {
      height: 20px;
      width: 20px;
      border-radius: 100%;
      background-color: black;
      position: absolute;
      border: 2px solid white;
      animation: loader 3s infinite ease-in-out alternate;
    }
    .loader-dot:first-child {
      background-color: #8cc759;
      animation-delay: 0.5s;
    }
    .loader-dot:nth-child(2) {
      background-color: #8c6daf;
      animation-delay: 0.4s;
    }
    .loader-dot:nth-child(3) {
      background-color: #ef5d74;
      animation-delay: 0.3s;
    }
    .loader-dot:nth-child(4) {
      background-color: #f9a74b;
      animation-delay: 0.2s;
    }
    .loader-dot:nth-child(5) {
      background-color: #60beeb;
      animation-delay: 0.1s;
    }
    .loader-dot:nth-child(6) {
      background-color: #fbef5a;
      animation-delay: 0s;
    }
    .loader-text {
      position: absolute;
      top: 50px;
      left: 0;
      right: 0;
      width: 4rem;
      margin: auto;
    }
    .loader-text:after {
      content: "Loading";
      font-weight: bold;
      animation-name: loading-text;
      animation-duration: 3s;
      animation-iteration-count: infinite;
    }
    @keyframes loader {
      15% {
        transform: translateX(0);
      }
      45% {
        transform: translateX(230px);
      }
      65% {
        transform: translateX(230px);
      }
      95% {
        transform: translateX(0);
      }
    }
    @keyframes loading-text {
      0% {
        content: "Loading";
      }
      25% {
        content: "Loading.";
      }
      50% {
        content: "Loading..";
      }
      75% {
        content: "Loading...";
      }
    }
  </style>
</head>
<body>
  <div class="loader">
    <div class="loader-dot"></div>
    <div class="loader-dot"></div>
    <div class="loader-dot"></div>
    <div class="loader-dot"></div>
    <div class="loader-dot"></div>
    <div class="loader-dot"></div>
    <div class="loader-text"></div>
  </div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
  <style>
  .loader {
    width: 100px;
    height: 10px;
    text-align: center;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
  .loader span {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: black;
    border-radius: 50px;
    animation: loader 0.9s infinite alternate;
  }
  .loader span:nth-of-type(2) {
    animation-delay: 0.3s;
  }
  .loader span:nth-of-type(3) {
    animation-delay: 0.6s;
  }
  @keyframes loader {
    0% {
      width: 10px;
      height: 10px;
      opacity: 0.9;
      transform: translateY(0);
    }
    100% {
      width: 24px;
      height: 24px;
      opacity: 0.1;
      transform: translateY(-21px);
    }
  }
  </style>
</head>
<body>
  <div class="loader">
    <span></span>
    <span></span>
    <span></span>
</div>
</body>
</html>

2. Page Preloader

<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:300" rel="stylesheet">
  <link rel="stylesheet" href="http://poiemaweb.com/assets/vendor/fancybox/jquery.fancybox.css">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      background: #e3e3e3;
      padding: 20px;
      font-family: "Roboto Slab", serif;
    }
    /* Page Preloader */
    .loader {
      height: 20px;
      width: 250px;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
    }
    .loader-dot {
      height: 20px;
      width: 20px;
      border-radius: 100%;
      background-color: black;
      position: absolute;
      border: 2px solid white;
      animation: loader 3s infinite ease-in-out alternate;
    }
    .loader-dot:first-child {
      background-color: #8cc759;
      animation-delay: 0.5s;
    }
    .loader-dot:nth-child(2) {
      background-color: #8c6daf;
      animation-delay: 0.4s;
    }
    .loader-dot:nth-child(3) {
      background-color: #ef5d74;
      animation-delay: 0.3s;
    }
    .loader-dot:nth-child(4) {
      background-color: #f9a74b;
      animation-delay: 0.2s;
    }
    .loader-dot:nth-child(5) {
      background-color: #60beeb;
      animation-delay: 0.1s;
    }
    .loader-dot:nth-child(6) {
      background-color: #fbef5a;
      animation-delay: 0s;
    }
    .loader-text {
      position: absolute;
      top: 50px;
      left: 0;
      right: 0;
      width: 4rem;
      margin: auto;
    }
    .loader-text:after {
      content: "Loading";
      font-weight: bold;
      animation-name: loading-text;
      animation-duration: 3s;
      animation-iteration-count: infinite;
    }
    @keyframes loader {
      15% {
        transform: translateX(0);
      }
      45% {
        transform: translateX(230px);
      }
      65% {
        transform: translateX(230px);
      }
      95% {
        transform: translateX(0);
      }
    }
    @keyframes loading-text {
      0% {
        content: "Loading";
      }
      25% {
        content: "Loading.";
      }
      50% {
        content: "Loading..";
      }
      75% {
        content: "Loading...";
      }
    }
    /* Page Wrapper */
    .wrapper {
      display: none;
      margin: 50px auto;
      background: #fff;
      max-width: 800px;
      box-shadow: 0px 25px 30px -20px rgba(0, 0, 0, 0.2);
    }
    .filter {
      padding: 20px 0;
      margin-bottom: 20px;
      border-bottom: solid 1px #e3e3e3;
      text-align: center;
      font-size: 12px;
    }
    .filter a {
      margin-right: 10px;
      color: #666;
      text-decoration: none;
      border: 1px solid #ccc;
      padding: 4px 15px;
      border-radius: 50px;
      display: inline-block;
    }
    .filter a.current {
      background: #1e1e1e;
      border: 1px solid #1e1e1e;
      color: #f9f9f9;
    }
    .grid {
      margin: 0 auto;
      padding: 10px;
      perspective: 1000px;
    }
    .grid-item {
      width: 180px;
      height: 100px;
      margin-bottom: 10px;
      border-radius: 4px;
      overflow: hidden;
      cursor: pointer;
      position: relative;
    }
    .fancybox {
      display: block;
      width: 100%;
      height: 100%;
      height: 100%;
      width: 100%;
      border-radius: 4px;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      transition: all .5s;
    }
    .grid-item:hover .fancybox {
      transform: scale(1.1);
    }
    .grid-item:nth-child(1) .fancybox {
      background-image: url(http://poiemaweb.com/assets/images/dribbble-1.png);
    }
    .grid-item:nth-child(2) .fancybox {
      background-image: url(http://poiemaweb.com/assets/images/dribbble-2.png);
    }
    .grid-item:nth-child(3) .fancybox {
      background-image: url(http://poiemaweb.com/assets/images/dribbble-3.png);
    }
    .grid-item:nth-child(4) .fancybox {
      background-image: url(http://poiemaweb.com/assets/images/dribbble-4.png);
    }
    .grid-item:nth-child(5) .fancybox {
      background-image: url(http://poiemaweb.com/assets/images/dribbble-5.png);
    }
    .grid-item:nth-child(6) .fancybox {
      background-image: url(http://poiemaweb.com/assets/images/dribbble-6.png);
    }
    .grid-item:nth-child(7) .fancybox {
      background-image: url(http://poiemaweb.com/assets/images/dribbble-7.png);
    }
    .grid-item:nth-child(8) .fancybox {
      background-image: url(http://poiemaweb.com/assets/images/dribbble-8.png);
    }
    .grid-item:nth-child(9) .fancybox {
      background-image: url(http://poiemaweb.com/assets/images/dribbble-9.png);
    }
    .grid-item:nth-child(10) .fancybox {
      background-image: url(http://poiemaweb.com/assets/images/dribbble-10.png);
    }
    .grid-item:nth-child(11) .fancybox {
      background-image: url(http://poiemaweb.com/assets/images/dribbble-11.png);
    }
    .grid-item:nth-child(12) .fancybox {
      background-image: url(http://poiemaweb.com/assets/images/dribbble-12.png);
    }
    .grid-item:nth-child(13) .fancybox {
      background-image: url(http://poiemaweb.com/assets/images/dribbble-13.png);
    }
    .grid-item:nth-child(14) .fancybox {
      background-image: url(http://poiemaweb.com/assets/images/dribbble-14.png);
    }
    .grid-item:nth-child(15) .fancybox {
      background-image: url(http://poiemaweb.com/assets/images/dribbble-15.png);
    }
    .grid-item:nth-child(16) .fancybox {
      background-image: url(http://poiemaweb.com/assets/images/dribbble-16.png);
    }
    .grid-item:nth-child(17) .fancybox {
      background-image: url(http://poiemaweb.com/assets/images/dribbble-17.png);
    }
    .grid-item:nth-child(18) .fancybox {
      background-image: url(http://poiemaweb.com/assets/images/dribbble-18.png);
    }
    .grid-item:nth-child(19) .fancybox {
      background-image: url(http://poiemaweb.com/assets/images/dribbble-19.png);
    }
    .grid-item:nth-child(4n-5) {
      height: 50px;
    }
    .grid-item:nth-child(2n) {
      height: 300px;
    }
    .grid-item:nth-child(3n) {
      height: 120px;
    }
  </style>
</head>
<body>
  <div class="loader">
    <div class="loader-dot"></div>
    <div class="loader-dot"></div>
    <div class="loader-dot"></div>
    <div class="loader-dot"></div>
    <div class="loader-dot"></div>
    <div class="loader-dot"></div>
    <div class="loader-text"></div>
  </div>

  <div class="wrapper">
    <h1 style="text-align:center; padding:20px;">Isotope Grid Animation & Fancybox</h1>
    <div class="filter">
      <a href="#" data-filter="*" class="current">All Categories</a>
      <a href="#" data-filter=".webTemplates">Web Templates</a>
      <a href="#" data-filter=".logos">Logos</a>
      <a href="#" data-filter=".drawings">Drawings</a>
      <a href="#" data-filter=".ui">UI Elements</a>
    </div>
    <div class="grid">
      <div class="grid-item logos">
        <a class="fancybox" href="http://poiemaweb.com/assets/images/dribbble-1.png"></a>
      </div>
      <div class="grid-item drawings">
        <a class="fancybox" href="http://poiemaweb.com/assets/images/dribbble-2.png"></a>
      </div>
      <div class="grid-item drawings">
        <a class="fancybox" href="http://poiemaweb.com/assets/images/dribbble-3.png"></a>
      </div>
      <div class="grid-item webTemplates">
        <a class="fancybox" href="http://poiemaweb.com/assets/images/dribbble-4.png"></a>
      </div>
      <div class="grid-item webTemplates">
        <a class="fancybox" href="http://poiemaweb.com/assets/images/dribbble-5.png"></a>
      </div>
      <div class="grid-item ui">
        <a class="fancybox" href="http://poiemaweb.com/assets/images/dribbble-6.png"></a>
      </div>
      <div class="grid-item drawings">
        <a class="fancybox" href="http://poiemaweb.com/assets/images/dribbble-7.png"></a>
      </div>
      <div class="grid-item drawings">
        <a class="fancybox" href="http://poiemaweb.com/assets/images/dribbble-8.png"></a>
      </div>
      <div class="grid-item drawings">
        <a class="fancybox" href="http://poiemaweb.com/assets/images/dribbble-9.png"></a>
      </div>
      <div class="grid-item logos">
        <a class="fancybox" href="http://poiemaweb.com/assets/images/dribbble-10.png"></a>
      </div>
      <div class="grid-item ui">
        <a class="fancybox" href="http://poiemaweb.com/assets/images/dribbble-11.png"></a>
      </div>
      <div class="grid-item drawings">
        <a class="fancybox" href="http://poiemaweb.com/assets/images/dribbble-12.png"></a>
      </div>
      <div class="grid-item drawings">
        <a class="fancybox" href="http://poiemaweb.com/assets/images/dribbble-13.png"></a>
      </div>
      <div class="grid-item logos">
        <a class="fancybox" href="http://poiemaweb.com/assets/images/dribbble-14.png"></a>
      </div>
      <div class="grid-item drawings">
        <a class="fancybox" href="http://poiemaweb.com/assets/images/dribbble-15.png"></a>
      </div>
      <div class="grid-item drawings">
        <a class="fancybox" href="http://poiemaweb.com/assets/images/dribbble-16.png"></a>
      </div>
      <div class="grid-item logos">
        <a class="fancybox" href="http://poiemaweb.com/assets/images/dribbble-17.png"></a>
      </div>
      <div class="grid-item drawings">
        <a class="fancybox" href="http://poiemaweb.com/assets/images/dribbble-18.png"></a>
      </div>
      <div class="grid-item drawings">
        <a class="fancybox" href="http://poiemaweb.com/assets/images/dribbble-19.png"></a>
      </div>
    </div>
  </div>
  <script src="http://poiemaweb.com/assets/vendor/jquery/dist/jquery.js"></script>
  <script src="http://poiemaweb.com/assets/vendor/isotope.pkgd.min.js"></script>
  <script src="http://poiemaweb.com/assets/vendor/fancybox/jquery.fancybox.pack.js"></script>
  <script>
    $(function() {

      $('.filter a').click(function() {
        $('.filter .current').removeClass('current');
        $(this).addClass('current');

        var selector = $(this).data('filter');
        $('.grid').isotope({
          filter: selector
        });
        return false;
      });

      // Fancybox
      $('.fancybox').fancybox({
        helpers: {
          overlay: {
            locked: false
          }
        }
      });

      $(window).load(function() {
        $('.loader').delay(500).fadeOut('slow').promise().done(function() {
          $('.wrapper').fadeIn('slow');
          // Masonry Grid
          $('.grid').isotope({
            filter: '*',
            masonry: {
              columnWidth: 180,
              fitWidth: true, // When enabled, you can center the container with CSS.
              gutter: 10
            }
          });
        });
      });
    });
  </script>
</body>
</html>

See the Pen Page Preloader by Ungmo Lee (@ungmo2) on CodePen.

Back to top
Close