52 lines
1.0 KiB
Vue
52 lines
1.0 KiB
Vue
<script lang="tsx">
|
|
import { computed, defineComponent } from 'vue'
|
|
|
|
export default defineComponent({
|
|
props: {
|
|
value: {
|
|
type: [Number, String],
|
|
default: 0,
|
|
},
|
|
|
|
total: {
|
|
type: [Number, String],
|
|
default: 100,
|
|
},
|
|
},
|
|
setup(props) {
|
|
const progress = computed(() => {
|
|
if (props.value == 0) {
|
|
return 0
|
|
}
|
|
return (Number(props.value) / Number(props.total)) * 100
|
|
})
|
|
|
|
return () => (
|
|
<div class="border-solid bg-hex-171717 border-hex-272521 border-2">
|
|
<div class="border-transparent border-solid border-2">
|
|
<div
|
|
style={progress.value == 0 ? 'width:0' : `width:${progress.value.toFixed(2)}%`}
|
|
class="h-2 duration-200 calc-progress"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
)
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.calc-progress {
|
|
background: linear-gradient(
|
|
to bottom,
|
|
#48d0eb 0%,
|
|
#6cf4fe 15%,
|
|
#4fbdfe 30%,
|
|
#3080fe 40%,
|
|
#1d5bfe 55%,
|
|
#3283fd 70%,
|
|
#000456 100%
|
|
);
|
|
}
|
|
</style>
|