Minimal Throbbers

index.jade

.throbbers_page
    .thobbers_container       
        ul.throbber_containers
          li.thobbers_gray_bg
            ul.throbbers_list
              li
                .throbber.throbber_large
              li
                .throbber.throbber_medium
              li
                .throbber
              li
                .throbber.throbber_small
          li.throbbers_dark_bg
            ul.throbbers_list
              li
                .throbber.throbber_large
              li
                .throbber.throbber_medium
              li
                .throbber
              li
                .throbber.throbber_small
          li.throbbers_green_bg
            ul.throbbers_list
              li
                .throbber.throbber_large.throbber_green
              li
                .throbber.throbber_medium.throbber_green
              li
                .throbber.throbber_green
              li
                .throbber.throbber_small.throbber_green

Minimal-Throbbers.markdown

Minimal Throbbers

A Pen by Mikhail Proniushkin on CodePen.

License.

style.less

* {
  .user-select(none);
  .box-sizing(border-box);
  padding: 0;
  margin: 0;
  outline: none; 
  list-style: none;
}

// Colors

@dark-blue: #363b4a;
@green: #50b87f;
@gray: #f0f4f5;
@throbber-lite-side: #d4d4db;
@throbber-dark-side: #545a6a;

// Layout

.throbbers_page {
  .flexCenter();
  .size(100%, 100%);
  position: fixed;
  
  .thobbers_container {
    .display(relative);
    .size(550px, 450px);
    .flexCenter();
    background: @gray;    
    
    ul.throbber_containers {
      .display(relative);
      width: 300px;     
      
      > li {
        .size(100%, 70px);
        .display(relative);
        .border-radius(2px);
        margin: 20px 0 20px 0;
           
        &.throbbers_dark_bg {
          background: @dark-blue;
        }
        
        &.throbbers_green_bg {
          background: @green;
        }
        
        > ul.throbbers_list {
          .display(relative);
          .flexStretch();
          .size(80%, 80%); 
          margin: 0 auto;
          
          > li {
            .size(45px, 70px);
            .display(relative);
          }
        }
      }
    }
  }

  // Throbbers family
  
  .throbber {
    .size(100%, 100%);
    .flexCenter();

    &:after {
      .display(relative);
      .size(20px, 20px);
      .animation(rotate .6s linear infinite);
      .border-radius(100%);
      border-top: 1px solid @throbber-dark-side;
      border-bottom: 1px solid @throbber-lite-side;
      border-left: 1px solid @throbber-dark-side;
      border-right: 1px solid @throbber-lite-side;
      content: '';
      opacity: .5;
    }

    &.throbber_large {
      &:after {
        .size(40px, 40px);
      }
    }

    &.throbber_medium {
      &:after {
        .size(30px, 30px);
      }
    }

    &.throbber_small {
      &:after {
        .size(10px, 10px);
      }
    }
    
    // Color variations
    
    &.throbber_green {
      &:after {
        opacity: 1;
        border-top: 1px solid darken(@green, 7%);
        border-bottom: 1px solid #fff;
        border-left: 1px solid darken(@green, 7%);
        border-right: 1px solid #fff;
      }
    }
  }
}

// Animation

@keyframes rotate {
  0% {
    .transform(rotateZ(-360deg));
  }
  100% {
    .transform(rotateZ(0deg));
  }
}

@-webkit-keyframes rotate {
  0% {
    .transform(rotateZ(-360deg));
  }
  100% {
    .transform(rotateZ(0deg));
  }
}

@-moz-keyframes rotate {
  0% {
    .transform(rotateZ(-360deg));
  }
  100% {
    .transform(rotateZ(0deg));
  }
}

@-o-keyframes rotate {
  0% {
    .transform(rotateZ(-360deg));
  }
  100% {
    .transform(rotateZ(0deg));
  }
}


// Mixins

.flexCenter() {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.flexStretch() {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
  -moz-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: space-between;
}

.topLeft(@top, @left) {
  top: @top;
  left: @left;
}

.topRight(@top, @right) {
  top: @top;
  right: @right;
}

.bottomLeft(@bottom, @left) {
  bottom: @bottom;
  left: @left;
}

.bottomRight(@bottom, @right) {
  bottom: @bottom;
  right: @right;
}


.display(@position) {
  display: block;
  position: @position;
}

.size(@width, @height) {
  width: @width;
  height: @height;
}

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

.transition(@transition) {
  -webkit-transition: @transition;
  -moz-transition: @transition;
  -ms-transition: @transition;
  -o-transition: @transition;
  transition: @transition;
}

.animation(@animation) {
  -webkit-animation: @animation;
  -moz-animation: @animation;
  -ms-animation: @animation;
  -o-animation: @animation;
  animation: @animation;
}

.user-select(@select) {
  -webkit-user-select: @select;
  -moz-user-select: @select;
  -ms-user-select: @select;
  -o-user-select: @select;
  user-select: @select;
}

.box-sizing(@boxmodel) {
  -webkit-box-sizing: @boxmodel;
  -khtml-box-sizing: @boxmodel;
  -moz-box-sizing: @boxmodel;
  -ms-box-sizing: @boxmodel;
  box-sizing: @boxmodel;
}

.transform (@transform) {
   transform: @transform;
    -webkit-transform: @transform;
    -moz-transform: @transform;
    -o-transform: @transform;
}