Untitled

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<style id="jsbin-css">
/* colors */
/* animation */
@keyframes bounce {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(6px);
  }

  100% {
    transform: translateY(0);
  }
}
@-webkit-keyframes bounce {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(6px);
  }

  100% {
    transform: translateY(0);
  }
}
body {
  text-align: center;
  margin: 48px;
}

.loading {
  margin: 24px 0;
}

/* shared styles */
.ball {
  animation: bounce 750ms linear infinite;
  border: solid 1px;
  border-radius: 4px;
  display: inline-block;
  height: 6px;
  width: 6px;
}

/* setting animation delays */
.two {
  animation-delay: 250ms;
}

.three {
  animation-delay: 500ms;
}

/* setting colors */
/* blue */
.light-blue {
  background-color: #0492d2;
  border-color: #0492d2;
}

.med-blue {
  background-color: #005d7e;
  border-color: #005d7e;
}

.dark-blue {
  background-color: #032d3d;
  border-color: #032d3d;
}

/* orange */
.light-orange {
  background-color: #fcb651;
  border-color: #fcb651;
}

.med-orange {
  background-color: #f6a623;
  border-color: #f6a623;
}

.dark-orange {
  background-color: #e89213;
  border-color: #e89213;
}

/* green */
.light-green {
  background-color: #67b73d;
  border-color: #67b73d;
}

.med-green {
  background-color: #56a033;
  border-color: #56a033;
}

.dark-green {
  background-color: #4e943e;
  border-color: #4e943e;
}

/* purple */
.light-purple {
  background-color: #9b55aa;
  border-color: #9b55aa;
}

.med-purple {
  background-color: #884893;
  border-color: #884893;
}

.dark-purple {
  background-color: #6d3c77;
  border-color: #6d3c77;
}

/* gray */
.light-gray {
  background-color: #8e969c;
  border-color: #8e969c;
}

.med-gray {
  background-color: #53595b;
  border-color: #53595b;
}

.dark-gray {
  background-color: #333333;
  border-color: #333333;
}

/* status-colors */
.status-red {
  background-color: #cc1111;
  border-color: #cc1111;
}

.status-yellow {
  background-color: #f2c144;
  border-color: #f2c144;
}

.status-green {
  background-color: #00a651;
  border-color: #00a651;
}

</style>
</head>
<body>
  <div class="loading">
    <div class="ball one light-blue"></div>
    <div class="ball two med-blue"></div>
    <div class="ball three dark-blue"></div>
  </div>

  <div class="loading">
    <div class="ball one light-orange"></div>
    <div class="ball two med-orange"></div>
    <div class="ball three dark-orange"></div>
  </div>

  <div class="loading">
    <div class="ball one light-green"></div>
    <div class="ball two med-green"></div>
    <div class="ball three dark-green"></div>
  </div>

  <div class="loading">
    <div class="ball one light-purple"></div>
    <div class="ball two med-purple"></div>
    <div class="ball three dark-purple"></div>
  </div>

  <div class="loading">
    <div class="ball one light-gray"></div>
    <div class="ball two med-gray"></div>
    <div class="ball three dark-gray"></div>
  </div>

  <div class="loading">
    <div class="ball one status-red"></div>
    <div class="ball two status-yellow"></div>
    <div class="ball three status-green"></div>
  </div>


<script id="jsbin-source-css" type="text/css">/* colors */
$brightBlue: #0492d2;
$brandBlue: #005d7e;
$darkBlue: #032d3d;
$lightOrange: #fcb651;
$orange: #f6a623;
$darkOrange: #e89213;
$lightGreen: #67b73d;
$green: #56a033;
$darkGreen: #4e943e;
$lightPurple: #9b55aa;
$purple: #884893;
$darkPurple: #6d3c77;
$midGray: #8e969c;
$gray: #53595b;
$darkGray: #333333;
$statusRed: #cc1111;
$statusYellow: #f2c144;
$statusGreen: #00a651;


/* animation */
@keyframes bounce {
  0% {
    transform: translateY(0);
  }

  50% {
   transform: translateY(6px);
  }

  100% {
    transform: translateY(0);
  }
}

@-webkit-keyframes bounce {
  0% {
    transform: translateY(0);
  }

  50% {
   transform: translateY(6px);
  }

  100% {
    transform: translateY(0);
  }
}

body {
  text-align: center;
  margin: 48px;
}

.loading {
  margin: 24px 0;
}


/* shared styles */
.ball {
  animation: bounce 750ms linear infinite;
  border: solid 1px;
  border-radius: 4px;
  display: inline-block;
  height: 6px;
  width: 6px;
}

/* setting animation delays */

.two {
  animation-delay: 250ms;
}

.three {
  animation-delay: 500ms;
}

/* setting colors */

/* blue */
.light-blue {
  background-color: $brightBlue;
  border-color: $brightBlue;
}
.med-blue {
  background-color: $brandBlue;
  border-color: $brandBlue;
}
.dark-blue {
  background-color: $darkBlue;
  border-color: $darkBlue;
}

/* orange */
.light-orange {
  background-color: $lightOrange;
  border-color: $lightOrange;
}
.med-orange {
  background-color: $orange;
  border-color: $orange;
}
.dark-orange {
  background-color: $darkOrange;
  border-color: $darkOrange;
}


/* green */
.light-green {
  background-color: $lightGreen;
  border-color: $lightGreen;
}
.med-green {
  background-color: $green;
  border-color: $green;
}
.dark-green {
  background-color: $darkGreen;
  border-color: $darkGreen;
}

/* purple */
.light-purple {
  background-color: $lightPurple;
  border-color: $lightPurple;
}
.med-purple {
  background-color: $purple;
  border-color: $purple;
}
.dark-purple {
  background-color: $darkPurple;
  border-color: $darkPurple;
}


/* gray */
.light-gray {
  background-color: $midGray;
  border-color: $midGray;
}
.med-gray {
  background-color: $gray;
  border-color: $gray;
}
.dark-gray {
  background-color: $darkGray;
  border-color: $darkGray;
}

/* status-colors */
.status-red {
  background-color: $statusRed;
  border-color: $statusRed;
}
.status-yellow {
  background-color: $statusYellow;
  border-color: $statusYellow;
}
.status-green {
  background-color: $statusGreen;
  border-color: $statusGreen;
}
</script>
</body>
</html>