<!-- background = `conic-gradient(#FF6384 0% ${val}%, #36A2EB ${val}% 100%)`; -->
<template>
  <view class="question-progress" :style="getStyle"></view>
</template>
<script lang="ts" setup>
type ProgressOptions = {
  progress: number;
  bgColor?: string;
  progressColor?: string;
}
const props = withDefaults(defineProps<ProgressOptions>(), {
  progress: 0,
  bgColor: '#FFFFFF',
  progressColor: '#EBF9FF'
});
const getStyle = computed(() => {
  return `background: conic-gradient(${props.progressColor} 0% ${props.progress}%, ${props.bgColor} ${props.progress}% 100%)`;
});
</script>
<style lang="scss" scoped>
.question-progress {
  @apply w-full h-full rounded-full absolute inset-0 z-0;
}
</style>