JSFiddle - React, Tailwind, and code Playground

by Atinux

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <transition-group tag="ul" name="bounce">
    <li v-for="(item, index) in list" class="goal" :key="index">
      <img :src="`http://lorempixel.com/100/150/abstract/?_=`+index">
      <h3>{{ item.name }}</h3>
      <div class="line">
        <transition @enter="enterPercent" appear>
          <div class="line-percent" :index="index" :style="{ 'width' : (item.badge_progress /  item.badge_goal) * 100 + '%'}"></div>
        </transition>
      </div>
    </li>
  </transition-group>
</div>

CSS

.goal {
  list-style-type: none;
  border: 1px #ddd solid;
  background: white;
  padding: 20px;
  float: left;
}
img {
  width: 100px;
  height: 150px;
}
.line {
  width: 100%;
  height: 5px;
  border: 1px #ddd solid;
}
.line-percent {
  background: #1c90f3;
  height: 100%;
}

JavaScript

new Vue({
  el: '#app',
  data: {
		list: [{
    	name: 'Name #1',
      badge_progress: 10,
      badge_goal: 100
    }, {
    	name: 'Name #2',
      badge_progress: 50,
      badge_goal: 100
    }, {
    	name: 'Name #3',
      badge_progress: 50,
      badge_goal: 100
    }]
  },
  methods: {
  	enterPercent: function (el, done) {
    	console.log('Transition', el, this);
      done();
    }
  }
})