<template>
  <div class="box">
    <div :style="{width: progress + '%'}">
      {{ progress + '%' }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    progress: {
      type: Number,
      default: 0,
    },
  },

};
</script>
<style scoped>
	.box {
		height: 20px;
		border-radius: 5px;
		background-color: #f5f5f5;
		box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
		overflow: hidden;
	}
	
	.box div {
		height: 100%;
		background-color: #6666FF;
		border-radius: 5px;
		text-align: center;
		color: #FFFFFF;
		font-size: 0.9em;
	}
</style>