Google Inspired CSS Preloader

google-inspired-css-preloader.markdown

Google Inspired CSS Preloader

Simple Google inspired CSS preloader.

• Updated: Now uses SCSS Mixin for Vendor Prefixes

Follow me on Twitter

A Pen by Matt on CodePen.

License.

index.html

<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/aa/Logo_Google_2013_Official.svg/251px-Logo_Google_2013_Official.svg.png" alt="Google Logo" />
<div class="preloader">
  <i>.</i>
  <i>.</i>
  <i>.</i>
</div>

script.js

// Twitter
// @mattsince87

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

body, html {
  height: 100%;
  width: 100%;
  text-align: center;
  padding-top: 30px;}

img { max-height: 46px;}

// Mixin
@mixin css3($property, $value) {
  @each $prefix in -webkit-, -moz-, -ms-, -o-, '' {
    #{$prefix}#{$property}: $value;
  }
}

// Preloader
.preloader {
  position: absolute;
  top: 120px;
  left: 50%;
  margin-left: -35px;
  height: 50px;
  width: 70px;
  overflow: hidden;}

i {
  display: block;
  width: 16px;
  height: 16px;
  background: black;
  border-radius: 16px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -8px 0 0 -8px;
  opacity: 1;
  -webkit-transform: translate3d(60px,0,0);
  overflow: hidden;
  text-indent: -9999px;
  border: 2px solid white;
  &:nth-child(1) {
    background: #d14836; // Red
    @include css3(animation, google 1.75s ease-in-out infinite);
  }
  &:nth-child(2) {
   background: #e9b330; // Yellow
   @include css3(animation, google 1.75s ease-in-out infinite .3s);
  }
  &:nth-child(3) {
   background: #4285f4; // Blue
   @include css3(animation, google 1.75s ease-in-out infinite .6s);
  }
}

@-webkit-keyframes google {
  0%   { opacity: 0;  @include css3(transform, translate3d(60px,0,0));}
  30%  { opacity: 1;  @include css3(transform, translate3d(0,0,0));}
  70%  { opacity: 1;  @include css3(transform, translate3d(0,0,0));}
  100% { opacity: 0;  @include css3(transform, translate3d(-300px,0,0));}
}
@-o-keyframes google {
  0%   { opacity: 0; @include css3(transform, translate3d(60px,0,0));}
  30%  { opacity: 1; @include css3(transform, translate3d(0,0,0));}
  70%  { opacity: 1; @include css3(transform, translate3d(0,0,0));}
  100% { opacity: 0; @include css3(transform, translate3d(-300px,0,0));}
}
@keyframes google {
  0%   { opacity: 0; @include css3(transform, translate3d(60px,0,0));}
  30%  { opacity: 1; @include css3(transform, translate3d(0,0,0));}
  70%  { opacity: 1; @include css3(transform, translate3d(0,0,0));}
  100% { opacity: 0; @include css3(transform, translate3d(-300px,0,0));}
}