Skip to content

Instantly share code, notes, and snippets.

@sharnie

sharnie/index.html

Created November 19, 2018 16:27
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 sharnie/fddbe7dc08631707a1c04b702ffda05f to your computer and use it in GitHub Desktop.
Save sharnie/fddbe7dc08631707a1c04b702ffda05f to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source https://jsbin.com/vufehiwibu
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">
body {
background-color: #fff;
}
@keyframes LoadingIndicator_loading_indicator-animation__3qu78 {
0% {
-webkit-animation-timing-function: cubic-bezier(1, 0, 0.7, 1);
animation-timing-function: cubic-bezier(1, 0, 0.7, 1);
opacity: 0.5;
-webkit-transform: scale(1);
transform: scale(1);
}
40% {
-webkit-animation-timing-function: fade-out-timing;
animation-timing-function: fade-out-timing;
opacity: 1;
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
72.5% {
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
opacity: 0.5;
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
opacity: 0.5;
-webkit-transform: scale(1);
transform: scale(1);
}
}
.LoadingIndicator_loading_indicator__2XYPG {
-ms-flex-align: center;
align-items: center;
display: -ms-flexbox;
display: flex;
-ms-flex-positive: 1;
flex-grow: 1;
height: 100%;
-ms-flex-pack: center;
justify-content: center;
}
.LoadingIndicator_loading_indicator--sm__3EMM8 {
content: 56px;
height: 12.44444px;
width: 56px;
}
.LoadingIndicator_loading_indicator-circle__1RpUt {
animation: LoadingIndicator_loading_indicator-animation__3qu78 1.32s linear infinite;
transform-origin: center;
}
.LoadingIndicator_loading_indicator-circle__1RpUt:nth-of-type(2) {
animation-delay: 0.1s;
}
.LoadingIndicator_loading_indicator-circle__1RpUt:nth-of-type(3) {
animation-delay: 0.2s;
}
</style>
</head>
<body>
<svg class="LoadingIndicator_loading_indicator--sm__3EMM8" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 1 100" xml:space="preserve">
<circle class="LoadingIndicator_loading_indicator-circle__1RpUt" fill="#616161" stroke="none" cx="-140" cy="50" r="32"></circle>
<circle class="LoadingIndicator_loading_indicator-circle__1RpUt" fill="#616161" stroke="none" cx="0" cy="50" r="32"></circle>
<circle class="LoadingIndicator_loading_indicator-circle__1RpUt" fill="#616161" stroke="none" cx="140" cy="50" r="32"></circle>
</svg>
<script id="jsbin-source-css" type="text/css">body {
background-color: #fff;
}
@keyframes LoadingIndicator_loading_indicator-animation__3qu78 {
0% {
-webkit-animation-timing-function: cubic-bezier(1, 0, 0.7, 1);
animation-timing-function: cubic-bezier(1, 0, 0.7, 1);
opacity: 0.5;
-webkit-transform: scale(1);
transform: scale(1);
}
40% {
-webkit-animation-timing-function: fade-out-timing;
animation-timing-function: fade-out-timing;
opacity: 1;
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
72.5% {
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
opacity: 0.5;
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
opacity: 0.5;
-webkit-transform: scale(1);
transform: scale(1);
}
}
.LoadingIndicator_loading_indicator__2XYPG {
-ms-flex-align: center;
align-items: center;
display: -ms-flexbox;
display: flex;
-ms-flex-positive: 1;
flex-grow: 1;
height: 100%;
-ms-flex-pack: center;
justify-content: center;
}
.LoadingIndicator_loading_indicator--sm__3EMM8 {
content: 56px;
height: 12.44444px;
width: 56px;
}
.LoadingIndicator_loading_indicator-circle__1RpUt {
animation: LoadingIndicator_loading_indicator-animation__3qu78 1.32s linear infinite;
transform-origin: center;
}
.LoadingIndicator_loading_indicator-circle__1RpUt:nth-of-type(2) {
animation-delay: 0.1s;
}
.LoadingIndicator_loading_indicator-circle__1RpUt:nth-of-type(3) {
animation-delay: 0.2s;
}
</script>
</body>
</html>
Raw
jsbin.vufehiwibu.css
body {
background-color: #fff;
}
@keyframes LoadingIndicator_loading_indicator-animation__3qu78 {
0% {
-webkit-animation-timing-function: cubic-bezier(1, 0, 0.7, 1);
animation-timing-function: cubic-bezier(1, 0, 0.7, 1);
opacity: 0.5;
-webkit-transform: scale(1);
transform: scale(1);
}
40% {
-webkit-animation-timing-function: fade-out-timing;
animation-timing-function: fade-out-timing;
opacity: 1;
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
72.5% {
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
opacity: 0.5;
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
opacity: 0.5;
-webkit-transform: scale(1);
transform: scale(1);
}
}
.LoadingIndicator_loading_indicator__2XYPG {
-ms-flex-align: center;
align-items: center;
display: -ms-flexbox;
display: flex;
-ms-flex-positive: 1;
flex-grow: 1;
height: 100%;
-ms-flex-pack: center;
justify-content: center;
}
.LoadingIndicator_loading_indicator--sm__3EMM8 {
content: 56px;
height: 12.44444px;
width: 56px;
}
.LoadingIndicator_loading_indicator-circle__1RpUt {
animation: LoadingIndicator_loading_indicator-animation__3qu78 1.32s linear infinite;
transform-origin: center;
}
.LoadingIndicator_loading_indicator-circle__1RpUt:nth-of-type(2) {
animation-delay: 0.1s;
}
.LoadingIndicator_loading_indicator-circle__1RpUt:nth-of-type(3) {
animation-delay: 0.2s;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment