BdGyJ

BdGyJ.markdown

BdGyJ

A Pen by Limi on CodePen.

License.

index.html

<div class="container loader-1">
     <div class="circle blue"></div>
     <div class="circle red"></div>
  </div>
  
  <div class="container loader-2">
     <div class="circle blue"></div>
     <div class="circle red"></div>
  </div>
  
  <div class="container loader-3">
     <div class="circle red"></div>
     <div class="circle blue"></div>
     <div class="circle darkgrey"></div>
     <div class="circle turquoise"></div>
  </div>
  
  <div class="container loader-4 clearfix">
     <div class="circle red"></div>
     <div class="circle blue"></div>
     <div class="circle darkgrey"></div>
     <div class="circle turquoise"></div>
  </div>
  <div class="container loader-5">
    <div class="circle red"></div>
  </div>
  <div class="container loader-6">
    <div class="row first">
      
      <div class="circle red"></div>
      <div class="circle red medium"></div>
      <div class="circle red small"></div>
      <div class="circle red tiny"></div>
    </div>
    <div class="row second">
      
      <div class="circle blue"></div>
      <div class="circle blue medium"></div>
      <div class="circle blue small"></div>
      <div class="circle blue tiny"></div>
    </div>
    <div class="row third">
      
      <div class="circle darkgrey"></div>
      <div class="circle darkgrey medium"></div>
      <div class="circle darkgrey small"></div>
      <div class="circle darkgrey tiny"></div>
    </div>
    <div class="row fourth">
      
      <div class="circle turquoise"></div>
      <div class="circle turquoise medium"></div>
      <div class="circle turquoise small"></div>
      <div class="circle turquoise tiny"></div>
    </div>
  </div>

style.less

/*
	Less mixins (http://css-tricks.com/snippets/css/useful-css3-less-mixins/)
*/
.text-shadow (@string: 0 1px 3px rgba(0, 0, 0, 0.25)) {
	text-shadow: @string;
}
.box-shadow (@string) {
	-webkit-box-shadow: @string;
	-moz-box-shadow:    @string;
	box-shadow:         @string;
}
.drop-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
	-webkit-box-shadow: @x @y @blur @spread rgba(0, 0, 0, @alpha);
	-moz-box-shadow:    @x @y @blur @spread rgba(0, 0, 0, @alpha);
	box-shadow:         @x @y @blur @spread rgba(0, 0, 0, @alpha);
}
.inner-shadow (@x: 0, @y: 1px, @blur: 2px, @spread: 0, @alpha: 0.25) {
	-webkit-box-shadow: inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
	-moz-box-shadow:    inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
	box-shadow:         inset @x @y @blur @spread rgba(0, 0, 0, @alpha);
}

.box-sizing (@type: border-box) {
	-webkit-box-sizing: @type;
	-moz-box-sizing:    @type;
	box-sizing:         @type;
}

.border-radius (@radius: 5px) {
	-webkit-border-radius:   @radius;
	-moz-border-radius:      @radius;
	border-radius:           @radius;

	-moz-background-clip:    padding;
	-webkit-background-clip: padding-box;
	background-clip:         padding-box;
}
.border-radiuses (@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) {
	-webkit-border-top-right-radius:    @topright;
	-webkit-border-bottom-right-radius: @bottomright;
	-webkit-border-bottom-left-radius:  @bottomleft;
	-webkit-border-top-left-radius:     @topleft;

	-moz-border-radius-topright:    @topright;
	-moz-border-radius-bottomright: @bottomright;
	-moz-border-radius-bottomleft:  @bottomleft;
	-moz-border-radius-topleft:     @topleft;

	border-top-right-radius:        @topright;
	border-bottom-right-radius:     @bottomright;
	border-bottom-left-radius:      @bottomleft;
	border-top-left-radius:         @topleft;

	-moz-background-clip:    padding;
	-webkit-background-clip: padding-box;
	background-clip:         padding-box;
}

.opacity (@opacity: 0.5) {
	-webkit-opacity: @opacity;
	-moz-opacity:    @opacity;
	opacity:         @opacity;
}

.gradient (@startColor: #eee, @endColor: white) {
	background-color: @startColor;
	background: -webkit-linear-gradient(top, @startColor, 50% @startcolor, 51% @endcolor, @endColor);
	background: -moz-linear-gradient(top, @startColor, 50% @startcolor, 51% @endcolor, @endColor);
	background: -ms-linear-gradient(top, @startColor, 50% @startcolor, 51% @endcolor, @endColor);
	background: -o-linear-gradient(top, @startColor, 50% @startcolor, 51% @endcolor, @endColor);
}
.horizontal-gradient (@startColor: #eee, @endColor: white) {
	background-color: @startColor;
	background-image: -webkit-gradient(linear, left top, right top, from(@startColor), to(@endColor));
	background-image: -webkit-linear-gradient(left, @startColor, @endColor);
	background-image: -moz-linear-gradient(left, @startColor, @endColor);
	background-image: -ms-linear-gradient(left, @startColor, @endColor);
	background-image: -o-linear-gradient(left, @startColor, @endColor);
}

.animation (@name, @duration: 300ms, @delay: 0, @x, @ease: ease) {
	-webkit-animation: @name @duration @delay @x @ease;
	-moz-animation:    @name @duration @delay @x @ease;
	-ms-animation:     @name @duration @delay @x @ease;
}

.transition (@transition) {
	-webkit-transition: @transition;
	-moz-transition:    @transition;
	-ms-transition:     @transition;
	-o-transition:      @transition;
}
.transform(@string){
	-webkit-transform:   @string;
	-moz-transform:      @string;
	-ms-transform:       @string;
	-o-transform:        @string;
}
.scale (@factor) {
	-webkit-transform:   scale(@factor);
	-moz-transform:      scale(@factor);
	-ms-transform:       scale(@factor);
	-o-transform:        scale(@factor);
}
.rotate (@deg) {
	-webkit-transform:   rotate(@deg);
	-moz-transform:      rotate(@deg);
	-ms-transform:       rotate(@deg);
	-o-transform:        rotate(@deg);
}
.skew (@deg, @deg2) {
	-webkit-transform:   skew(@deg, @deg2);
	-moz-transform:      skew(@deg, @deg2);
	-ms-transform:       skew(@deg, @deg2);
	-o-transform:        skew(@deg, @deg2);
}
.translate (@x, @y:0) {
	-webkit-transform:   translate(@x, @y);
	-moz-transform:      translate(@x, @y);
	-ms-transform:       translate(@x, @y);
	-o-transform:        translate(@x, @y);
}
.translate3d (@x, @y: 0, @z: 0) {
	-webkit-transform:   translate3d(@x, @y, @z);
	-moz-transform:      translate3d(@x, @y, @z);
	-ms-transform:       translate3d(@x, @y, @z);
	-o-transform:        translate3d(@x, @y, @z);
}
.perspective (@value: 1000) {
	-webkit-perspective: @value;
	-moz-perspective:    @value;
	-ms-perspective:     @value;
	perspective:         @value;
}
.transform-origin (@x:center, @y:center) {
	-webkit-transform-origin: @x @y;
	-moz-transform-origin:    @x @y;
	-ms-transform-origin:     @x @y;
	-o-transform-origin:      @x @y;
}

.horizontal-three-colors(@start-color: coral; @color-stop: 50%; @color-start:51%; @end-color: lightblue) {
    background-image: -webkit-linear-gradient(top, @start-color, @start-color @color-stop, @end-color @color-start, @end-color);
    background-image: -o-linear-gradient(top, @start-color, @start-color @color-stop, @end-color @color-start, @end-color);
    background-image: linear-gradient(to bottom, @start-color, @start-color @color-stop, @end-color @color-start, @end-color);
    background-repeat: no-repeat;
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",argb(@start-color),argb(@end-color))); // IE9 and down, gets no color-stop at all for proper fallback
  }

