Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</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>
</body>
</html>
 
/* 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;
}
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers