<!-- Inspired by Donart Bytes Selimi's Dribbble shot. https://dribbble.com/shots/2252058-Colorful -->
<body>
    <section class="loading">
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
        <div class="dot"></div>
    </section>
</body>
@import "bourbon";
@import "neat";

//GENERAL STYLES
html {
    width: 100%;
    height: 100%;
    background: #2c2f35;
}

body {
    width: 100%;
    height: 100%;
}

.loading {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    @include clearfix();
    max-width: 240px;
    margin: 0 auto;
}


//LOADING
@mixin animation--slide($delay) {
  @include animation(fadeIn 1.8s $ease-in-out-cubic);
  @include animation-iteration-count(infinite);
  @include animation-fill-mode(forwards);
  @include animation-delay(#{$delay}s);
}

@include keyframes(fadeIn) {
  0% {
    @include transform(translateY(0));
  }
  25% {
    @include transform(translateY(-100px));
  }
  50% {
    @include transform(translateY(0));
  }
  100% {
    @include transform(translateY(0));
  }
}

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #FFF;
    float: left;
    margin-right: 12px;
    
    $colors: #0CFBAB #F3396B #08D3FC #FCDB17;
    
    // Loop colors
    @for $dot from 1 through length($colors) {
        &:nth-child(#{length($colors)}n+#{$dot}) {
            background-color: nth($colors, $dot);
        }
    } 
    
    // Loop animation delay
    @for $dot from 1 through 12 {
        &:nth-child(#{$dot}) {
            @include animation--slide($dot/20);

        }
    }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.