@-webkit-keyframes bouncers {.scale-it;}
@-moz-keyframes bouncers {.scale-it;}
@-ms-keyframes bouncers {.scale-it;}
@-o-keyframes bouncers {.scale-it;}
@keyframes bouncers {.scale-it;}

@-webkit-keyframes gradient-fill {.gradient-fill;}
@-moz-keyframes gradient-fill {.gradient-fill;}
@-ms-keyframes gradient-fill {.gradient-fill;}
@-o-keyframes gradient-fill {.gradient-fill;}
@keyframes gradient-fill {.gradient-fill;}


@-webkit-keyframes rotating {.rotating;}
@-moz-keyframes rotating {.rotating;}
@-ms-keyframes rotating {.rotating;}
@-o-keyframes rotating {.rotating;}
@keyframes rotating {.rotating;}

@-webkit-keyframes gradient-fill-inverse {.gradient-fill(0%, 100%);}
@-moz-keyframes gradient-fill-inverse {.gradient-fill(0%, 100%);}
@-ms-keyframes gradient-fill-inverse {.gradient-fill(0%, 100%);}
@-o-keyframes gradient-fill-inverse {.gradient-fill(0%, 100%);}
@keyframes gradient-fill-inverse {.gradient-fill(0%, 100%);}


@-webkit-keyframes bouncers-reverse {.scale-it(1.2, .7);}
@-moz-keyframes bouncers-reverse {.scale-it(1.2, .7);}
@-ms-keyframes bouncers-reverse {.scale-it(1.2, .7);}
@-o-keyframes bouncers-reverse {.scale-it(1.2, .7);}
@keyframes bouncers-reverse {.scale-it(1.2, .7);}

/* bounce */


@-webkit-keyframes bouncerball {.bounce;}
@-moz-keyframes bouncerball {.bounce;}
@-ms-keyframes bouncerball {.bounce;}
@-o-keyframes bouncerball {.bounce;}
@keyframes bouncerball {.bounce;}

/* rotation */

@-webkit-keyframes rotation {.rotation;}
@-moz-keyframes rotation {.rotation;}
@-ms-keyframes rotation {.rotation;}
@-o-keyframes rotation {.rotation;}
@keyframes rotation {.rotation;}

@-webkit-keyframes margins {.app;}
@-moz-keyframes margins {.app;}
@-ms-keyframes margins {.app;}
@-o-keyframes margins {.app;}
@keyframes margins {.app;}

.bounce{
  0%{
    .translate(0,0);
    .border-radiuses(50px, 40px, 40px, 50px);

    height: 35px;
    bottom: -1px;
    width: 42px;
  }
  50% {
    .translate(0, -100px);
    width: 40px;
    
    .border-radiuses(50px, 50px, 50px, 50px);
    height: 45px;
    -webkit-filter: blur(.25px);
  }
  70%{
    
    -webkit-filter: blur(1.6px);
    height: 48px;
  }
  100% {
    .translate(0, 0);
  }
  96%,100% {
    .border-radiuses(50px, 35px, 35px, 50px);

    height: 25px;
    bottom: -1px;
  }
  9% {
    width: 42px;
  }
}

.scale-it(@start: .7, @end: 1.2){
  0%, 100% {
    .scale(@start);
  }
  50% {
    .scale(@end);
  }
}
.gradient-fill(@initial: 100%, @final: 0%){
  
  0%,50%{
    background-position: 0 @initial;
  }
  70%,100% {
    background-position: 0 @final;
  }
}
.rotating{
  0%,
  50% {
    .rotate(0)
  }
  50%,100% {
    .rotate(180deg);
  }
}
/*  loader 4 animation  */

