Add inline skeleton loaders

diff --git a/index.html b/index.html
index 27921265bb5e26639d585cdbe344cf24da62baa7..8386b9e4234d6320df77119e5ec5592061d3a09f 100644 (file)
--- 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>