.w-progress(:class="classes" :style="styles")
//- Linear progress.
.w-progress__progress(
v-if="!circle"
:class="{ full: progressValue === 100 }"
:style="`width: ${progressValue}%`")
//- Circular progress.
svg(v-else :viewBox="`${circleCenter / 2} ${circleCenter / 2} ${circleCenter} ${circleCenter}`")
//- Background first, in SVG there is no z-index.
circle.bg(
v-if="bgColor || this.progressValue > -1"
:class="bgColor || null"
:cx="circleCenter"
:cy="circleCenter"
:r="circleRadius"
fill="transparent"
:stroke-dasharray="circleCircumference"
:stroke-width="stroke")
circle.w-progress__progress(
:cx="circleCenter"
:cy="circleCenter"
:r="circleRadius"
fill="transparent"
:stroke-width="stroke"
:stroke-linecap="roundCap && 'round'"
:stroke-dasharray="circleCircumference"
:style="`stroke-dashoffset: ${(1 - (progressValue / 100)) * circleCircumference}`")
.w-progress__label(v-if="label || $slots.default" :class="labelColor || false")
slot {{ Math.round(progressValue) }}{{ circle ? '' : '%' }}