<template>
  <div class="progress-bar">
    <div class="bar" :style="{ width: width }"></div>
  </div>
</template>

<script>
export default {
  name: "progress-bar",
  props: ['progress'],
  computed: {
    width: function() {
      return (this.progress * 100) + '%';
    }
  }
}
</script>

<style scoped>
.progress-bar {
  border: 1px solid rgba(0, 0, 0, 0.4);
  border-radius: 0.2rem;
  position: relative;
}

.bar {
  background-color: var(--primary);
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
</style>