<template>
  <div class="progress">
    <div class="bar" :style="`width: ${percent}%;background-color: ${color}`" />
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    percent: {
      type: Number,
      default: 0
    },
    color: {
      type: String,
      default: '#fff'
    }
  }
});
</script>

<style lang="scss" scoped>
.progress {
  height: 8px;
  background-color: rgba(255, 255, 255, 0.3);

  .bar {
    height: 100%;
    border-radius: 8px;
    transition: width 0.5s;
  }
}
</style>
