vudash/vudash

<div class="vudash-progress">
   <div class="bar">
     <div ref:progress class="progress">
     </div>
   </div>
   <div class="label">{{ config.description }}</div>
</div>
<style>
  .bar {
    width: 60%;
    border: 4px solid rgb(255,255,255);
    height: 40px;
  }

  .bar > .progress {
    background-color: rgb(112,179,125);
    display: block;
    height: 100%;
    transition: width 1s
  }

  .label {
    text-align: center;
    position: absolute;
    bottom: 30px;
    font-size: 14px;
    font-weight: bold;
    width: 100%;
  }
</style>
<script>
  export default {
    data () {
      return {
        config: {
          description: 'Progress'
        }
      }
    },

    methods: {
      update ({ data, meta }) {
        this.set(data)
        const progress = this.get('percentage')
        this.refs.progress.style.width = `${progress}%`
      }
    }
  }
</script>