Merge pull request Chalarangelo#18 from atomiks/donut-spinner

[FEATURE] Add donut-spinner snippet
VKorotynskyy · Feb 28, 2018 · d41e267 · d41e267
2 parents 506a73f + eb5e62a
commit d41e267
Show file tree

Hide file tree

Showing 7 changed files with 1,000 additions and 35 deletions.
diff --git a/docs/464d45b6c0aa745a9d68e563688b3354.png b/docs/464d45b6c0aa745a9d68e563688b3354.png
diff --git a/docs/6a92da93c8b31945626bd085895f2309.png b/docs/6a92da93c8b31945626bd085895f2309.png
diff --git a/docs/a4a44c59f0a5b432531e0c4e83a00cf4.css b/docs/a4a44c59f0a5b432531e0c4e83a00cf4.css
diff --git a/docs/a4a44c59f0a5b432531e0c4e83a00cf4.js b/docs/a4a44c59f0a5b432531e0c4e83a00cf4.js
diff --git a/docs/index.html b/docs/index.html
diff --git a/index.html b/index.html
@@ -21,6 +21,7 @@
         <a class="sidebar__link" href="#clearfix">Clearfix</a>
         <a class="sidebar__link" href="#constant-width-to-height-ratio">Constant width to height ratio</a>
         <a class="sidebar__link" href="#custom-text-selection">Custom text selection</a>
+        <a class="sidebar__link" href="#donut-spinner">Donut spinner</a>
         <a class="sidebar__link" href="#easing-variables">Easing variables</a>
         <a class="sidebar__link" href="#etched-text">Etched text</a>
         <a class="sidebar__link" href="#gradient-text">Gradient text</a>
@@ -174,6 +175,66 @@ <h4 data-type="Browser support">Browser support</h4>
               </li>
             </ul>
           </div>
+          <div class="snippet">
+            <h3 id="donut-spinner">Donut spinner</h3>
+            <p>Creates a donut spinner that can be used to indicate the loading of content.</p>
+            <h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;div class="donut"&gt;&lt;/div&gt;
+</code></pre>
+            <h4 data-type="CSS">CSS</h4><pre><code class="lang-css">@keyframes donut-spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg);}
+}
+.donut {
+  display: inline-block;
+  border: 4px solid rgba(0, 0, 0, 0.25);
+  border-left-color: blue;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  animation: donut-spin 1.2s linear infinite;
+}
+</code></pre>
+            <h4 data-type="Demo">Demo</h4>
+            <div class="snippet-demo">
+              <div class="snippet-demo__donut-spinner"></div>
+            </div>
+            <style>
+              @keyframes snippet-demo__donut-spin {
+                0% {
+                  transform: rotate(0deg);
+                }
+                100% {
+                  transform: rotate(360deg);
+                }
+              }
+              .snippet-demo__donut-spinner {
+                display: inline-block;
+                border: 4px solid rgba(0, 0, 0, 0.25);
+                border-left-color: blue;
+                border-radius: 50%;
+                width: 20px;
+                height: 20px;
+                animation: snippet-demo__donut-spin 1.2s linear infinite;
+              }
+            </style>
+            <h4 data-type="Explanation">Explanation</h4>
+            <p>Use a semi-transparent <code>border</code> for the whole element, except one side that will serve as the loading indicator for the donut. Use <code>animation</code> to rotate the element.</p>
+            <h4 data-type="Browser support">Browser support</h4>
+            <div>
+              <div class="snippet__browser-support">
+                94.8%
+              </div>
+            </div>
+            <p><span class="snippet__support-note">⚠️ Requires prefixes for full support.</span></p>
+            <ul>
+              <li>
+                <a href="https://caniuse.com/#feat=css-animation" target="_blank">https://caniuse.com/#feat=css-animation</a>
+              </li>
+              <li>
+                <a href="https://caniuse.com/#feat=transforms2d" target="_blank">https://caniuse.com/#feat=transforms2d</a>
+              </li>
+            </ul>
+          </div>
           <div class="snippet">
             <h3 id="easing-variables">Easing variables</h3>
             <p>Variables that can be reused for <code>transition-timing-function</code> properties, more powerful than the built-in <code>ease</code>, <code>ease-in</code>, <code>ease-out</code> and <code>ease-in-out</code>.</p>

diff --git a/snippets/donut-spinner.md b/snippets/donut-spinner.md
@@ -0,0 +1,61 @@
+### Donut spinner
+
+Creates a donut spinner that can be used to indicate the loading of content.
+
+#### HTML
+
+```html
+<div class="donut"></div>
+```
+
+#### CSS
+
+```css
+@keyframes donut-spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+.donut {
+  display: inline-block;
+  border: 4px solid rgba(0, 0, 0, 0.25);
+  border-left-color: blue;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  animation: donut-spin 1.2s linear infinite;
+}
+```
+
+#### Demo
+
+<div class="snippet-demo">
+  <div class="snippet-demo__donut-spinner"></div>
+</div>
+
+<style>
+@keyframes snippet-demo__donut-spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg);}
+}
+.snippet-demo__donut-spinner {
+  display: inline-block;
+  border: 4px solid rgba(0, 0, 0, 0.25);
+  border-left-color: blue;
+  border-radius: 50%;
+  width: 20px;
+  height: 20px;
+  animation: snippet-demo__donut-spin 1.2s linear infinite;
+}
+</style>
+
+#### Explanation
+
+Use a semi-transparent `border` for the whole element, except one side that will
+serve as the loading indicator for the donut. Use `animation` to rotate the element.
+
+#### Browser support
+
+<span class="snippet__support-note">⚠️ Requires prefixes for full support.</span>
+
+* https://caniuse.com/#feat=css-animation
+* https://caniuse.com/#feat=transforms2d