rebuild docs

index.html

@@ -43,6 +43,7 @@
         </section>
         <section data-type="animation" class="sidebar__section">
           <h4 class="sidebar__section-heading">animation</h4>
+          <a class="sidebar__link" href="#bouncing-loader"><span>Bouncing loader</span></a>
           <a class="sidebar__link" href="#donut-spinner"><span>Donut spinner</span></a>
           <a class="sidebar__link" href="#easing-variables"><span>Easing variables</span></a>
           <a class="sidebar__link" href="#hover-underline-animation"><span>Hover underline animation</span></a>
@@ -80,6 +81,120 @@
             <button class="tags__tag is-large " data-type="interactivity">
               <i data-feather="edit-2"></i>interactivity</button>
           </nav>
+          <div class="snippet">
+            <h3 id="bouncing-loader"><span>Bouncing loader</span><span class="tags__tag snippet__tag" data-type="animation"><i data-feather="loader"></i>animation</span></h3>
+            <p>Creates a bouncing loader animation.</p>
+            <h4 data-type="HTML">HTML</h4><pre><code class="lang-html">&lt;div class="bouncing-loader"&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+  &lt;div&gt;&lt;/div&gt;
+&lt;/div&gt;
+</code></pre>
+            <h4 data-type="CSS">CSS</h4><pre><code class="lang-css">@keyframes bouncing-loader {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0.1;
+    transform: translateY(-1rem);
+  }
+}
+.bouncing-loader {
+  display: flex;
+  justify-content: center;
+}
+.bouncing-loader &gt; div {
+  width: 1rem;
+  height: 1rem;
+  margin: 3rem 0.2rem;
+  background: #8385aa;
+  border-radius: 50%;
+  animation: bouncing-loader 0.6s infinite alternate;
+}
+.bouncing-loader &gt; div:nth-of-type(2) {
+  animation-delay: 0.2s;
+}
+.bouncing-loader &gt; div:nth-of-type(3) {
+  animation-delay: 0.4s;
+}
+</code></pre>
+            <h4>Demo</h4>
+            <div class="snippet-demo">
+              <div class="snippet-demo__bouncing-loader">
+                <div></div>
+                <div></div>
+                <div></div>
+              </div>
+            </div>
+            <style>
+              @keyframes bouncing-loader {
+                from {
+                  opacity: 1;
+                  transform: translateY(0);
+                }
+                to {
+                  opacity: 0.1;
+                  transform: translateY(-1rem);
+                }
+              }
+              .snippet-demo__bouncing-loader {
+                display: flex;
+                justify-content: center;
+              }
+              .snippet-demo__bouncing-loader>div {
+                width: 1rem;
+                height: 1rem;
+                margin: 3rem 0.2rem;
+                background: #8385aa;
+                border-radius: 50%;
+                animation: bouncing-loader 0.6s infinite alternate;
+              }
+              .snippet-demo__bouncing-loader>div:nth-child(2) {
+                animation-delay: 0.2s;
+              }
+              .snippet-demo__bouncing-loader>div:nth-child(3) {
+                animation-delay: 0.4s;
+              }
+            </style>
+            <h4>Explanation</h4>
+            <p>Note: <code>1rem</code> is usually <code>16px</code>.</p>
+            <ol>
+              <li>
+                <p><code>@keyframes</code> defines an animation that has two states, where the element changes <code>opacity</code>, and is translated up on the 2D plane using <code>transform: translateY()</code>.</p>
+              </li>
+              <li>
+                <p><code>.bouncing-loader</code> is the parent container of the bouncing circles and uses <code>display: flex</code> and <code>justify-content: center</code> to position them in the in the center.</p>
+              </li>
+              <li>
+                <p>Using <code>.bouncing-loader &gt; div</code>, we target the three child <code>div</code>s of the parent to be styled. The <code>div</code>s are given a width and height of <code>1rem</code>, using <code>border-radius: 50%</code> to turn
+                  them from squares to circles.</p>
+              </li>
+              <li>
+                <p><code>margin: 3rem 0.2rem</code> specifies that each circle has a top/bottom margin of <code>3rem</code> and left/right margin of <code>0.2rem</code> so that they do not directly touch each other, giving them some breathing room.</p>
+              </li>
+              <li>
+                <p><code>animation</code> is a shorthand property for the various animation properties: <code>animation-name</code>, <code>animation-duration</code>, <code>animation-iteration-count</code>, <code>animation-direction</code> are used.</p>
+              </li>
+              <li>
+                <p><code>animation-delay</code> is used on the second and third <code>div</code> respectively, so that each element does not start the animation at the same time.</p>
+              </li>
+            </ol>
+            <h4>Browser support</h4>
+            <div>
+              <div class="snippet__browser-support">
+                94.8%
+              </div>
+            </div>
+            <p><span class="snippet__support-note">✅ No caveats.</span></p>
+            <ul>
+              <li>
+                <a href="https://caniuse.com/#feat=css-animation" target="_blank">https://caniuse.com/#feat=css-animation</a>
+              </li>
+            </ul>
+
+            <!-- tags: animation -->
+          </div>
           <div class="snippet">
             <h3 id="box-sizing-reset"><span>Box-sizing reset</span><span class="tags__tag snippet__tag" data-type="layout"><i data-feather="layout"></i>layout</span></h3>
             <p>Resets the box-model so that <code>width</code>s and <code>height</code>s are not affected by their <code>border</code>s or <code>padding</code>.</p>

