Skip to content

Instantly share code, notes, and snippets.

@thedotedge

thedotedge/gist:f46ccf8d7929e78927ff

Created October 28, 2014 11:56
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save thedotedge/f46ccf8d7929e78927ff to your computer and use it in GitHub Desktop.
Save thedotedge/f46ccf8d7929e78927ff to your computer and use it in GitHub Desktop.
Download ZIP
Throbber
Raw
gistfile1.html
<!doctype html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@-webkit-keyframes throbber {
0% {
background: transparent
}
20% {
background: #e2e2e2
}
}
@keyframes throbber {
0% {
background: transparent
}
20% {
background: #e2e2e2
}
}
.throbber {
-webkit-animation: throbber 1250ms 500ms infinite ease-out;
animation: throbber 1250ms 500ms infinite ease-out;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
display: inline-block;
position: relative;
text-indent: -9999px;
width: 18px;
height: 18px;
margin: 0 25px;
border-radius: 50px
}
.throbber:before, .throbber:after {
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
content: '\x200B';
display: inline-block;
width: 18px;
height: 18px;
position: absolute;
top: 0;
border-radius: 50px
}
.throbber:before {
-webkit-animation: throbber 1250ms 250ms infinite ease-out;
animation: throbber 1250ms 250ms infinite ease-out;
left: -25px
}
.throbber:after {
-webkit-animation: throbber 1250ms 750ms infinite ease-out;
animation: throbber 1250ms 750ms infinite ease-out;
right: -25px
}
</style>
</head>
<body style="background-color: black">
<div class="throbber"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment