Skip to content

Instantly share code, notes, and snippets.

/index.html

Last active February 15, 2017 23:17
Show Gist options
  • Save anonymous/5f7bafec5fde4f6c994fac8a623be91d to your computer and use it in GitHub Desktop.
Save anonymous/5f7bafec5fde4f6c994fac8a623be91d to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @invalid-email-address Anonymous created this gist Feb 15, 2017.
    1 change: 1 addition & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    <div class="loading"></div>
    7 changes: 7 additions & 0 deletions minimal-loading-spinner.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    minimal loading spinner
    -----------------------


    A [Pen](http://codepen.io/ascott/pen/Grezem) by [Alanna Scott](http://codepen.io/ascott) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/ascott/pen/Grezem/license).
    37 changes: 37 additions & 0 deletions style.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,37 @@
    $base-line-height: 24px;
    $white: rgb(255,255,255);
    $light-gray: rgba(#333, 0.15);
    $spin-duration: .9s;

    @keyframes spin {
    0% {
    transform: rotate(0deg);
    }
    100% {
    transform: rotate(360deg);
    }
    }

    html {
    height: 100%;
    }
    body {
    @extend html;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: #ffffff;
    }

    .loading {
    border-radius: 50%;
    width: $base-line-height;
    height: $base-line-height;
    border: .25rem solid $light-gray;
    border-top-color: #00A699;
    animation: spin $spin-duration infinite linear;
    &--double {
    border-style: double;
    border-width: .5rem;
    }
    }