Skip to content

Instantly share code, notes, and snippets.

@zincplusplus

zincplusplus/dabblet.css

Created June 18, 2012 11:55
Download ZIP

Revisions

  1. @ecsspert ecsspert revised this gist Jun 18, 2012. No changes.
  2. @ecsspert ecsspert revised this gist Jun 18, 2012. 1 changed file with 13 additions and 15 deletions.
    28 changes: 13 additions & 15 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -2,31 +2,29 @@
    * Animated png - by eCSSpert.com
    */
    @keyframes loading-spinner {
    0%, 8.32% { background-position: 0 0 }
    8.33%, 16.65% { background-position: 15 0 }
    16.66%, 24.99% { background-position: 30 0 }
    25%, 33.32% { background-position: 45 0 }
    33.33%, 41.65% { background-position: 60 0 }
    41.66%, 49.99% { background-position: 75 0 }
    50%, 58.32% { background-position: 90 0 }
    58.33%, 66.65% { background-position: 105 0 }
    66.66%, 74.99% { background-position: 120 0 }
    75%, 83.32% { background-position: 135 0 }
    83.33%, 91.65% { background-position: 150 0 }
    91.66%, 99.99% { background-position: 165 0 }

    0%, 8.32% { background-position: -0px -0px; }
    8.33%, 16.65% { background-position: -15px -0px; }
    16.66%, 24.99% { background-position: -30px -0px; }
    25%, 33.32% { background-position: -45px -0px; }
    33.33%, 41.65% { background-position: -60px -0px; }
    41.66%, 49.99% { background-position: -75px -0px; }
    50%, 58.32% { background-position: -90px -0px; }
    58.33%, 66.65% { background-position: -105px -0px; }
    66.66%, 74.99% { background-position: -120px -0px; }
    75%, 83.32% { background-position: -135px -0px; }
    83.33%, 91.65% { background-position: -150px -0px; }
    91.66%, 99.99% { background-position: -165px -0px; }
    }
    .loading-spinner {
    background: url(http://cl.ly/0Q23162u212j080e2r39/tab-save-spinner-active.png) no-repeat;
    height: 14px;
    width: 14px;
    animation: loading-spinner 1s linear 0s infinite normal;
    animation: loading-spinner 1.2s linear 0s infinite normal;
    position: absolute;
    left: 50%;
    top: 50%;
    }


    @-webkit-keyframes loading-dots { 0%, 19.99%, 100% { background-position: 0 0 } 20%, 39.99% { background-position: -30px 0 } 40%, 59.99% { background-position: -60px 0 } 60%,79.99% { background-position: -90px 0 } 80%, 99.99% { background-position: -120px 0 } }
    @-firefox-keyframes loading-dots { 0%, 19.99%, 100% { background-position: 0 0 } 20%, 39.99% { background-position: -30px 0 } 40%, 59.99% { background-position: -60px 0 } 60%,79.99% { background-position: -90px 0 } 80%, 99.99% { background-position: -120px 0 } }
    @-ms-keyframes loading-dots { 0%, 19.99%, 100% { background-position: 0 0 } 20%, 39.99% { background-position: -30px 0 } 40%, 59.99% { background-position: -60px 0 } 60%,79.99% { background-position: -90px 0 } 80%, 99.99% { background-position: -120px 0 } }
  3. @ecsspert ecsspert revised this gist Jun 18, 2012. 1 changed file with 15 additions and 7 deletions.
    22 changes: 15 additions & 7 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,14 +1,22 @@
    /**
    * Animated png - by eCSSpert.com
    */
    @keyframes loading-spiner {
    0%, 19.99%, 100% { background-position: 0 0 }
    20%, 39.99% { background-position: -30px 0 }
    40%, 59.99% { background-position: -60px 0 }
    60%,79.99% { background-position: -90px 0 }
    80%, 99.99% { background-position: -120px 0 }
    @keyframes loading-spinner {
    0%, 8.32% { background-position: 0 0 }
    8.33%, 16.65% { background-position: 15 0 }
    16.66%, 24.99% { background-position: 30 0 }
    25%, 33.32% { background-position: 45 0 }
    33.33%, 41.65% { background-position: 60 0 }
    41.66%, 49.99% { background-position: 75 0 }
    50%, 58.32% { background-position: 90 0 }
    58.33%, 66.65% { background-position: 105 0 }
    66.66%, 74.99% { background-position: 120 0 }
    75%, 83.32% { background-position: 135 0 }
    83.33%, 91.65% { background-position: 150 0 }
    91.66%, 99.99% { background-position: 165 0 }

    }
    .loading-spiner {
    .loading-spinner {
    background: url(http://cl.ly/0Q23162u212j080e2r39/tab-save-spinner-active.png) no-repeat;
    height: 14px;
    width: 14px;
  4. @ecsspert ecsspert revised this gist Jun 18, 2012. 1 changed file with 14 additions and 4 deletions.
    18 changes: 14 additions & 4 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,11 +1,21 @@
    /**
    * Animated png - by eCSSpert.com
    http://cl.ly/0Q23162u212j080e2r39/tab-save-spinner-active.png
    */
    @keyframes loading-spiner { 0%, 19.99%, 100% { background-position: 0 0 } 20%, 39.99% { background-position: -30px 0 } 40%, 59.99% { background-position: -60px 0 } 60%,79.99% { background-position: -90px 0 } 80%, 99.99% { background-position: -120px 0 } }
    @keyframes loading-spiner {
    0%, 19.99%, 100% { background-position: 0 0 }
    20%, 39.99% { background-position: -30px 0 }
    40%, 59.99% { background-position: -60px 0 }
    60%,79.99% { background-position: -90px 0 }
    80%, 99.99% { background-position: -120px 0 }
    }
    .loading-spiner {

    background: url(http://cl.ly/0Q23162u212j080e2r39/tab-save-spinner-active.png) no-repeat;
    height: 14px;
    width: 14px;
    animation: loading-spinner 1s linear 0s infinite normal;
    position: absolute;
    left: 50%;
    top: 50%;
    }


  5. @ecsspert ecsspert revised this gist Jun 18, 2012. 3 changed files with 16 additions and 8 deletions.
    20 changes: 14 additions & 6 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,14 +1,22 @@
    /**
    * Animated png
    * Animated png - by eCSSpert.com
    http://cl.ly/0Q23162u212j080e2r39/tab-save-spinner-active.png
    */
    @-webkit-keyframes ball { 0%, 19.99%, 100% { background-position: 0 0 } 20%, 39.99% { background-position: -30px 0 } 40%, 59.99% { background-position: -60px 0 } 60%,79.99% { background-position: -90px 0 } 80%, 99.99% { background-position: -120px 0 } }
    @-firefox-keyframes ball { 0%, 19.99%, 100% { background-position: 0 0 } 20%, 39.99% { background-position: -30px 0 } 40%, 59.99% { background-position: -60px 0 } 60%,79.99% { background-position: -90px 0 } 80%, 99.99% { background-position: -120px 0 } }
    @-ms-keyframes ball { 0%, 19.99%, 100% { background-position: 0 0 } 20%, 39.99% { background-position: -30px 0 } 40%, 59.99% { background-position: -60px 0 } 60%,79.99% { background-position: -90px 0 } 80%, 99.99% { background-position: -120px 0 } }
    div.loading {
    @keyframes loading-spiner { 0%, 19.99%, 100% { background-position: 0 0 } 20%, 39.99% { background-position: -30px 0 } 40%, 59.99% { background-position: -60px 0 } 60%,79.99% { background-position: -90px 0 } 80%, 99.99% { background-position: -120px 0 } }
    .loading-spiner {

    }


    @-webkit-keyframes loading-dots { 0%, 19.99%, 100% { background-position: 0 0 } 20%, 39.99% { background-position: -30px 0 } 40%, 59.99% { background-position: -60px 0 } 60%,79.99% { background-position: -90px 0 } 80%, 99.99% { background-position: -120px 0 } }
    @-firefox-keyframes loading-dots { 0%, 19.99%, 100% { background-position: 0 0 } 20%, 39.99% { background-position: -30px 0 } 40%, 59.99% { background-position: -60px 0 } 60%,79.99% { background-position: -90px 0 } 80%, 99.99% { background-position: -120px 0 } }
    @-ms-keyframes loading-dots { 0%, 19.99%, 100% { background-position: 0 0 } 20%, 39.99% { background-position: -30px 0 } 40%, 59.99% { background-position: -60px 0 } 60%,79.99% { background-position: -90px 0 } 80%, 99.99% { background-position: -120px 0 } }
    .loading-dots {
    background: url(http://dl.dropbox.com/u/3269118/loading.png) no-repeat;
    height: 27px;
    width: 28px;
    animation: ball .7s linear 0s infinite normal;
    animation: loading-dots .7s linear 0s infinite normal;
    position: absolute;
    left: 50%;
    top: 36px;
    2 changes: 1 addition & 1 deletion dabblet.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,3 @@
    <div class="x">
    <div class="loading"></div>
    <div class="loading-spinner"></div>
    </div>
    2 changes: 1 addition & 1 deletion settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    {"view":"separate","seethrough":"","prefixfree":"1","page":"all"}
    {"view":"separate","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
  6. vladzinculescu created this gist Apr 11, 2012.
    21 changes: 21 additions & 0 deletions dabblet.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,21 @@
    /**
    * Animated png
    */
    @-webkit-keyframes ball { 0%, 19.99%, 100% { background-position: 0 0 } 20%, 39.99% { background-position: -30px 0 } 40%, 59.99% { background-position: -60px 0 } 60%,79.99% { background-position: -90px 0 } 80%, 99.99% { background-position: -120px 0 } }
    @-firefox-keyframes ball { 0%, 19.99%, 100% { background-position: 0 0 } 20%, 39.99% { background-position: -30px 0 } 40%, 59.99% { background-position: -60px 0 } 60%,79.99% { background-position: -90px 0 } 80%, 99.99% { background-position: -120px 0 } }
    @-ms-keyframes ball { 0%, 19.99%, 100% { background-position: 0 0 } 20%, 39.99% { background-position: -30px 0 } 40%, 59.99% { background-position: -60px 0 } 60%,79.99% { background-position: -90px 0 } 80%, 99.99% { background-position: -120px 0 } }
    div.loading {
    background: url(http://dl.dropbox.com/u/3269118/loading.png) no-repeat;
    height: 27px;
    width: 28px;
    animation: ball .7s linear 0s infinite normal;
    position: absolute;
    left: 50%;
    top: 36px;
    }
    .x {
    width: 500px;
    height: 100px;
    background: blue;
    position: relative;
    }
    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="x">
    <div class="loading"></div>
    </div>
    1 change: 1 addition & 0 deletions settings.json
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    {"view":"separate","seethrough":"","prefixfree":"1","page":"all"}