From 15661f2abf73b6398109cb57a443c926ebd040f2 Mon Sep 17 00:00:00 2001
From: Ardis Lu <ardisglu@gmail.com>
Date: Mon, 3 Jan 2022 22:45:39 -0800
Subject: [PATCH] Add inline skeleton loaders

---
 index.html | 33 +++++++++++++++++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/index.html b/index.html
index 2792126..8386b9e 100644
--- a/index.html
+++ b/index.html
@@ -35,6 +35,32 @@
       }
     }
 
+    .skeleton-inline-container {
+      display: flex;
+    }
+
+    .skeleton-inline-square {
+      inline-size: 1em;
+      block-size: 1em;
+      animation: shimmer 1s alternate infinite;
+      background: hsl(0deg 0% 50%);
+    }
+
+    .skeleton-inline-circle {
+      inline-size: 1em;
+      block-size: 1em;
+      border-radius: 1em;
+      animation: shimmer 1s alternate infinite;
+      background: hsl(0deg 0% 50%);
+    }
+
+    .skeleton-inline-line {
+      flex-grow: 1;
+      block-size: 1em;
+      animation: shimmer 1s alternate infinite;
+      background: hsl(0deg 0% 50%);
+    }
+
     .inline-spinner {
       display: inline-block;
       box-sizing: border-box;
@@ -69,6 +95,13 @@
     <p>A block skeleton line loader:</p>
     <div class="skeleton-line"></div>
 
+    <p>An inline skeleton square, circle, and line loader:</p>
+    <div class="skeleton-inline-container">
+      <span class="skeleton-inline-square"></span>
+      <span class="skeleton-inline-circle"></span>
+      <span class="skeleton-inline-line"></span>
+    </div>
+
     <h1>
       <span class="inline-spinner"></span>Some h1 text next to an inline-spinner<span class="inline-spinner"></span>
     </h1>
-- 
2.47.3