From 5db15b6ec7cd41cc15214f4448b064f4dd11f974 Mon Sep 17 00:00:00 2001
From: Jarred Sumner <jarred@jarredsumner.com>
Date: Fri, 20 Aug 2021 13:17:57 -0700
Subject: demos -> examples

Former-commit-id: 19a5d395bd41b0a0b854cdf749eb96149f91cbe1
---
 examples/css-stress-test/src/main.tsx | 67 +++++++++++++++++++++++++++++++++++
 1 file changed, 67 insertions(+)
 create mode 100644 examples/css-stress-test/src/main.tsx

(limited to 'examples/css-stress-test/src/main.tsx')

diff --git a/examples/css-stress-test/src/main.tsx b/examples/css-stress-test/src/main.tsx
new file mode 100644
index 000000000..556f3d3b7
--- /dev/null
+++ b/examples/css-stress-test/src/main.tsx
@@ -0,0 +1,67 @@
+export const Main = ({ productName }) => {
+  return (
+    <>
+      <header>
+        <div className="Title">CSS HMR Stress Test!</div>
+        <p className="Description">
+          This page visually tests how quickly a bundler can update CSS over Hot
+          Module Reloading.
+        </p>
+      </header>
+      <main className="main">
+        <section className="ProgressSection">
+          <p className="Subtitle">
+            <span className="Subtitle-part">
+              Ran: <span className="timer"></span>
+            </span>
+          </p>
+
+          <div className="ProgressBar-container">
+            <div className="ProgressBar"></div>
+          </div>
+          <div className="SectionLabel">
+            The progress bar should move from left to right smoothly.
+          </div>
+        </section>
+
+        <section>
+          <div className="Spinners">
+            <div className="Spinner-container Spinner-1">
+              <div className="Spinner"></div>
+            </div>
+
+            <div className="Spinner-container Spinner-2">
+              <div className="Spinner"></div>
+            </div>
+
+            <div className="Spinner-container Spinner-3">
+              <div className="Spinner"></div>
+            </div>
+
+            <div className="Spinner-container Spinner-4">
+              <div className="Spinner"></div>
+            </div>
+          </div>
+          <div className="SectionLabel">
+            The spinners should rotate &amp; change color smoothly.
+          </div>
+        </section>
+      </main>
+      <footer>
+        <div className="SectionLabel FooterLabel">
+          There are no CSS animations on this page.
+        </div>
+
+        <div className="Bundler-container">
+          <div className="Bundler">{productName}</div>
+          <div className="Bundler-updateRate">
+            {/* This should loose all the styles
+            <span className="highlight">
+              <span className="interval"></span>ms
+            </span> */}
+          </div>
+        </div>
+      </footer>
+    </>
+  );
+};
-- 
cgit v1.2.3