Merge pull request #8 from Odumz/ft-add-unit

Support percent unit prop

Author: delowardev

README.md

@@ -111,6 +111,7 @@ Available Props, this package supports 30+ props
 | viewport | Animate when element is in viewport |  `true`  | Boolean | N/A |
 | on-viewport | Callback function to detect viewport |  `undefined`  | Function | N/A |
 | show-percent | Enable disable percent counter |  `false`  | Boolean | N/A |
+| unit | Unit of percent counter |  `'%'`  | String | N/A |
 
 #### Example:
 

src/App.vue

@@ -5,8 +5,10 @@
     :is-shadow="true"
     :is-bg-shadow="true"
     :show-percent="true"
+    :unit="'%'"
   />
   <circle-progress :viewport="true" :is-gradient="true" />
+  <circle-progress :viewport="true" :show-percent="true" :unit="'Acres'" />
   <circle-progress
     :is-bg-shadow="true"
     :bg-shadow="{

src/components/CircleProgress.vue

@@ -44,7 +44,9 @@
         </filter>
       </template>
     </svg>
-    <span v-if="showPercent" class="current-counter">{{ currentPercent }}</span>
+    <span v-if="showPercent" class="current-counter"
+      >{{ currentPercent }} {{ unit }}</span
+    >
   </div>
 </template>
 
@@ -146,6 +148,10 @@ export default {
     showPercent: {
       type: Boolean,
       default: false
+    },
+    unit: {
+      type: String,
+      default: ""
     }
   },
   setup(props) {