feat: Spinnerを追加

packages/tailwindcss/index.js

@@ -13,6 +13,7 @@ const chat = require("./chat");
 const iconButton = require("./iconButton");
 const likeButton = require("./likeButton");
 const badge = require("./badge");
+const spinner = require("./spinner");
 
 module.exports = [
   button,
@@ -30,4 +31,5 @@ module.exports = [
   iconButton,
   likeButton,
   badge,
+  spinner,
 ];

packages/tailwindcss/spinner.js

@@ -0,0 +1,50 @@
+const plugin = require("tailwindcss/plugin");
+const theme = require("./theme");
+
+module.exports = plugin.withOptions(
+  () => {
+    return ({ addComponents, theme }) => {
+      addComponents([
+        {
+          ".spinner": {
+            "text-align": "center",
+            position: "absolute",
+            ".circular": {
+              height: "42px",
+              width: "42px",
+              animation: "loading-rotate 2s linear infinite",
+            },
+            ".path": {
+              animation: "loading-dash 1.5s ease-in-out infinite",
+              "stroke-dasharray": "90,150",
+              "stroke-dashoffset": 0,
+              "stroke-width": 2,
+              stroke: theme("colors.primary.500"),
+              "stroke-linecap": "round",
+            },
+          },
+          "@keyframes loading-rotate": {
+            "100%": {
+              transform: "rotate(1turn)",
+            },
+          },
+          "@keyframes loading-dash": {
+            "0%": {
+              "stroke-dasharray": "1,200",
+              "stroke-dashoffset": 0,
+            },
+            "50%": {
+              "stroke-dasharray": "90,150",
+              "stroke-dashoffset": "-40px",
+            },
+            "100%": {
+              "stroke-dasharray": "90,150",
+              "stroke-dashoffset": "-120px",
+            },
+          },
+        },
+      ]);
+    };
+  },
+  () => ({ theme })
+);

packages/tailwindcss/stories/Spinner.stories.js

@@ -0,0 +1,15 @@
+export default {
+  title: "Spinner/Spinner",
+};
+
+const Template = () => {
+  return `
+    <div class="spinner">
+        <svg viewBox="25 25 50 50" class="circular">
+            <circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
+        </svg>
+    </div>
+    `;
+};
+
+export const Default = Template.bind({});