JSFiddle - React, Tailwind, and code Playground

by ozzon91

HTML

<script src="https://cdn.jsdelivr.net/vue.resource/1.2.0/vue-resource.min.js"></script>
<div id="app">
  <loading>Loading...</loading>
  <list></list>
</div>



<template id="loading">
  <div class="loading" v-if="loading">
    <span>
      <slot></slot>
    </span>
  </div>
</template>

SCSS

.loading {
  color: #fff;
  position: absolute;
  background: #000;
  text-align: center;
  z-index: 999;
  display: table;
  width: 100%;
  height: 100%;
  
  span {
    display: table-cell;
    vertical-align: middle;
  }
}

JavaScript

Vue.component('loading', {
	template: '#loading',
  created: function() {
  	this.$root.$on('load:start', () => { this.loading = true; });
    this.$root.$on('load:finish', () => { this.loading = false; });
  },
  data: function() {
  	return {
    	loading: true
    };
  }
});


Vue.component('list', {
	template: '<b>Data</b>',
  created: function() {
  	this.$http.get('https://restcountries.eu/rest/v1/all').then(res => {
			console.log(res.data);    
    });
  }
});


Vue.http.interceptors.push(function(request, next) {
	this.$root.$emit('load:start');
  next(res => {
  	this.$root.$emit('load:finish');
  });
});

new Vue({el: '#app'});