loading messages

src/components/RotationBorder/RotationBorder.js

@@ -0,0 +1,20 @@
+import React from "react";
+
+import "./rotationTestStyle.css";
+
+// Web-only rotating gradient border container
+// Props:
+// - active: show rotating gradient when true (default)
+// - style, className: optional DOM styles/classes
+const RotationBorder = ({ children, style, className, active = true }) => {
+  const classes = ["box", active ? "a" : null, className]
+    .filter(Boolean)
+    .join(" ");
+  return (
+    <div className={classes} style={style}>
+      {children}
+    </div>
+  );
+};
+
+export default RotationBorder;

src/components/RotationBorder/rotationTestStyle.css

@@ -0,0 +1,42 @@
+.box {
+  --border-angle: 0deg;
+  border-radius: 12px;
+  width: 100%;
+  height: 260px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  box-shadow: 0px 2px 4px hsl(0 0% 0% / 25%);
+  animation: border-angle-rotate 5s infinite linear;
+  border: 2px solid transparent;
+  position: relative;
+
+  &.a {
+    background: linear-gradient(#11012f, #11012f) padding-box,
+      conic-gradient(
+          from var(--border-angle),
+          oklch(0.6659 0.2211 304.21),
+          oklch(0.6659 0.2211 304.21 / 0%),
+          oklch(0.6659 0.2211 304.21),
+          oklch(0.6659 0.2211 304.21 / 0%),
+          oklch(0.6659 0.2211 304.21)
+          
+        )
+        border-box;
+  }
+}
+
+@keyframes border-angle-rotate {
+  from {
+    --border-angle: 0deg;
+  }
+  to {
+    --border-angle: 360deg;
+  }
+}
+
+@property --border-angle {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: false;
+}