diff --git a/.prettierignore b/.prettierignore
index c88c999..bad2f09 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,3 +1,4 @@
+.cache
 .netlify
 _site
 node_modules
\ No newline at end of file
diff --git a/contents/_includes/covers/spinner.njk b/contents/_includes/covers/spinner.njk
new file mode 100644
index 0000000..cba76b8
--- /dev/null
+++ b/contents/_includes/covers/spinner.njk
@@ -0,0 +1 @@
+<div class="spinner"></div>
\ No newline at end of file
diff --git a/contents/indeterminate-progress-bar.md b/contents/indeterminate-progress-bar.md
index e19a650..092d085 100644
--- a/contents/indeterminate-progress-bar.md
+++ b/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/)
diff --git a/contents/index.njk b/contents/index.njk
index 2ad7241..cb99266 100644
--- a/contents/index.njk
+++ b/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>
diff --git a/contents/spinner.md b/contents/spinner.md
new file mode 100644
index 0000000..3c34d5b
--- /dev/null
+++ b/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/)
diff --git a/styles/index.scss b/styles/index.scss
index f428678..0062daa 100644
--- a/styles/index.scss
+++ b/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';
diff --git a/styles/patterns/_spinner.scss b/styles/patterns/_spinner.scss
new file mode 100644
index 0000000..79ae69c
--- /dev/null
+++ b/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);
+    }
+}