Skip to content

Instantly share code, notes, and snippets.

@bartaz

bartaz/dabblet.css

Created March 27, 2015 11:36
Show Gist options
  • Save bartaz/73fd63837d401bdb2334 to your computer and use it in GitHub Desktop.
Save bartaz/73fd63837d401bdb2334 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
dabblet.css
@keyframes hideshow {
0% { opacity: 1; } 100% { opacity: 0; }
}
.css-animate rect {
animation: hideshow 1s linear infinite;
}
.css-animate rect:nth-child(1) { animation-delay: 0.0s }
.css-animate rect:nth-child(2) { animation-delay: 0.08333333333333333s }
.css-animate rect:nth-child(3) { animation-delay: 0.16666666666666666s }
.css-animate rect:nth-child(4) { animation-delay: 0.25s }
.css-animate rect:nth-child(5) { animation-delay: 0.3333333333333333s }
.css-animate rect:nth-child(6) { animation-delay: 0.4166666666666667s }
.css-animate rect:nth-child(7) { animation-delay: 0.5s }
.css-animate rect:nth-child(8) { animation-delay: 0.5833333333333334s }
.css-animate rect:nth-child(9) { animation-delay: 0.6666666666666666s }
.css-animate rect:nth-child(10) { animation-delay: 0.75s }
.css-animate rect:nth-child(11) { animation-delay: 0.8333333333333334s }
.css-animate rect:nth-child(12) { animation-delay: 0.9166666666666666s }
Raw
dabblet.html
<svg width="32px" height="32px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" id="loader">
<rect id="loader-icon" x="46.5" y="10" width="7" height="20" rx="5" ry="5" fill="#999" opacity="0" transform="rotate(0 50 50)">
<animate attributeName="opacity" from="1" to="0" dur="1s" begin="0s" repeatCount="indefinite"/>
</rect>
<rect id="loader-icon" x="46.5" y="10" width="7" height="20" rx="5" ry="5" fill="#999" opacity="0" transform="rotate(30 50 50)">
<animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.08333333333333333s" repeatCount="indefinite"/>
</rect>
<rect id="loader-icon" x="46.5" y="10" width="7" height="20" rx="5" ry="5" fill="#999" opacity="0" transform="rotate(60 50 50)">
<animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.16666666666666666s" repeatCount="indefinite"/>
</rect>
<rect id="loader-icon" x="46.5" y="10" width="7" height="20" rx="5" ry="5" fill="#999" opacity="0" transform="rotate(90 50 50)">
<animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.25s" repeatCount="indefinite"/>
</rect>
<rect id="loader-icon" x="46.5" y="10" width="7" height="20" rx="5" ry="5" fill="#999" opacity="0" transform="rotate(120 50 50)">
<animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.3333333333333333s" repeatCount="indefinite"/>
</rect>
<rect id="loader-icon" x="46.5" y="10" width="7" height="20" rx="5" ry="5" fill="#999" opacity="0" transform="rotate(150 50 50)">
<animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.4166666666666667s" repeatCount="indefinite"/>
</rect>
<rect id="loader-icon" x="46.5" y="10" width="7" height="20" rx="5" ry="5" fill="#999" opacity="0" transform="rotate(180 50 50)">
<animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.5s" repeatCount="indefinite"/>
</rect>
<rect id="loader-icon" x="46.5" y="10" width="7" height="20" rx="5" ry="5" fill="#999" opacity="0" transform="rotate(210 50 50)">
<animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.5833333333333334s" repeatCount="indefinite"/>
</rect>
<rect id="loader-icon" x="46.5" y="10" width="7" height="20" rx="5" ry="5" fill="#999" opacity="0" transform="rotate(240 50 50)">
<animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.6666666666666666s" repeatCount="indefinite"/>
</rect>
<rect id="loader-icon" x="46.5" y="10" width="7" height="20" rx="5" ry="5" fill="#999" opacity="0" transform="rotate(270 50 50)">
<animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.75s" repeatCount="indefinite"/>
</rect>
<rect id="loader-icon" x="46.5" y="10" width="7" height="20" rx="5" ry="5" fill="#999" opacity="0" transform="rotate(300 50 50)">
<animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.8333333333333334s" repeatCount="indefinite"/>
</rect>
<rect id="loader-icon" x="46.5" y="10" width="7" height="20" rx="5" ry="5" fill="#999" opacity="0" transform="rotate(330 50 50)">
<animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.9166666666666666s" repeatCount="indefinite"/>
</rect>
</svg>
<svg class="css-animate" width="32px" height="32px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" id="loader-static">
<rect id="loader-static-icon" x="46.5" y="10" width="7" height="20" rx="5" ry="5" fill="#999" opacity="0.5" transform="rotate(0 50 50)">
</rect>
<rect id="loader-static-icon" x="46.5" y="10" width="7" height="20" rx="5" ry="5" fill="#999" opacity="0.5" transform="rotate(30 50 50)">
</rect>
<rect id="loader-static-icon" x="46.5" y="10" width="7" height="20" rx="5" ry="5" fill="#999" opacity="0.5" transform="rotate(60 50 50)">
</rect>
<rect id="loader-static-icon" x="46.5" y="10" width="7" height="20" rx="5" ry="5" fill="#999" opacity="0.5" transform="rotate(90 50 50)">
</rect>
<rect id="loader-static-icon" x="46.5" y="10" width="7" height="20" rx="5" ry="5" fill="#999" opacity="0.5" transform="rotate(120 50 50)">
</rect>
<rect id="loader-static-icon" x="46.5" y="10" width="7" height="20" rx="5" ry="5" fill="#999" opacity="0.5" transform="rotate(150 50 50)">
</rect>
<rect id="loader-static-icon" x="46.5" y="10" width="7" height="20" rx="5" ry="5" fill="#999" opacity="0.5" transform="rotate(180 50 50)">
</rect>
<rect id="loader-static-icon" x="46.5" y="10" width="7" height="20" rx="5" ry="5" fill="#999" opacity="0.5" transform="rotate(210 50 50)">
</rect>
<rect id="loader-static-icon" x="46.5" y="10" width="7" height="20" rx="5" ry="5" fill="#999" opacity="0.5" transform="rotate(240 50 50)">
</rect>
<rect id="loader-static-icon" x="46.5" y="10" width="7" height="20" rx="5" ry="5" fill="#999" opacity="0.5" transform="rotate(270 50 50)">
</rect>
<rect id="loader-static-icon" x="46.5" y="10" width="7" height="20" rx="5" ry="5" fill="#999" opacity="0.5" transform="rotate(300 50 50)">
</rect>
<rect id="loader-static-icon" x="46.5" y="10" width="7" height="20" rx="5" ry="5" fill="#999" opacity="0.5" transform="rotate(330 50 50)">
</rect>
</svg>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment