feat: implement barebone zola templates

_src/components/Spinner.astro

@@ -0,0 +1,63 @@
+---
+interface Props {
+  size?: number;
+  color?: string; 
+  bgColor?: string;
+}
+
+const {size = 200, color= "#cad3f5", bgColor} = Astro.props;
+---
+
+<div class="spinner">
+  <div class="container">
+    <svg viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="">
+      <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+      <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+      <g id="SVGRepo_iconCarrier">
+        <path class="animation animation-normal" d="M4 24C4 35.0457 12.9543 44 24 44V44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4" stroke={color} stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>
+        <path class="animation animation-reverse" d="M36 24C36 17.3726 30.6274 12 24 12C17.3726 12 12 17.3726 12 24C12 30.6274 17.3726 36 24 36V36" stroke={color} stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path>
+      </g>
+    </svg>
+  </div>
+</div>
+<style define:vars={{size: `${size}px`, bgColor: bgColor ?? "var(--prj-bg)"}}>
+  .spinner {
+    background: var(--bgColor);
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    margin: 10px 0px -10px 0px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 9999;
+  }
+
+  .container {
+    width: var(--size);
+  }
+
+  .animation {
+    animation: rotate 1.5s linear infinite;
+    transform-box: fill-box;
+    transform-origin: center;
+  }
+
+  .animation-normal {
+    animation-direction: normal;
+  }
+
+  .animation-reverse {
+    animation-direction: reverse;
+  }
+
+  @keyframes rotate {
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+</style>