.paddding {
    padding: 28px 0px 0px 28px;
}
.nopaddding {
    padding: 14px;
}
.rotation {
  12.5%, 37.5%,62.5%,87.5% {
    .paddding();
  }
  25%{
    .rotate(90deg);
    .nopaddding();
  }
  50% {
    .rotate(180deg);
    .nopaddding();
  }
  75% {
  .rotate(270deg);
    .nopaddding();
  }
  100% {
    .rotate(360deg);
    .nopaddding();
  }
}
.app {
  12.5%, 37.5%,62.5%,87.5% {
    margin: 2px;
  }
  25%,
  50%,
  75%,
  100% {
    margin: 10px;
  }
}
.container {
  margin: 50px;
}
@width: 50px;
.circle {
  width: @width;
  height: @width;
  background: white;
  .border-radius(@width);
  .transform-origin();
  &.medium {
    width: @width / 1.5;
    height: @width / 1.5
  }
  &.small {
    width: @width / 2;
    height: @width / 2;
  }
  &.tiny {
    width: @width / 3;
    height: @width / 3;
  }
}
.blue {
  background: lightblue;
}
.red {
  background: coral;
}
.darkgrey {
  background: slategrey;
}
.turquoise {
  background: MediumTurquoise;
}
.loader-1 .circle {
  display:inline-block;
}
.loader-1 .blue{
  .animation(bouncers, 1s, 0, infinite, ease);
}
.loader-1 .red {
  .animation(bouncers-reverse, 1s, 0, infinite, ease);
}
.loader-2 {
  .animation(rotating, 2s, 2s, infinite, ease-in-out);
  .transform-origin();
  width: 50px;
  .rotate(180deg);
}
.loader-2 .circle {
  .horizontal-three-colors();
  margin: 10px 0
}
.loader-2 .blue {
  background-size: 200%;
  background-position: 0 -100%;
  .animation(gradient-fill, 2s, 0, infinite, ease-in-out);
  -webkit-animation-fill-mode: forward;
}
.loader-2 .red {
  background-size: 200%;
  background-position: 0 0%;
  .animation(gradient-fill-inverse, 2s, 0, infinite, ease-in-out);
}
.loader-3 {
  margin: 150px 0 50px 0;
  border-bottom: 10px solid lightblue;
  position: relative;
}
.loader-3 .circle {
  height: 40px;
  width: 40px;
  .animation(bouncerball, .7s, 0, infinite, ease-in-out);
  .transition(all 2s ease);
  position: absolute;
  bottom:0
}
.loader-3 .blue {
  left: 60px;
  .animation(bouncerball, .7s, .45s, infinite, ease-in-out);
}
.loader-3 .darkgrey {
  left: 120px;
  .animation(bouncerball, .7s, .15s, infinite, ease-in-out);
}
.loader-3 .turquoise {
  left: 180px;
  .animation(bouncerball, .7s, .3s, infinite, ease-in-out);
}
/*  Loader 4  */
@animation-time: 2.5s;
.loader-4 {
  width: 120px;
  height: 120px;
  padding: 14px;
  margin: 0;
  .transform-origin();
.animation(rotation, @animation-time, 0, infinite, ease-in-out);
  .rotate(0);
  
}
.loader-4 .circle {
  display: inline-block;
  margin: 10px;
  width:40px;
  height: 40px;
  float: left;
  .transform-origin();
  .animation(margins, @animation-time, 0, infinite, ease-in-out);
}
.clearfix:after,
.clearfix:before {
  content: ' ';
  clear: both;
  display: block;
  height:0;
  width: 0;
}


@-webkit-keyframes shadows {.move-shadows;}
@-moz-keyframes shadows {.move-shadows;}
@-ms-keyframes shadows {.move-shadows;}
@-o-keyframes shadows {.move-shadows;}
@keyframes shadows {.move-shadows;}

.move-shadows {
  0% {
    box-shadow:
                inset 0 0 0 52px coral,
                inset 0 0 0 115px white,
                inset 0 0 0 100px coral;
  }
  100% {
    box-shadow:
                inset 0 0 2px coral,
                inset 0 0 0 0 white;
  }
}

