Skip to content

Instantly share code, notes, and snippets.

@SwadhInz

SwadhInz/Modern Google Loader in Pure CSS.markdown

Forked from CodeMyUI/Modern Google Loader in Pure CSS.markdown
Created March 10, 2019 10:34
Show Gist options
  • Save SwadhInz/79f6097f19fd1dd411ea9b6db8814b5b to your computer and use it in GitHub Desktop.
Save SwadhInz/79f6097f19fd1dd411ea9b6db8814b5b to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @invalid-email-address Anonymous created this gist Jun 1, 2015.
    7 changes: 7 additions & 0 deletions Modern Google Loader in Pure CSS.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    Modern Google Loader in Pure CSS
    ('-' * 32)
    Modern Google spinning loader animating through four colors.

    A [Pen](http://codepen.io/jczimm/pen/vEBpoL) by [jczimm](http://codepen.io/jczimm) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/jczimm/pen/vEBpoL/license).
    5 changes: 5 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,5 @@
    <div class="loader">
    <svg class="circular">
    <circle class="path" cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>
    </svg>
    </div>
    72 changes: 72 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,72 @@
    $green: #008744;
    $blue: #0057e7;
    $red: #d62d20;
    $yellow: #ffa700;
    $white: #eee;

    $width: 100px;
    $zoom: 1.7;

    body {
    background-color: $white;
    }

    .loader {
    position: relative;
    margin: 0px auto;
    width: $width;
    height: $width;
    zoom: $zoom;
    }

    .circular {
    animation: rotate 2s linear infinite;
    height: $width;
    position: relative;
    width: $width;
    }


    .path {
    stroke-dasharray: 1,200;
    stroke-dashoffset: 0;
    animation:
    dash 1.5s ease-in-out infinite,
    color 6s ease-in-out infinite
    ;
    stroke-linecap: round;
    }

    @keyframes rotate{
    100%{
    transform: rotate(360deg);
    }
    }
    @keyframes dash{
    0%{
    stroke-dasharray: 1,200;
    stroke-dashoffset: 0;
    }
    50%{
    stroke-dasharray: 89,200;
    stroke-dashoffset: -35;
    }
    100%{
    stroke-dasharray: 89,200;
    stroke-dashoffset: -124;
    }
    }
    @keyframes color{
    100%, 0%{
    stroke: $red;
    }
    40%{
    stroke: $blue;
    }
    66%{
    stroke: $green;
    }
    80%, 90%{
    stroke: $yellow;
    }
    }