Vue loading bar

by Gorke07

HTML

<div id="app">
  <div class="loading">
    <div class="bar" :style="{width:percent + '%'}">
    </div>
  </div>
</div>

CSS

.loading{
  border:1px solid grey;
  padding:1px;
  border-radius:5px;
}
.bar{
  height:30px;
  background:chartreuse;
  box-shadow:inset 0px -1px 2px rgba(0,0,0,0.4);
  border-radius:4px;
  transition:width 0.5s;
}

JavaScript

new Vue({
	el:'#app',
  data(){
  	return {
    	percent:0
    }
  },
  created(){
  	setInterval(()=>{
    	if(this.percent < 100){
      	this.percent += 1
      } else {
      	this.percent = 0
      }
    },50)
  }
})