feat(editor): gfx template package (#11480)

blocksuite/affine/gfx/template/src/toolbar/template-loading.ts

@@ -0,0 +1,50 @@
+import { css, html, LitElement } from 'lit';
+
+export class AffineTemplateLoading extends LitElement {
+  static override styles = css`
+    @keyframes affine-template-block-rotate {
+      from {
+        rotate: 0deg;
+      }
+      to {
+        rotate: 360deg;
+      }
+    }
+
+    .affine-template-block-container {
+      width: 20px;
+      height: 20px;
+      overflow: hidden;
+    }
+
+    .affine-template-block-loading {
+      display: inline-block;
+      width: 20px;
+      height: 20px;
+      position: relative;
+      background: conic-gradient(
+        rgba(30, 150, 235, 1) 90deg,
+        rgba(0, 0, 0, 0.1) 90deg 360deg
+      );
+      border-radius: 50%;
+      animation: affine-template-block-rotate 1s infinite ease-in;
+    }
+
+    .affine-template-block-loading::before {
+      content: '';
+      width: 14px;
+      height: 14px;
+      border-radius: 50%;
+      background-color: white;
+      position: absolute;
+      top: 3px;
+      left: 3px;
+    }
+  `;
+
+  override render() {
+    return html`<div class="affine-template-block-container">
+      <div class="affine-template-block-loading"></div>
+    </div>`;
+  }
+}