<template>
    <div class="progress-bar">
      <div class="progress-bar-fill" :style="{ width: progress + '%' }"></div>
    </div>
  </template>
  
  <script>
  export default {
    props: {
      progress: {
        type: Number,
        required: true
      }
    }
  };
  </script>
  
  <style>
  .progress-bar {
    width: 100%;
    height: 15px;
    background-color: #f3f3f3;
    border: 3px solid #331600;
    border-radius: 20px;
    overflow: hidden;
  }
  
  .progress-bar-fill {
    height: 20px;
    background-color: #FFBA08;
    width: 0;
    transition: width 0.5s ease-in-out;
  }
  </style>
  