28種類のローディングアニメーションを実装する「vue-loaders」

by kabanoki

HTML

<div id="app">
  <vue-loaders name="ball-beat" color="red" scale="1"></vue-loaders>
  <vue-loaders name="ball-clip-rotate-multiple" color="red" scale="1"></vue-loaders>
  <vue-loaders name="ball-clip-rotate-pulse" color="red" scale="1"></vue-loaders>
  <vue-loaders name="ball-clip-rotate" color="red" scale="1"></vue-loaders>
  <vue-loaders name="ball-grid-beat" color="red" scale="1"></vue-loaders>
  <vue-loaders name="ball-grid-pulse" color="red" scale="1"></vue-loaders>
  <vue-loaders name="ball-pulse-rise" color="red" scale="1"></vue-loaders>
  <vue-loaders name="ball-pulse-sync" color="red" scale="1"></vue-loaders>
  <vue-loaders name="ball-pulse" color="red" scale="1"></vue-loaders>
  <vue-loaders name="ball-rotate" color="red" scale="1"></vue-loaders>
  <vue-loaders name="ball-scale-multiple" color="red" scale="1"></vue-loaders>
  <vue-loaders name="ball-scale-ripple-multiple" color="red" scale="1"></vue-loaders>
  <vue-loaders name="ball-scale-ripple" color="red" scale="1"></vue-loaders>
  <vue-loaders name="ball-scale" color="red" scale="1"></vue-loaders>
  <vue-loaders name="ball-spin-fade-loader" color="red" scale="1"></vue-loaders>
  <vue-loaders name="ball-triangle-path" color="red" scale="1"></vue-loaders>
  <vue-loaders name="ball-zig-zag-deflect" color="red" scale="1"></vue-loaders>
  <vue-loaders name="ball-zig-zag" color="red" scale="1"></vue-loaders>
  <vue-loaders name="cube-transition" color="red" scale="1"></vue-loaders>
  <vue-loaders name="line-scale-party" color="red" scale="1"></vue-loaders>
  <vue-loaders name="line-scale-pulse-out-rapid" color="red" scale="1"></vue-loaders>
  <vue-loaders name="line-scale-pulse-out" color="red" scale="1"></vue-loaders>
  <vue-loaders name="line-scale" color="red" scale="1"></vue-loaders>
  <vue-loaders name="line-spin-fade-loader" color="red" scale="1"></vue-loaders>
  <vue-loaders name="pacman" color="red" scale="1"></vue-loaders>
  <vue-loaders name="semi-circle-spin" color="red"...

CSS

body {
  padding: 10px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.vue-loaders{
  margin : 15px;
}

Vue

const VueLoaders = window['VueLoaders'];
Vue.use(VueLoaders);
new Vue({
  el: '#app'
});