Skip to content

Instantly share code, notes, and snippets.

@alanbsmith

alanbsmith/index.html

Created April 24, 2017 21:23
Show Gist options
  • Save alanbsmith/e44e7d34f8f07e4be77f6aea876cbd19 to your computer and use it in GitHub Desktop.
Save alanbsmith/e44e7d34f8f07e4be77f6aea876cbd19 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/zupagawavu
Raw
index.html
<!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>
Raw
jsbin.zupagawavu.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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment