Skip to content

Instantly share code, notes, and snippets.

@yukulele

yukulele/dabblet.css

Forked from LeaVerou/dabblet.css
Created January 11, 2014 11:36
Download ZIP

Revisions

  1. yukulele revised this gist Jan 11, 2014. 1 changed file with 0 additions and 2 deletions.
    2 changes: 0 additions & 2 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -37,8 +37,6 @@
    width: .5em;
    height: 1.5em;
    border-radius: .2em;
    background: #eee;
    box-shadow: 0 3.5em #eee; /* container height - part height */
    transform-origin: 50% 2.5em; /* container height / 2 */
    }

  2. yukulele revised this gist Jan 11, 2014. No changes.
  3. yukulele revised this gist Jan 11, 2014. 1 changed file with 9 additions and 4 deletions.
    13 changes: 9 additions & 4 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -43,20 +43,25 @@
    }

    .progress:before {
    background: #555;

    background: #000; /* 8 */
    box-shadow: 0 3.5em #888; /* 4 */
    }

    .progress:after {
    transform: rotate(-45deg);
    background: #777;
    background: #222; /* 7 */
    box-shadow: 0 3.5em #aaa; /* 3 */
    }

    .progress > div:before {
    transform: rotate(-90deg);
    background: #999;
    background: #444; /* 6 */
    box-shadow: 0 3.5em #ccc; /* 2 */
    }

    .progress > div:after {
    transform: rotate(-135deg);
    background: #bbb;
    background: #666; /* 5 */
    box-shadow: 0 3.5em #eee; /* 1 */
    }
  4. @LeaVerou LeaVerou revised this gist Nov 29, 2013. No changes.
  5. @LeaVerou LeaVerou revised this gist Nov 29, 2013. 2 changed files with 28 additions and 13 deletions.
    33 changes: 23 additions & 10 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -8,10 +8,22 @@

    .progress {
    position: relative;
    width: 10em;
    height: 10em;
    font-size: 10px;
    animation: spin 2s infinite steps(8);
    display: inline-block;
    width: 5em;
    height: 5em;
    margin: 0 .5em;
    font-size: 12px;
    text-indent: 999em;
    overflow: hidden;
    animation: spin 1s infinite steps(8);
    }

    .small.progress {
    font-size: 6px;
    }

    .large.progress {
    font-size: 24px;
    }

    .progress:before,
    @@ -20,13 +32,14 @@
    .progress > div:after {
    content: '';
    position: absolute;
    left: 4.5em; /* (container width - part width)/2 */
    width: 1em;
    height: 3em;
    border-radius: .4em;
    top: 0;
    left: 2.25em; /* (container width - part width)/2 */
    width: .5em;
    height: 1.5em;
    border-radius: .2em;
    background: #eee;
    box-shadow: 0 7em #eee; /* container height - part height */
    transform-origin: 50% 5em; /* container height / 2 */
    box-shadow: 0 3.5em #eee; /* container height - part height */
    transform-origin: 50% 2.5em; /* container height / 2 */
    }

    .progress:before {
    8 changes: 5 additions & 3 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,5 @@
    <div class="progress">
    <div></div>
    </div>
    <div class="small progress"><div>Loading…</div></div>

    <div class="progress"><div>Loading…</div></div>

    <div class="large progress"><div>Loading…</div></div>
  6. @LeaVerou LeaVerou revised this gist Nov 29, 2013. 1 changed file with 0 additions and 1 deletion.
    1 change: 0 additions & 1 deletion dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,6 +1,5 @@
    /**
    * (C)Leanest CSS spinner ever
    * IN PROGRESS
    */

    @keyframes spin {
  7. @LeaVerou LeaVerou revised this gist Nov 29, 2013. 1 changed file with 5 additions and 9 deletions.
    14 changes: 5 additions & 9 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -4,9 +4,7 @@
    */

    @keyframes spin {
    to {
    transform: rotate(360deg);
    }
    to { transform: rotate(1turn); }
    }

    .progress {
    @@ -33,22 +31,20 @@
    }

    .progress:before {
    box-shadow: 0 7em #ccc;
    background: #555;
    }

    .progress:after {
    transform: rotate(-45deg);
    background: #666;
    background: #777;
    }

    .progress > div:before {
    transform: rotate(-90deg);
    animation-delay: 200s;
    background: #888;
    background: #999;
    }

    .progress > div:after {
    transform: rotate(-135deg);
    animation-delay: 300s;
    background: #aaa;
    background: #bbb;
    }
  8. @LeaVerou LeaVerou revised this gist Nov 29, 2013. 1 changed file with 13 additions and 9 deletions.
    22 changes: 13 additions & 9 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -5,8 +5,7 @@

    @keyframes spin {
    to {
    background: grey;
    box-shadow: 0 7em white;
    transform: rotate(360deg);
    }
    }

    @@ -15,6 +14,7 @@
    width: 10em;
    height: 10em;
    font-size: 10px;
    animation: spin 2s infinite steps(8);
    }

    .progress:before,
    @@ -27,24 +27,28 @@
    width: 1em;
    height: 3em;
    border-radius: .4em;
    background: black;
    box-shadow: 0 7em grey; /* container height - part height */
    background: #eee;
    box-shadow: 0 7em #eee; /* container height - part height */
    transform-origin: 50% 5em; /* container height / 2 */
    animation: spin 2s infinite steps(8);

    }

    .progress:before {
    box-shadow: 0 7em #ccc;
    }

    .progress:after {
    transform: rotate(-45deg);
    animation-delay: .5s;
    background: #666;
    }

    .progress > div:before {
    transform: rotate(-90deg);
    animation-delay: 1s;
    animation-delay: 200s;
    background: #888;
    }

    .progress > div:after {
    transform: rotate(-135deg);
    animation-delay: 1.5s;
    animation-delay: 300s;
    background: #aaa;
    }
  9. @LeaVerou LeaVerou revised this gist Nov 23, 2013. 2 changed files with 17 additions and 8 deletions.
    23 changes: 16 additions & 7 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,9 +1,13 @@
    /**
    * (C)Leanest CSS spinner ever
    * IN PROGRESS
    */

    @keyframes {
    to { background: grey }
    @keyframes spin {
    to {
    background: grey;
    box-shadow: 0 7em white;
    }
    }

    .progress {
    @@ -23,19 +27,24 @@
    width: 1em;
    height: 3em;
    border-radius: .4em;
    background: blue;
    box-shadow: 0 7em red; /* container height - part height */
    background: black;
    box-shadow: 0 7em grey; /* container height - part height */
    transform-origin: 50% 5em; /* container height / 2 */
    animation: spin 2s infinite steps(8);

    }

    .progress:after {
    transform: rotate(45deg);
    transform: rotate(-45deg);
    animation-delay: .5s;
    }

    .progress > div:before {
    transform: rotate(90deg);
    transform: rotate(-90deg);
    animation-delay: 1s;
    }

    .progress > div:after {
    transform: rotate(135deg);
    transform: rotate(-135deg);
    animation-delay: 1.5s;
    }
    2 changes: 1 addition & 1 deletion settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
    {"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}
  10. @LeaVerou LeaVerou created this gist Nov 23, 2013.
    41 changes: 41 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,41 @@
    /**
    * (C)Leanest CSS spinner ever
    */

    @keyframes {
    to { background: grey }
    }

    .progress {
    position: relative;
    width: 10em;
    height: 10em;
    font-size: 10px;
    }

    .progress:before,
    .progress:after,
    .progress > div:before,
    .progress > div:after {
    content: '';
    position: absolute;
    left: 4.5em; /* (container width - part width)/2 */
    width: 1em;
    height: 3em;
    border-radius: .4em;
    background: blue;
    box-shadow: 0 7em red; /* container height - part height */
    transform-origin: 50% 5em; /* container height / 2 */
    }

    .progress:after {
    transform: rotate(45deg);
    }

    .progress > div:before {
    transform: rotate(90deg);
    }

    .progress > div:after {
    transform: rotate(135deg);
    }
    3 changes: 3 additions & 0 deletions dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    <div class="progress">
    <div></div>
    </div>
    1 change: 1 addition & 0 deletions dabblet.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    // alert('Hello world!');
    1 change: 1 addition & 0 deletions settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}