Merge pull request #218 from phuocng/spinner

feat: Spinner

.prettierignore

@@ -1,3 +1,4 @@
+.cache
 .netlify
 _site
 node_modules

contents/_includes/covers/spinner.njk

@@ -0,0 +1 @@
+<div class="spinner"></div>

contents/indeterminate-progress-bar.md

@@ -64,3 +64,4 @@ keywords: css indeterminate progress bar, css progress bar
 ## See also
 
 -   [Progress bar](/progress-bar/)
+-   [Spinner](/spinner/)

contents/index.njk

@@ -85,6 +85,7 @@ eleventyExcludeFromCollections: true
             {% pattern "Progress bar" %}{% include "covers/progress-bar.njk" %}{% endpattern %}
             {% pattern "Radial progress bar" %}{% include "covers/radial-progress-bar.njk" %}{% endpattern %}
             {% pattern "Resizable element" %}{% include "covers/resizable-element.njk" %}{% endpattern %}
+            {% pattern "Spinner" %}{% include "covers/spinner.njk" %}{% endpattern %}
             {% pattern "Tooltip" %}{% include "covers/tooltip.njk" %}{% endpattern %}
             {% pattern "Validation icon" %}{% include "covers/validation-icon.njk" %}{% endpattern %}
         </div>

contents/spinner.md

@@ -0,0 +1,44 @@
+---
+layout: layouts/post.njk
+title: Spinner
+description: Create a loading spinner with CSS
+keywords: css loading spinner, css spinner
+---
+
+## HTML
+
+```html
+<div class="spinner"></div>
+```
+
+## CSS
+
+```css
+.spinner {
+    /* Size */
+    height: 4rem;
+    width: 4rem;
+
+    /* Create a curve at the top */
+    border: 4px solid #d1d5db;
+    border-top-color: #3b82f6;
+    border-radius: 50%;
+
+    animation: spinner 800ms linear infinite;
+}
+
+@keyframes spinner {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+```
+
+{% demo %}{% include "covers/spinner.njk" %}{% enddemo %}
+
+## See also
+
+-   [Indeterminate progress bar](/indeterminate-progress-bar/)

styles/index.scss

@@ -92,6 +92,7 @@
 @import './patterns/simple-grid';
 @import './patterns/slider';
 @import './patterns/spin-button';
+@import './patterns/spinner';
 @import './patterns/split-navigation';
 @import './patterns/split-screen';
 @import './patterns/stacked-cards';

styles/patterns/_spinner.scss

@@ -0,0 +1,19 @@
+.spinner {
+    height: 4rem;
+    width: 4rem;
+
+    border: 4px solid #d1d5db;
+    border-top-color: #3b82f6;
+    border-radius: 50%;
+
+    animation: spinner 800ms linear infinite;
+}
+
+@keyframes spinner {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}