snippets/bouncing-loader.md

@@ -0,0 +1,113 @@
+### Bouncing loader
+
+Creates a bouncing loader animation.
+
+#### HTML
+
+```html
+<div class="bouncing-loader">
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+```
+
+#### CSS
+
+```css
+@keyframes bouncing-loader {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0.1;
+    transform: translateY(-1rem);
+  }
+}
+.bouncing-loader {
+  display: flex;
+  justify-content: center;
+}
+.bouncing-loader > div {
+  width: 1rem;
+  height: 1rem;
+  margin: 3rem 0.2rem;
+  background: #8385aa;
+  border-radius: 50%;
+  animation: bouncing-loader 0.6s infinite alternate;
+}
+.bouncing-loader > div:nth-of-type(2) {
+  animation-delay: 0.2s;
+}
+.bouncing-loader > div:nth-of-type(3) {
+  animation-delay: 0.4s;
+}
+```
+
+#### Demo
+
+<div class="snippet-demo">
+  <div class="snippet-demo__bouncing-loader">
+  	<div></div>
+    <div></div>
+    <div></div>
+  </div>
+</div>
+
+<style>
+@keyframes bouncing-loader {
+  from {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 0.1;
+    transform: translateY(-1rem);
+  }
+}
+.snippet-demo__bouncing-loader {
+  display: flex;
+  justify-content: center;
+}
+.snippet-demo__bouncing-loader > div {
+  width: 1rem;
+  height: 1rem;
+  margin: 3rem 0.2rem;
+  background: #8385aa;
+  border-radius: 50%;
+  animation: bouncing-loader 0.6s infinite alternate;
+}
+.snippet-demo__bouncing-loader > div:nth-child(2) {
+  animation-delay: 0.2s;
+}
+.snippet-demo__bouncing-loader > div:nth-child(3) {
+  animation-delay: 0.4s;
+}
+</style>
+
+#### Explanation
+
+Note: `1rem` is usually `16px`.
+
+1. `@keyframes` defines an animation that has two states, where the element changes `opacity`, and is translated up on the 2D plane using `transform: translateY()`.
+
+2. `.bouncing-loader` is the parent container of the bouncing circles and uses `display: flex`
+   and `justify-content: center` to position them in the in the center.
+
+3. Using `.bouncing-loader > div`, we target the three child `div`s of the parent to be styled. The `div`s are given a width and height of `1rem`, using `border-radius: 50%` to turn them from squares to circles.
+
+4. `margin: 3rem 0.2rem` specifies that each circle has a top/bottom margin of `3rem` and left/right margin
+   of `0.2rem` so that they do not directly touch each other, giving them some breathing room.
+
+5. `animation` is a shorthand property for the various animation properties: `animation-name`, `animation-duration`, `animation-iteration-count`, `animation-direction` are used.
+
+6. `animation-delay` is used on the second and third `div` respectively, so that each element does not start the animation at the same time.
+
+#### Browser support
+
+<span class="snippet__support-note">✅ No caveats.</span>
+
+* https://caniuse.com/#feat=css-animation
+
+<!-- tags: animation -->

src/js/components/CodepenCopy.js

@@ -2,27 +2,27 @@ import { selectAll } from '../deps/utils'
 
 const snippets = selectAll('.snippet')
 snippets.forEach(snippet => {
-  var codepenForm = document.createElement('form');
+  var codepenForm = document.createElement('form')
-  codepenForm.action = 'https://codepen.io/pen/define';
+  codepenForm.action = 'https://codepen.io/pen/define'
-  codepenForm.method = 'POST';
+  codepenForm.method = 'POST'
-  codepenForm.target = '_blank';
+  codepenForm.target = '_blank'
-  var codepenInput = document.createElement('input');
+  var codepenInput = document.createElement('input')
-  codepenInput.type = 'hidden';
+  codepenInput.type = 'hidden'
-  codepenInput.name = 'data';
+  codepenInput.name = 'data'
-  var codepenButton = document.createElement('button');
+  var codepenButton = document.createElement('button')
-  codepenButton.classList = 'btn is-large codepen-btn';
+  codepenButton.classList = 'btn is-large codepen-btn'
-  codepenButton.innerHTML = '<i data-feather="eye"></i>Edit on Codepen';
+  codepenButton.innerHTML = '<i data-feather="eye"></i>Edit on Codepen'
-  var css = snippet.querySelector('pre code.lang-css');
+  var css = snippet.querySelector('pre code.lang-css')
-  var html = snippet.querySelector('pre code.lang-html');
+  var html = snippet.querySelector('pre code.lang-html')
-  var js = snippet.querySelector('pre code.lang-js');
+  var js = snippet.querySelector('pre code.lang-js')
   var data = {
-    css : css.textContent,
+    css: css.textContent,
     title: snippet.querySelector('h3 > span').textContent,
     html: html ? html.textContent : '',
     js: js ? js.textContent : ''
   }
-  codepenInput.value = JSON.stringify(data);
+  codepenInput.value = JSON.stringify(data)
-  codepenForm.appendChild(codepenInput);
+  codepenForm.appendChild(codepenInput)
-  codepenForm.appendChild(codepenButton);
+  codepenForm.appendChild(codepenButton)
-  snippet.insertBefore(codepenForm, snippet.querySelector('.snippet-demo').nextSibling);
+  snippet.insertBefore(codepenForm, snippet.querySelector('.snippet-demo').nextSibling)
-});
+})