-

package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@primevue/themes": "^4.0.6",
+    "@vueuse/core": "^11.0.3",
     "pinia": "^2.1.7",
     "primeflex": "^3.3.1",
     "primeicons": "^7.0.0",
@@ -23,6 +24,7 @@
     "vue-router": "^4.3.3"
   },
   "devDependencies": {
+    "@iconify-json/line-md": "^1.2.1",
     "@playwright/test": "^1.44.1",
     "@tsconfig/node20": "^20.1.4",
     "@types/jsdom": "^21.1.7",
@@ -34,6 +36,7 @@
     "npm-run-all2": "^6.2.0",
     "sass": "^1.77.8",
     "typescript": "~5.4.0",
+    "unplugin-icons": "^0.19.3",
     "vite": "^5.3.1",
     "vite-plugin-vue-devtools": "^7.3.1",
     "vitest": "^1.6.0",

src/components/CircleConfirm.vue

@@ -0,0 +1,44 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="1em"
+    height="1em"
+    viewBox="0 0 24 24"
+  >
+    <g
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+    >
+      <circle cx="12" cy="12" r="9"></circle>
+      <path stroke-dasharray="14" stroke-dashoffset="14" d="M8 12L11 15L16 10">
+        <animate
+          fill="freeze"
+          attributeName="stroke-dashoffset"
+          dur="0.2s"
+          values="14;0"
+          ref="$animate"
+          begin="indefinite"
+        ></animate>
+      </path>
+    </g>
+  </svg>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const $animate = ref<SVGAnimateElement>()
+
+const start = () => {
+    if ($animate.value) {
+        $animate.value.beginElement()
+    }
+}
+
+defineExpose({
+    start
+})
+</script>