/*  Loader 5  */
.loader-5 .circle {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  box-shadow: 0;
  .animation(shadows, 1.2s, 0, infinite, ease-in-out);
  
}

@-webkit-keyframes rotates {.move-rotates;}
@-moz-keyframes rotates {.move-rotates;}
@-ms-keyframes rotates {.move-rotates;}
@-o-keyframes rotates {.move-rotates;}
@keyframes rotates {.move-rotates;}

.move-rotates {
  0% {
    .rotate(0);
  }
  100% {
    .rotate(360deg);
  }
}
@-webkit-keyframes rotates-circle {.move-rotates-circle(@width);}
@-moz-keyframes rotates-circle {.move-rotates-circle(@width);}
@-ms-keyframes rotates-circle {.move-rotates-circle(@width);}
@-o-keyframes rotates-circle {.move-rotates-circle(@width);}
@keyframes rotates-circle {.move-rotates-circle(@width);}
@-webkit-keyframes rotates-circle-1 {.move-rotates-circle(@width/3.5);}
@-moz-keyframes rotates-circle-1 {.move-rotates-circle(@width/2);}
@-ms-keyframes rotates-circle-1 {.move-rotates-circle(@width/2);}
@-o-keyframes rotates-circle-1 {.move-rotates-circle(@width/2);}
@keyframes rotates-circle-1 {.move-rotates-circle(@width/2);}
@-webkit-keyframes rotates-circle-2 {.move-rotates-circle(@width/3);}
@-moz-keyframes rotates-circle-2 {.move-rotates-circle(@width/4);}
@-ms-keyframes rotates-circle-2 {.move-rotates-circle(@width/4);}
@-o-keyframes rotates-circle-2 {.move-rotates-circle(@width/4);}
@keyframes rotates-circle-2 {.move-rotates-circle(@width/4);}
@-webkit-keyframes rotates-circle-3 {.move-rotates-circle(@width/6);}
@-moz-keyframes rotates-circle-3 {.move-rotates-circle(@width/5);}
@-ms-keyframes rotates-circle-3 {.move-rotates-circle(@width/5);}
@-o-keyframes rotates-circle-3 {.move-rotates-circle(@width/5);}
@keyframes rotates-circle-3 {.move-rotates-circle(@width/5);}
@-webkit-keyframes rotates-circle-4 {.move-rotates-circle(@width);}
@-moz-keyframes rotates-circle-4 {.move-rotates-circle(@width/7);}
@-ms-keyframes rotates-circle-4 {.move-rotates-circle(@width/7);}
@-o-keyframes rotates-circle-4 {.move-rotates-circle(@width/7);}
@keyframes rotates-circle-4 {.move-rotates-circle(@width/6);}

.move-rotates-circle(@x) {
  0% {
    .translate(0, 0)
  }
  40%,50% {
    .translate(@x*1.1, 0)
  }
  90%,100% {
    .translate(0,0)
  }
}
/*  Loader 6 */
.loader-6 {
  /* background: red; */
  position: relative;
  width: 200px;
  height: 200px;
  margin: 100px auto;
  .transform-origin(50%, 50%);
  .animation(rotates, 1s, 0, infinite, ease-in-out);
  .circle {
  }
  .row {
    position: absolute;
    right: 50px;
     top: -25px;
    .translate(0, 0);
    .transform-origin(0, 100%);
    &.second {
      .rotate(90deg);
    }
    &.third {
      .rotate(180deg)
    }
    &.fourth {
      .rotate(270deg);
    }
  }
  .circle {
    &.medium {
    .animation(rotates-circle-1, .5s, 0, infinite, ease-in-out);
    }
    &.small {
    .animation(rotates-circle-2, .5s, 0, infinite, ease-in-out);
    }
    &.tiny {
    .animation(rotates-circle-3, .5s, 0, infinite, ease-in-out);
    }
    
  }
}