feat(QCircularProgress): border of the rounded arc

docs/src/examples/QCircularProgress/Border.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="q-pa-md flex flex-center">
+    <q-circular-progress
+      rounded
+      :value="value"
+      size="100px"
+      color="orange"
+      class="q-ma-md"
+      :borderWidth="2"
+      borderColor="blue"
+    />
+
+    <q-circular-progress
+      rounded
+      :value="value"
+      size="130px"
+      :thickness="0.2"
+      color="orange"
+      center-color="grey-8"
+      track-color="transparent"
+      class="q-ma-md"
+      :borderWidth="4"
+      borderColor="blue"
+    />
+
+    <q-circular-progress
+      rounded
+      :value="value"
+      size="150px"
+      :thickness="0.22"
+      color="orange"
+      track-color="grey-3"
+      class="q-ma-md"
+      :borderWidth="4"
+      borderColor="blue"
+    />
+
+    <q-circular-progress
+      rounded
+      :value="value"
+      size="190px"
+      :thickness="0.4"
+      color="orange"
+      track-color="grey-3"
+      center-color="grey-8"
+      class="q-ma-md"
+      :borderWidth="7"
+      borderColor="blue"
+    />
+  </div>
+</template>
+
+<script>
+export default {
+  setup () {
+    return {
+      value: 61
+    }
+  }
+}
+</script>

docs/src/pages/vue-components/circular-progress.md

@@ -35,4 +35,6 @@ In the example below, `show-value` property also enables the default slot, so yo
 
 <doc-example title="Rounded arc of progress (v2.8.4+)" file="RoundedStyle" />
 
+<doc-example title="Border arc of progress" file="Border" />
+
 <doc-example title="Standard sizes" file="StandardSizes" />

ui/dev/src/pages/components/circular-progress.vue

@@ -11,6 +11,11 @@
       <q-slider v-model="angle" :min="0" :max="360" label />
       <div>Min/Max</div>
       <q-range v-model="range" :min="0" :max="360" label />
+
+      <div>Border Width</div>
+      <q-slider v-model="borderWidth" :min="0" :max="10" :step="0.1" label />
+      <div>Border Color</div>
+      <q-input v-model="borderColor"  />
       <div>
         <q-toggle v-model="reverse" label="Reverse" />
         <q-toggle v-model="showValue" label="Show Value" />
@@ -31,6 +36,8 @@
         :show-value="showValue"
         :indeterminate="indeterminate"
         :rounded="rounded"
+        :borderWidth="borderWidth"
+        :borderColor="borderColor"
       />
 
       <q-circular-progress
@@ -45,6 +52,8 @@
         :show-value="showValue"
         :indeterminate="indeterminate"
         :rounded="rounded"
+        :borderWidth="borderWidth"
+        :borderColor="borderColor"
         color="orange"
         center-color="grey-8"
         track-color="transparent"
@@ -61,6 +70,8 @@
         :reverse="reverse"
         :show-value="showValue"
         :indeterminate="indeterminate"
+        :borderWidth="borderWidth"
+        :borderColor="borderColor"
         color="grey-8"
         text-color="white"
         track-color="orange"
@@ -78,6 +89,8 @@
         :show-value="showValue"
         :indeterminate="indeterminate"
         :rounded="rounded"
+        :borderWidth="borderWidth"
+        :borderColor="borderColor"
         color="orange"
       />
 
@@ -92,6 +105,8 @@
         :reverse="reverse"
         :show-value="showValue"
         :indeterminate="indeterminate"
+        :borderWidth="borderWidth"
+        :borderColor="borderColor"
         track-color="grey-4"
         :rounded="rounded"
         color="orange"
@@ -110,6 +125,8 @@
         :show-value="showValue"
         :indeterminate="indeterminate"
         :rounded="rounded"
+        :borderWidth="borderWidth"
+        :borderColor="borderColor"
         color="orange"
         text-color="white"
         center-color="grey-8"
@@ -134,7 +151,9 @@ export default {
       showValue: true,
       reverse: false,
       indeterminate: false,
-      rounded: false
+      rounded: false,
+      borderWidth: 0,
+      borderColor: 'secondary'
     }
   },
   methods: {

ui/src/components/circular-progress/QCircularProgress.js

@@ -65,6 +65,7 @@ export default createComponent({
     ))
 
     const strokeWidth = computed(() => props.thickness / 2 * viewBox.value)
+    const borderWidth = computed(() => ((props.borderWidth > 0 && props.rounded === true) ? props.borderWidth : 0))
 
     function getCircle ({ thickness, offset, color, cls, rounded }) {
       return h('circle', {
@@ -104,10 +105,22 @@ export default createComponent({
         })
       )
 
+      if (borderWidth.value > 0) {
+        svgChild.push(
+          getCircle({
+            cls: 'circle',
+            thickness: strokeWidth.value,
+            offset: strokeDashOffset.value,
+            color: props.borderColor,
+            rounded: props.rounded === true ? 'round' : void 0
+          })
+        )
+      }
+
       svgChild.push(
         getCircle({
           cls: 'circle',
-          thickness: strokeWidth.value,
+          thickness: strokeWidth.value - borderWidth.value,
           offset: strokeDashOffset.value,
           color: props.color,
           rounded: props.rounded === true ? 'round' : void 0

ui/src/components/circular-progress/QCircularProgress.json

@@ -57,6 +57,18 @@
       "addedIn": "v2.8.4"
     },
 
+    "borderWidth": {
+      "type": "Number",
+      "desc": "(Only works if rounded === true) Width of progress arc boundary",
+      "default": 0,
+      "category": "style"
+    },
+
+    "borderColor": {
+      "extends": "color",
+      "desc": "Color name for the the arc progress boundary from the Quasar Color Palette"
+    },
+
     "thickness": {
       "type": "Number",
       "default": 0.2,

ui/src/components/circular-progress/use-circular-progress.js

@@ -19,6 +19,11 @@ export const useCircularCommonProps = {
 
   fontSize: String,
   rounded: Boolean,
+  borderWidth: {
+    type: Number,
+    default: 0
+  },
+  borderColor: String,
 
   // ratio
   thickness: {