feat: add half circle loader

Author: setaman

src/App.vue

@@ -74,6 +74,7 @@
         line-mode="out 20"
         :no-data="noData"
         :determinate="determinate"
+        :loader="{ thickness: 40, color: 'red' }"
       >
         <template v-slot:legend-caption>
           <p slot="legend-caption">TASKS DONE</p>

src/components/Circle/HalfCircle.vue

@@ -24,25 +24,7 @@
     </path>
     <fade-in-transition>
       <g v-if="isLoading">
-        <g :style="{ opacity: `${options.loading ? 1 : 0.45}` }">
-          <path
-            :stroke-width="thickness"
-            class="ep-half-circle--loading animation__loading"
-            :d="path"
-            :fill="computedColorFill"
-            :stroke="computedColor"
-            :stroke-dasharray="circumference"
-            :stroke-linecap="options.line"
-            :style="{
-              transitionTimingFunction: styles.transitionTimingFunction,
-              transformOrigin: styles.transformOrigin,
-              '--ep-loading-stroke-offset': styles['--ep-loading-stroke-offset'],
-              '--ep-circumference': styles['--ep-circumference'],
-              '--ep-negative-circumference': styles['--ep-negative-circumference'],
-            }"
-          >
-          </path>
-        </g>
+        <half-circle-loader :options="options.loader" />
       </g>
     </fade-in-transition>
 
@@ -63,10 +45,11 @@
 <script>
 import CircleMixin from "./circleMixin";
 import FadeInTransition from "../FadeInTransition.vue";
+import HalfCircleLoader from "./HalfCircleLoader.vue";
 
 export default {
   name: "HalfCircleProgress",
-  components: { FadeInTransition },
+  components: { HalfCircleLoader, FadeInTransition },
   mixins: [CircleMixin],
   computed: {
     circumference() {

src/components/Circle/HalfCircleLoader.vue

@@ -0,0 +1,54 @@
+<template>
+  <g :style="{ opacity: `${options.loading ? 1 : 0.45}` }">
+    <path
+      :stroke-width="thickness"
+      class="ep-half-circle--loading animation__loading"
+      :d="path"
+      :fill="computedColorFill"
+      :stroke="computedColor"
+      :stroke-dasharray="circumference"
+      :stroke-linecap="options.line"
+      :style="{
+        transitionTimingFunction: styles.transitionTimingFunction,
+        transformOrigin: styles.transformOrigin,
+        '--ep-loading-stroke-offset': styles['--ep-loading-stroke-offset'],
+        '--ep-circumference': styles['--ep-circumference'],
+        '--ep-negative-circumference': styles['--ep-negative-circumference'],
+      }"
+    >
+    </path>
+  </g>
+</template>
+<script>
+import CircleMixin from "./circleMixin";
+
+export default {
+  name: "HalfCircleLoader",
+  mixins: [CircleMixin],
+  computed: {
+    circumference() {
+      return (this.radius * 2 * Math.PI) / 2;
+    },
+    path() {
+      return ` M ${this.position}, ${this.options.size / 2} a ${this.radius},${this.radius} 0 1,1 ${this.radius * 2},0`;
+    },
+    emptyPath() {
+      return ` M ${this.emptyPosition}, ${this.options.size / 2} a ${this.emptyRadius},${this.emptyRadius} 0 1,1 ${
+        this.emptyRadius * 2
+      },0`;
+    },
+    position() {
+      return this.options.size / 2 - this.radius;
+    },
+    emptyPosition() {
+      return this.options.size / 2 - this.emptyRadius;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+g.ep-half-circle {
+  transform-origin: 50% 50%;
+}
+</style>