Skip to content

Instantly share code, notes, and snippets.

@rlfrahm

rlfrahm/README.md

Last active August 29, 2015 14:09
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save rlfrahm/2ea6d70df4edae7069b6 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save rlfrahm/2ea6d70df4edae7069b6 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. rlfrahm revised this gist Nov 15, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    This activity spinner is an adaptation from this (Codepen)[http://codepen.io/janrubio/pen/DusIE], and is commonly seen in Windows 8.
    This activity spinner is an adaptation from this [Codepen](http://codepen.io/janrubio/pen/DusIE), and is commonly seen in Windows 8.
  2. rlfrahm revised this gist Nov 15, 2014. 1 changed file with 0 additions and 3 deletions.
    3 changes: 0 additions & 3 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,3 @@
    <!DOCTYPE html>
    <meta charset="utf-8">

    <div class="loader">
    <div class="circle"></div>
    <div class="circle"></div>
  3. rlfrahm revised this gist Nov 15, 2014. 1 changed file with 1 addition and 2 deletions.
    3 changes: 1 addition & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -19,7 +19,6 @@
    }

    .loader .circle {
    background: #286090;
    position: absolute;
    width: 38px;
    height: 38px;
    @@ -35,7 +34,7 @@
    width: 5px;
    height: 5px;
    border-radius: 5px;
    background: #fff; /* Pick a color */
    background: #286090; /* Pick a color */
    }

    .loader .circle:nth-child(2) { -webkit-animation-delay: 240ms; }
  4. rlfrahm revised this gist Nov 15, 2014. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -19,6 +19,7 @@
    }

    .loader .circle {
    background: #286090;
    position: absolute;
    width: 38px;
    height: 38px;
  5. rlfrahm revised this gist Nov 15, 2014. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    This activity spinner is an adaptation from this (jsFiddle)[http://jsfiddle.net/vule/nPQNH/], and is commonly seen in Windows 8.
    This activity spinner is an adaptation from this (Codepen)[http://codepen.io/janrubio/pen/DusIE], and is commonly seen in Windows 8.
  6. rlfrahm revised this gist Nov 15, 2014. 1 changed file with 51 additions and 364 deletions.
    415 changes: 51 additions & 364 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,383 +1,70 @@
    <!DOCTYPE html>
    <meta charset="utf-8">

    <div class="windows8">
    <div class="wBall" id="wBall_1">
    <div class="wInnerBall">
    </div>
    </div>
    <div class="wBall" id="wBall_2">
    <div class="wInnerBall">
    </div>
    </div>
    <div class="wBall" id="wBall_3">
    <div class="wInnerBall">
    </div>
    </div>
    <div class="wBall" id="wBall_4">
    <div class="wInnerBall">
    </div>
    </div>
    <div class="wBall" id="wBall_5">
    <div class="wInnerBall">
    </div>
    </div>
    <div class="loader">
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    <div class="circle"></div>
    </div>

    <style>
    .windows8 {
    position: relative;
    width: 90px;
    height: 90px;

    margin-top: 100px;
    margin-left: 100px;
    }

    .windows8 .wBall {
    position: absolute;
    width: 86px;
    height: 86px;
    opacity: 0;

    -moz-transform: rotate(225deg);
    -moz-animation: orbit 7.15s infinite;

    -webkit-transform: rotate(225deg);
    -webkit-animation: orbit 7.15s infinite;

    -ms-transform: rotate(225deg);
    -ms-animation: orbit 7.15s infinite;

    -o-transform: rotate(225deg);
    -o-animation: orbit 7.15s infinite;

    transform: rotate(225deg);
    animation: orbit 7.15s infinite;
    }

    .windows8 .wBall .wInnerBall{
    position: absolute;
    width: 11px;
    height: 11px;
    background: #286090;
    left:0px;
    top:0px;

    -moz-border-radius: 11px;
    -webkit-border-radius: 11px;
    -ms-border-radius: 11px;
    -o-border-radius: 11px;
    border-radius: 11px;
    }

    .windows8 #wBall_1 {
    -moz-animation-delay: 1.56s;
    -webkit-animation-delay: 1.56s;
    -ms-animation-delay: 1.56s;
    -o-animation-delay: 1.56s;
    animation-delay: 1.56s;
    }

    .windows8 #wBall_2 {
    -moz-animation-delay: 0.31s;
    -webkit-animation-delay: 0.31s;
    -ms-animation-delay: 0.31s;
    -o-animation-delay: 0.31s;
    animation-delay: 0.31s;
    }

    .windows8 #wBall_3 {
    -moz-animation-delay: 0.62s;
    -webkit-animation-delay: 0.62s;
    -ms-animation-delay: 0.62s;
    -o-animation-delay: 0.62s;
    animation-delay: 0.62s;
    }

    .windows8 #wBall_4 {
    -moz-animation-delay: 0.94s;
    -webkit-animation-delay: 0.94s;
    -ms-animation-delay: 0.94s;
    -o-animation-delay: 0.94s;
    animation-delay: 0.94s;
    }

    .windows8 #wBall_5 {
    -moz-animation-delay: 1.25s;
    -webkit-animation-delay: 1.25s;
    -ms-animation-delay: 1.25s;
    -o-animation-delay: 1.25s;
    animation-delay: 1.25s;
    .loader {
    position: relative;
    padding-top: 100px;
    width: 40px;
    margin: auto;
    }

    @-moz-keyframes orbit {
    0% {
    opacity: 1;
    z-index:99;
    -moz-transform: rotate(180deg);
    -moz-animation-timing-function: ease-out;
    }

    7% {
    opacity: 1;
    -moz-transform: rotate(300deg);
    -moz-animation-timing-function: linear;
    -moz-origin:0%;
    }

    30% {
    opacity: 1;
    -moz-transform:rotate(410deg);
    -moz-animation-timing-function: ease-in-out;
    -moz-origin:7%;
    }

    39% {
    opacity: 1;
    -moz-transform: rotate(645deg);
    -moz-animation-timing-function: linear;
    -moz-origin:30%;
    }

    70% {
    opacity: 1;
    -moz-transform: rotate(770deg);
    -moz-animation-timing-function: ease-out;
    -moz-origin:39%;
    }

    75% {
    opacity: 1;
    -moz-transform: rotate(900deg);
    -moz-animation-timing-function: ease-out;
    -moz-origin:70%;
    }

    76% {
    opacity: 0;
    -moz-transform:rotate(900deg);
    }

    100% {
    opacity: 0;
    -moz-transform: rotate(900deg);
    }
    }

    @-webkit-keyframes orbit {
    0% {
    opacity: 1;
    z-index:99;
    -webkit-transform: rotate(180deg);
    -webkit-animation-timing-function: ease-out;
    }

    7% {
    opacity: 1;
    -webkit-transform: rotate(300deg);
    -webkit-animation-timing-function: linear;
    -webkit-origin:0%;
    }

    30% {
    opacity: 1;
    -webkit-transform:rotate(410deg);
    -webkit-animation-timing-function: ease-in-out;
    -webkit-origin:7%;
    }

    39% {
    opacity: 1;
    -webkit-transform: rotate(645deg);
    -webkit-animation-timing-function: linear;
    -webkit-origin:30%;
    }

    70% {
    opacity: 1;
    -webkit-transform: rotate(770deg);
    -webkit-animation-timing-function: ease-out;
    -webkit-origin:39%;
    }

    75% {
    opacity: 1;
    -webkit-transform: rotate(900deg);
    -webkit-animation-timing-function: ease-out;
    -webkit-origin:70%;
    }

    76% {
    opacity: 0;
    -webkit-transform:rotate(900deg);
    }

    100% {
    opacity: 0;
    -webkit-transform: rotate(900deg);
    }
    .loader .circle {
    position: absolute;
    width: 38px;
    height: 38px;
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
    -webkit-animation: orbit 2s infinite;
    animation: orbit 5.5s infinite;
    }

    @-ms-keyframes orbit {
    0% {
    opacity: 1;
    z-index:99;
    v-ms-transform: rotate(180deg);
    -ms-animation-timing-function: ease-out;
    }

    7% {
    opacity: 1;
    -ms-transform: rotate(300deg);
    -ms-animation-timing-function: linear;
    -ms-origin:0%;
    }

    30% {
    opacity: 1;
    -ms-transform:rotate(410deg);
    -ms-animation-timing-function: ease-in-out;
    -ms-origin:7%;
    }

    39% {
    opacity: 1;
    -ms-transform: rotate(645deg);
    -ms-animation-timing-function: linear;
    -ms-origin:30%;
    }

    70% {
    opacity: 1;
    -ms-transform: rotate(770deg);
    -ms-animation-timing-function: ease-out;
    -ms-origin:39%;
    }

    75% {
    opacity: 1;
    -ms-transform: rotate(900deg);
    -ms-animation-timing-function: ease-out;
    -ms-origin:70%;
    }

    76% {
    opacity: 0;
    -ms-transform:rotate(900deg);
    }

    100% {
    opacity: 0;
    -ms-transform: rotate(900deg);
    }
    .loader .circle:after {
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 5px;
    background: #fff; /* Pick a color */
    }

    @-o-keyframes orbit {
    0% {
    opacity: 1;
    z-index:99;
    -o-transform: rotate(180deg);
    -o-animation-timing-function: ease-out;
    }

    7% {
    opacity: 1;
    -o-transform: rotate(300deg);
    -o-animation-timing-function: linear;
    -o-origin:0%;
    }

    30% {
    opacity: 1;
    -o-transform:rotate(410deg);
    -o-animation-timing-function: ease-in-out;
    -o-origin:7%;
    }
    .loader .circle:nth-child(2) { -webkit-animation-delay: 240ms; }
    .loader .circle:nth-child(3) { -webkit-animation-delay: 480ms; }
    .loader .circle:nth-child(4) { -webkit-animation-delay: 720ms; }
    .loader .circle:nth-child(5) { -webkit-animation-delay: 960ms; }

    39% {
    opacity: 1;
    -o-transform: rotate(645deg);
    -o-animation-timing-function: linear;
    -o-origin:30%;
    }

    70% {
    opacity: 1;
    -o-transform: rotate(770deg);
    -o-animation-timing-function: ease-out;
    -o-origin:39%;
    }

    75% {
    opacity: 1;
    -o-transform: rotate(900deg);
    -o-animation-timing-function: ease-out;
    -o-origin:70%;
    }

    76% {
    opacity: 0;
    -o-transform:rotate(900deg);
    }

    100% {
    opacity: 0;
    -o-transform: rotate(900deg);
    }
    @-webkit-keyframes orbit {
    0% { -webkit-transform:rotate(225deg);
    -webkit-animation-timing-function: ease-in-out; }

    15% { -webkit-transform:rotate(345deg);
    -webkit-animation-timing-function: linear; }

    85% { -webkit-transform:rotate(455deg);
    -webkit-animation-timing-function: ease-in-out; }

    100% { -webkit-transform:rotate(585deg); }
    }

    @keyframes orbit {
    0% {
    opacity: 1;
    z-index:99;
    transform: rotate(180deg);
    animation-timing-function: ease-out;
    }

    7% {
    opacity: 1;
    transform: rotate(300deg);
    animation-timing-function: linear;
    origin:0%;
    }

    30% {
    opacity: 1;
    transform:rotate(410deg);
    animation-timing-function: ease-in-out;
    origin:7%;
    }

    39% {
    opacity: 1;
    transform: rotate(645deg);
    animation-timing-function: linear;
    origin:30%;
    }

    70% {
    opacity: 1;
    transform: rotate(770deg);
    animation-timing-function: ease-out;
    origin:39%;
    }

    75% {
    opacity: 1;
    transform: rotate(900deg);
    animation-timing-function: ease-out;
    origin:70%;
    }

    76% {
    opacity: 0;
    transform:rotate(900deg);
    }
    @keyframes orbit {
    0% { transform:rotate(225deg);
    animation-timing-function: ease-in-out; }

    15% { transform:rotate(345deg);
    animation-timing-function: linear; }

    85% { transform:rotate(455deg);
    animation-timing-function: ease-in-out; }

    100% {
    opacity: 0;
    transform: rotate(900deg);
    }
    100% { transform:rotate(585deg); opacity: 0; }
    }
    </style>
  7. rlfrahm created this gist Nov 15, 2014.
    1 change: 1 addition & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    This activity spinner is an adaptation from this (jsFiddle)[http://jsfiddle.net/vule/nPQNH/], and is commonly seen in Windows 8.
    383 changes: 383 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,383 @@
    <!DOCTYPE html>
    <meta charset="utf-8">

    <div class="windows8">
    <div class="wBall" id="wBall_1">
    <div class="wInnerBall">
    </div>
    </div>
    <div class="wBall" id="wBall_2">
    <div class="wInnerBall">
    </div>
    </div>
    <div class="wBall" id="wBall_3">
    <div class="wInnerBall">
    </div>
    </div>
    <div class="wBall" id="wBall_4">
    <div class="wInnerBall">
    </div>
    </div>
    <div class="wBall" id="wBall_5">
    <div class="wInnerBall">
    </div>
    </div>
    </div>

    <style>
    .windows8 {
    position: relative;
    width: 90px;
    height: 90px;

    margin-top: 100px;
    margin-left: 100px;
    }

    .windows8 .wBall {
    position: absolute;
    width: 86px;
    height: 86px;
    opacity: 0;

    -moz-transform: rotate(225deg);
    -moz-animation: orbit 7.15s infinite;

    -webkit-transform: rotate(225deg);
    -webkit-animation: orbit 7.15s infinite;

    -ms-transform: rotate(225deg);
    -ms-animation: orbit 7.15s infinite;

    -o-transform: rotate(225deg);
    -o-animation: orbit 7.15s infinite;

    transform: rotate(225deg);
    animation: orbit 7.15s infinite;
    }

    .windows8 .wBall .wInnerBall{
    position: absolute;
    width: 11px;
    height: 11px;
    background: #286090;
    left:0px;
    top:0px;

    -moz-border-radius: 11px;
    -webkit-border-radius: 11px;
    -ms-border-radius: 11px;
    -o-border-radius: 11px;
    border-radius: 11px;
    }

    .windows8 #wBall_1 {
    -moz-animation-delay: 1.56s;
    -webkit-animation-delay: 1.56s;
    -ms-animation-delay: 1.56s;
    -o-animation-delay: 1.56s;
    animation-delay: 1.56s;
    }

    .windows8 #wBall_2 {
    -moz-animation-delay: 0.31s;
    -webkit-animation-delay: 0.31s;
    -ms-animation-delay: 0.31s;
    -o-animation-delay: 0.31s;
    animation-delay: 0.31s;
    }

    .windows8 #wBall_3 {
    -moz-animation-delay: 0.62s;
    -webkit-animation-delay: 0.62s;
    -ms-animation-delay: 0.62s;
    -o-animation-delay: 0.62s;
    animation-delay: 0.62s;
    }

    .windows8 #wBall_4 {
    -moz-animation-delay: 0.94s;
    -webkit-animation-delay: 0.94s;
    -ms-animation-delay: 0.94s;
    -o-animation-delay: 0.94s;
    animation-delay: 0.94s;
    }

    .windows8 #wBall_5 {
    -moz-animation-delay: 1.25s;
    -webkit-animation-delay: 1.25s;
    -ms-animation-delay: 1.25s;
    -o-animation-delay: 1.25s;
    animation-delay: 1.25s;
    }

    @-moz-keyframes orbit {
    0% {
    opacity: 1;
    z-index:99;
    -moz-transform: rotate(180deg);
    -moz-animation-timing-function: ease-out;
    }

    7% {
    opacity: 1;
    -moz-transform: rotate(300deg);
    -moz-animation-timing-function: linear;
    -moz-origin:0%;
    }

    30% {
    opacity: 1;
    -moz-transform:rotate(410deg);
    -moz-animation-timing-function: ease-in-out;
    -moz-origin:7%;
    }

    39% {
    opacity: 1;
    -moz-transform: rotate(645deg);
    -moz-animation-timing-function: linear;
    -moz-origin:30%;
    }

    70% {
    opacity: 1;
    -moz-transform: rotate(770deg);
    -moz-animation-timing-function: ease-out;
    -moz-origin:39%;
    }

    75% {
    opacity: 1;
    -moz-transform: rotate(900deg);
    -moz-animation-timing-function: ease-out;
    -moz-origin:70%;
    }

    76% {
    opacity: 0;
    -moz-transform:rotate(900deg);
    }

    100% {
    opacity: 0;
    -moz-transform: rotate(900deg);
    }
    }

    @-webkit-keyframes orbit {
    0% {
    opacity: 1;
    z-index:99;
    -webkit-transform: rotate(180deg);
    -webkit-animation-timing-function: ease-out;
    }

    7% {
    opacity: 1;
    -webkit-transform: rotate(300deg);
    -webkit-animation-timing-function: linear;
    -webkit-origin:0%;
    }

    30% {
    opacity: 1;
    -webkit-transform:rotate(410deg);
    -webkit-animation-timing-function: ease-in-out;
    -webkit-origin:7%;
    }

    39% {
    opacity: 1;
    -webkit-transform: rotate(645deg);
    -webkit-animation-timing-function: linear;
    -webkit-origin:30%;
    }

    70% {
    opacity: 1;
    -webkit-transform: rotate(770deg);
    -webkit-animation-timing-function: ease-out;
    -webkit-origin:39%;
    }

    75% {
    opacity: 1;
    -webkit-transform: rotate(900deg);
    -webkit-animation-timing-function: ease-out;
    -webkit-origin:70%;
    }

    76% {
    opacity: 0;
    -webkit-transform:rotate(900deg);
    }

    100% {
    opacity: 0;
    -webkit-transform: rotate(900deg);
    }
    }

    @-ms-keyframes orbit {
    0% {
    opacity: 1;
    z-index:99;
    v-ms-transform: rotate(180deg);
    -ms-animation-timing-function: ease-out;
    }

    7% {
    opacity: 1;
    -ms-transform: rotate(300deg);
    -ms-animation-timing-function: linear;
    -ms-origin:0%;
    }

    30% {
    opacity: 1;
    -ms-transform:rotate(410deg);
    -ms-animation-timing-function: ease-in-out;
    -ms-origin:7%;
    }

    39% {
    opacity: 1;
    -ms-transform: rotate(645deg);
    -ms-animation-timing-function: linear;
    -ms-origin:30%;
    }

    70% {
    opacity: 1;
    -ms-transform: rotate(770deg);
    -ms-animation-timing-function: ease-out;
    -ms-origin:39%;
    }

    75% {
    opacity: 1;
    -ms-transform: rotate(900deg);
    -ms-animation-timing-function: ease-out;
    -ms-origin:70%;
    }

    76% {
    opacity: 0;
    -ms-transform:rotate(900deg);
    }

    100% {
    opacity: 0;
    -ms-transform: rotate(900deg);
    }
    }

    @-o-keyframes orbit {
    0% {
    opacity: 1;
    z-index:99;
    -o-transform: rotate(180deg);
    -o-animation-timing-function: ease-out;
    }

    7% {
    opacity: 1;
    -o-transform: rotate(300deg);
    -o-animation-timing-function: linear;
    -o-origin:0%;
    }

    30% {
    opacity: 1;
    -o-transform:rotate(410deg);
    -o-animation-timing-function: ease-in-out;
    -o-origin:7%;
    }

    39% {
    opacity: 1;
    -o-transform: rotate(645deg);
    -o-animation-timing-function: linear;
    -o-origin:30%;
    }

    70% {
    opacity: 1;
    -o-transform: rotate(770deg);
    -o-animation-timing-function: ease-out;
    -o-origin:39%;
    }

    75% {
    opacity: 1;
    -o-transform: rotate(900deg);
    -o-animation-timing-function: ease-out;
    -o-origin:70%;
    }

    76% {
    opacity: 0;
    -o-transform:rotate(900deg);
    }

    100% {
    opacity: 0;
    -o-transform: rotate(900deg);
    }
    }

    @keyframes orbit {
    0% {
    opacity: 1;
    z-index:99;
    transform: rotate(180deg);
    animation-timing-function: ease-out;
    }

    7% {
    opacity: 1;
    transform: rotate(300deg);
    animation-timing-function: linear;
    origin:0%;
    }

    30% {
    opacity: 1;
    transform:rotate(410deg);
    animation-timing-function: ease-in-out;
    origin:7%;
    }

    39% {
    opacity: 1;
    transform: rotate(645deg);
    animation-timing-function: linear;
    origin:30%;
    }

    70% {
    opacity: 1;
    transform: rotate(770deg);
    animation-timing-function: ease-out;
    origin:39%;
    }

    75% {
    opacity: 1;
    transform: rotate(900deg);
    animation-timing-function: ease-out;
    origin:70%;
    }

    76% {
    opacity: 0;
    transform:rotate(900deg);
    }

    100% {
    opacity: 0;
    transform: rotate(900deg);
    }
    }
    </style>