Repository: biigpongsatorn/vue-element-loading
Branch: master
Commit: de2a7255e158
Files: 20
Total size: 30.6 KB

Directory structure:
gitextract_mxmxz0rs/

├── .babelrc
├── .gitignore
├── LICENSE
├── README.md
├── bili.config.js
├── example/
│   ├── App.vue
│   └── main.js
├── index.html
├── package.json
├── src/
│   ├── index.vue
│   └── loaders/
│       ├── bar-fade-scale.vue
│       ├── bar-fade.vue
│       ├── index.js
│       ├── line-down.vue
│       ├── line-scale.vue
│       ├── line-wave.vue
│       ├── mini-spinner.vue
│       ├── ring.vue
│       └── spinner.vue
└── webpack.config.js

================================================
FILE CONTENTS
================================================

================================================
FILE: .babelrc
================================================
{
  "presets": [
    ["@babel/env", { "modules": false }]
  ]
}


================================================
FILE: .gitignore
================================================
.DS_Store
node_modules/
dist/
lib/
npm-debug.log
yarn-error.log
.npmignore
.editorconfig

# Editor directories and files
.idea
*.suo
*.ntvs*
*.njsproj
*.sln

yarn.lock


================================================
FILE: LICENSE
================================================
MIT License

Copyright (c) 2018 Pongsatorn

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE. 


================================================
FILE: README.md
================================================
# ⛔️ DEPRECATED <no-maintenance-intended> This repo has not been maintained

<p>
  <a href="https://npmjs.com/package/vue-element-loading"><img src="https://img.shields.io/npm/v/vue-element-loading.svg?style=flat" alt="NPM version"></a>
  <a href="https://npmjs.com/package/vue-element-loading"><img src="https://img.shields.io/npm/dm/vue-element-loading.svg?style=flat" alt="NPM downloads"></a>
  <a href="https://www.npmjs.com/package/vue-element-loading"><img src="https://img.shields.io/npm/l/vue-element-loading.svg?style=flat" alt="License"></a>
  <a href="https://www.npmjs.com/package/vue-element-loading"><img src="https://travis-ci.org/biigpongsatorn/biigpongsatorn.github.io.svg?branch=dev" alt="Build Status"></a>
</p>

# vue-element-loading

⏳ Loading inside a container or full screen for Vue.js

# 👀 Document & Demo Page

- [Docs & Live demo](https://biigpongsatorn.github.io/#/vue-element-loading)
- [Fully feature live demo](https://vue-element-loading.netlify.com/)

# 💻 Install

```sh
npm install --save vue-element-loading
```

or

```sh
yarn add vue-element-loading
```

# 🖥 Install (Vue 3)

```sh
npm install --save vue-element-loading@next
```

or

```sh
yarn add vue-element-loading@next
```

# 🕹 Usage

```javascript
import Vue from "vue";
import VueElementLoading from "vue-element-loading";

Vue.component("VueElementLoading", VueElementLoading);
```

or

```javascript
import VueElementLoading from "vue-element-loading";

export default {
  components: {
    VueElementLoading
  }
};
```

# 🔎 Example

## Inside container

```html
<div class="parent">
  <vue-element-loading :active="show" spinner="bar-fade-scale" />
  <span>
    This is my content.
  </span>
</div>
```

## Full screen

```html
<body>
  <vue-element-loading :active="show" is-full-screen />
</body>
```

## Adjust Spinner Color

Use the `color` parameter to set the color of the displayed spinner (does not affect custom spinner images).

```html
<div class="parent">
  <vue-element-loading
    :active="show"
    spinner="bar-fade-scale"
    color="#FF6700"
  />
  <span>
    This is my content.
  </span>
</div>
```

## Set text

Use the `text` parameter to set the text which will appear below loader.

```html
<div class="parent">
  <vue-element-loading
    :active="show"
    spinner="bar-fade-scale"
    color="#FF6700"
    text="Please wait..."
  />
  <span>
    This is my content.
  </span>
</div>
```

## Set text style

Use the `textStyle` parameter to set the style of text( you need to pass css-in-js way using camelCase exp. fontSize, backgroundColor etc).

```html
<div class="parent">
  <vue-element-loading
    :active="show"
    spinner="bar-fade-scale"
    color="#FF6700"
    text="Please textStyle={fontSize: '25px'}  wait..."
  />
  <span>
    This is my content.
  </span>
</div>
```

## Adjust Spinner Size

Use the `size` parameter to set the size of the displayed spinner (does not affect custom spinner images).

```html
<div class="parent">
  <vue-element-loading :active="show" spinner="bar-fade-scale" size="128" />
  <span>
    This is my content.
  </span>
</div>
```

## Adjust Spinner Animation Speed

Use the `duration` parameter to set the animation loop duration in seconds (does not affect custom spinner images).

```html
<div class="parent">
  <vue-element-loading :active="show" spinner="bar-fade-scale" duration="1.0" />
  <span>
    This is my content.
  </span>
</div>
```

## Customize loader

```html
<div class="parent">
  <vue-element-loading :active="show">
    <img src="/static/pikachu.gif" width="55px" height="55px" />
  </vue-element-loading>
</div>
```

# 🌀 Spinner

<img src="https://raw.githubusercontent.com/biigpongsatorn/vue-element-loading/HEAD/static/spinner.png">

[See full document here.](https://biigpongsatorn.github.io/#/vue-element-loading)

# ⚙️ Props

| Props            | Type             | Default                 | Description                                                                                                                |
| ---------------- | :--------------- | ----------------------- | -------------------------------------------------------------------------------------------------------------------------- |
| active           | Boolean          | -                       | Status for show/hide loading                                                                                               |
| spinner          | String           | spinner                 | Spinner icon name: `spinner`, `mini-spinner`, `ring`, `line-wave`, `line-scale`, `line-down`, `bar-fade`, `bar-fade-scale` |
| color            | String           | #000                    | Color of spinner icon                                                                                                      |
| background-color | String           | rgba(255, 255, 255, .9) | Background color of spinner icon (for overlay)                                                                             |
| size             | String           | "40"                    | The size to display the spinner in pixels (**NOTE:** this will not affect custom spinner images)                           |
| duration         | String           | "0.6"                   | The duration of one 'loop' of the spinner animation, in seconds (**NOTE:** this will not affect custom spinner images)     |
| delay            | Number \| String | 0                       | The minimum appearing duration of loading in seconds                                                                       |
| is-full-screen   | Boolean          | false                   | Loader will overlay the full page                                                                                          |
| text             | String           | -                       | Text will appear below loader                                                                                              |
| text-style       | Object           | {}                      | Change style of the text below loader                                                                                      |

# 🤝 Contributing

1. Fork this repository.
2. Create new branch with feature name.
3. Run `npm install` and `npm run dev`.
4. Create your feature.
5. Commit and set commit message with feature name.
6. Push your code to your fork repository.
7. Create pull request. 🙂

# ⭐️ Support

If you like this project, You can support me with starring ⭐ this repository.

# 📄 License

[MIT](LICENSE)

Developed with ❤️ and ☕️


================================================
FILE: bili.config.js
================================================
const vue = require('rollup-plugin-vue');

module.exports = {
  banner: true,
  format: ['umd-min'],
  css: true,
  plugins: [
    vue({ css: true })
  ],
  outDir: 'lib'
};


================================================
FILE: example/App.vue
================================================
<template>
  <div>
    <div id="app">
      <VueElementLoading
        :spinner="spinnerKind"
        :size="spinnerSize"
        :duration="spinnerDuration"
        :color="spinnerColor"
        :active="fullscreenGreenBg"
        :text="text"
        :textStyle="textStyles[spinnerTextStyle] || {}"
        backgroundColor="rgba(66, 185, 131, .9)"
        is-full-screen
      />
      <VueElementLoading
        :spinner="spinnerKind"
        :size="spinnerSize"
        :duration="spinnerDuration"
        :color="spinnerColor"
        :active="fullscreen"
        :text="text"
        :textStyle="textStyles[spinnerTextStyle] || {}"
        is-full-screen
      />
      <VueElementLoading
        :spinner="spinnerKind"
        :size="spinnerSize"
        :duration="spinnerDuration"
        :color="spinnerColor"
        :active="show && !fullscreen && !fullscreenGreenBg"
        :text="text"
        :textStyle="textStyles[spinnerTextStyle] || {}"
      />
      <VueElementLoading :active="pikachu">
        <img
          src="https://i.pinimg.com/originals/9f/b1/25/9fb125f1fedc8cc62ab5b20699ebd87d.gif"
          width="55px"
          height="55px"
        >
      </VueElementLoading>
      <span>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis,
        nibh id hendrerit imperdiet, elit sapien laoreet elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis,
        nibh id hendrerit imperdiet, elit sapien laoreet elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis,
        nibh id hendrerit imperdiet, elit sapien laoreet elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis,
        nibh id hendrerit imperdiet, elit sapien laoreet elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis,
        nibh id hendrerit imperdiet, elit sapien laoreet elit
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce id fermentum quam. Proin sagittis,
        nibh id hendrerit imperdiet, elit sapien laoreet elit
      </span>
    </div>
    <div class="f-left-w-100pct">
      <br>
      <div>
        <select v-model="spinnerKind">
          <option value="bar-fade-scale">bar-fade-scale</option>
          <option value="bar-fade">bar-fade</option>
          <option value="line-down">line-down</option>
          <option value="line-scale">line-scale</option>
          <option value="line-wave">line-wave</option>
          <option value="ring">ring</option>
          <option value="spinner">spinner</option>
          <option value="mini-spinner">mini-spinner</option>
        </select>
        <select v-model="spinnerColor">
          <option value="#f00">Red</option>
          <option value="#0f0">Green</option>
          <option value="#FF6700">Default Color</option>
          <option value="#00f">Blue</option>
        </select>
        <select v-model="spinnerSize">
          <option value="32">32px</option>
          <option value="64">64px</option>
          <option value="128">128px</option>
          <option value="256">256px</option>
        </select>
        <select v-model="spinnerDuration">
          <option value="0.1">Very Fast</option>
          <option value="0.3">Fast</option>
          <option value="0.6">Default Speed</option>
          <option value="1.2">Slow</option>
          <option value="2.4">Very Slow</option>
        </select>
        <select v-model="spinnerTextStyle">
          <option value="none">No Text Style</option>
          <option value="bold">Bold Text</option>
          <option value="bigNeonGreen">Big Neon Green</option>
        </select>
      </div>
      <input
        v-model="text"
        class="btn-toggle"
        type="text"
        placeholder="Custom text..."
      />
    </div>
    <div class="f-left-w-100pct">
      <div class="btn-toggle">
        <button @click="toggleInsideComponentLoader">Toggle (Inside Container)</button>
      </div>
      <div class="btn-toggle">
        <button @click="togglePikachuLoader">Toggle (Pikachu)</button>
      </div>
      <div class="btn-toggle">
        <button @click="activateFullScreen()">Full Screen</button>
      </div>
      <div class="btn-toggle">
        <button @click="activateFullScreenGreenBg()">Full Screen (Green background color)</button>
      </div>
    </div>
  </div>
</template>

<script>
// import VueElementLoading from '../src'
import VueElementLoading from '../lib/vue-element-loading.min.js'

export default {
  name: 'app',
  data () {
    return {
      textStyles: {
          none: {},
          bold: {'font-weight':'bold'},
          bigNeonGreen : { 'font-size':'300%', color:'#0F0', 'text-shadow':'0 0 1em #0F0' }
      },
      text: '',
      show: true,
      fullscreen: false,
      fullscreenGreenBg: false,
      pikachu: false,
      spinnerKind: 'bar-fade-scale',
      spinnerColor: '#FF6700',
      spinnerSize: '32',
      spinnerDuration: '0.6',
      spinnerTextStyle: 'none'
    }
  },
  created () {
    setTimeout(() => { this.show = false }, 2000)
  },
  methods: {
    toggleInsideComponentLoader () {
      this.show = !this.show;
      this.pikachu = false;
    },
    togglePikachuLoader () {
      this.pikachu = !this.pikachu;
      this.show = false;
    },
    activateFullScreen () {
      this.fullscreen = true
      setTimeout(() => { this.fullscreen = false }, 2000)
    },
    activateFullScreenGreenBg () {
      this.fullscreenGreenBg = true
      setTimeout(() => { this.fullscreenGreenBg = false }, 2000)
    }
  },
  components: { VueElementLoading }
}
</script>

<style scoped>
#app {
  float: left;
  width: 500px;
  height: 500px;
  border: 1px solid #ccc;
}
.btn-toggle {
  float: left;
  margin: 20px;
}
.f-left-w-100pct {
  float: left;
  width: 100%;
}
</style>


================================================
FILE: example/main.js
================================================
import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  render: function (h) { return h(App) }
})


================================================
FILE: index.html
================================================
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>vue-element-loading</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="./dist/build.js"></script>
  </body>
</html>


================================================
FILE: package.json
================================================
{
  "name": "vue-element-loading",
  "description": "Loading inside a container or full screen for Vue.js",
  "version": "2.0.2",
  "author": "biig_pongsatorn <biig_pongsatorn@hotmail.com>",
  "license": "MIT",
  "main": "lib/vue-element-loading.min.js",
  "files": [
    "lib"
  ],
  "repository": {
    "type": "git",
    "url": "git+https://github.com/biigpongsatorn/vue-element-loading.git"
  },
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --mode development --open --hot",
    "build:lib": "rm -rf ./lib && bili src/index.vue",
    "build:example": "rm -rf ./dist && cross-env NODE_ENV=production webpack --mode production --progress --hide-modules",
    "prepublish": "npm run build:lib"
  },
  "dependencies": {
    "vue": "^2.5.22"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.2.3",
    "babel-loader": "^8.0.5",
    "bili": "^3.4.2",
    "cross-env": "^5.2.0",
    "css-loader": "^2.1.0",
    "file-loader": "^3.0.1",
    "rollup-plugin-vue": "^4.6.1",
    "uglifyjs-webpack-plugin": "^2.1.1",
    "vue-loader": "^15.5.1",
    "vue-template-compiler": "^2.5.22",
    "webpack": "^4.28.4",
    "webpack-cli": "^3.2.1",
    "webpack-dev-server": ">=3.1.11"
  }
}


================================================
FILE: src/index.vue
================================================
<template>
  <transition name="fade">
    <div
      v-show="isActive || isActiveDelay"
      :class="{ 'velmld-full-screen': isFullScreen }"
      :style="{ backgroundColor }"
      ref="velmld"
      class="velmld-overlay"
    >
      <div class="velmld-spinner">
        <slot name="default">
          <component
            :is="spinner"
            :color="color"
            :size="`${size}px`"
            :duration="`${duration}s`"
          />
        </slot>
        <div
          v-if="text.length"
          :style="{ color, ...textStyle }"
        >
          {{ text }}
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import Loaders from './loaders'

export default {
  name: 'vue-element-loading',
  props: {
    active: Boolean,
    spinner: {
      type: String,
      default: 'spinner'
    },
    text: {
      type: String,
      default: ''
    },
    textStyle: {
      type: Object,
      default: function () {
        return {}
      }
    },
    color: {
      type: String,
      default: '#000'
    },
    isFullScreen: {
      type: Boolean,
      default: false
    },
    backgroundColor: {
      type: String,
      default: 'rgba(255, 255, 255, .9)'
    },
    size: {
      type: String,
      default: '40'
    },
    duration: {
      type: String,
      default: '0.6'
    },
    delay: {
      type: [String, Number],
      default: 0
    }
  },
  data () {
    return {
      isActive: this.active || false,
      isActiveDelay: false
    }
  },
  /**
   * Append class 'velmld-parent' to parent container.
   */
  mounted () {
    this.$refs.velmld.parentNode.classList.add('velmld-parent')

    if (this.delay) {
      const delayMs = (+this.delay) * 1000
      this.delayActive(delayMs)
    }
  },
  methods: {
    delayActive (ms) {
      this.isActiveDelay = true

      setTimeout(() => {
        this.isActiveDelay = false  
      }, ms)
    }
  },
  watch: {
    /**
     * Binding outside component value and inside component value.
     * Append class 'velmld-parent' to parent container.
     */
    active (value) {
      this.isActive = value
      if (value) {
        this.$refs.velmld.parentNode.classList.add('velmld-parent')
      }
    }
  },
  components: Loaders
}
</script>

<style scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity .3s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
.velmld-overlay {
  position: absolute;
  z-index: 3000;
  margin: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: opacity .3s;
}
.velmld-spinner {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  text-align: center
}
.velmld-full-screen {
  position: fixed;
}
</style>

<style>
.velmld-parent {
  position: relative !important;
}
</style>


================================================
FILE: src/loaders/bar-fade-scale.vue
================================================
<template>
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" :width="size" :height="size" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
    <rect x="0" y="10" width="4" height="10" :fill="color" opacity="0.2">
      <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" :dur="duration" repeatCount="indefinite" />
      <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0s" :dur="duration" repeatCount="indefinite" />
      <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0s" :dur="duration" repeatCount="indefinite" />
    </rect>
    <rect x="8" y="10" width="4" height="10" :fill="color"  opacity="0.2">
      <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" :dur="duration" repeatCount="indefinite" />
      <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.15s" :dur="duration" repeatCount="indefinite" />
      <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.15s" :dur="duration" repeatCount="indefinite" />
    </rect>
    <rect x="16" y="10" width="4" height="10" :fill="color"  opacity="0.2">
      <animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" :dur="duration" repeatCount="indefinite" />
      <animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.3s" :dur="duration" repeatCount="indefinite" />
      <animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.3s" :dur="duration" repeatCount="indefinite" />
    </rect>
  </svg>
</template>

<script>
export default {
  name: 'bar-fade-scale',
  props: {
    color: {
      type: String,
      default: '#CCC'
    },
    size: {
      type: String,
      default: '40px'
    },
    duration: {
      type: String,
      default: '0.6s'
    }
  }
}
</script>


================================================
FILE: src/loaders/bar-fade.vue
================================================
<template>
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" :width="size" :height="size" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
    <rect x="0" y="0" width="4" height="20" :fill="color">
      <animate attributeName="opacity" attributeType="XML"
        values="1; .2; 1" 
        begin="0s" :dur="duration" repeatCount="indefinite" />
    </rect>
    <rect x="7" y="0" width="4" height="20" :fill="color">
      <animate attributeName="opacity" attributeType="XML"
        values="1; .2; 1" 
        begin="0.2s" :dur="duration" repeatCount="indefinite" />
    </rect>
    <rect x="14" y="0" width="4" height="20" :fill="color">
      <animate attributeName="opacity" attributeType="XML"
        values="1; .2; 1" 
        begin="0.4s" :dur="duration" repeatCount="indefinite" />
    </rect>
  </svg>
</template>

<script>
export default {
  name: 'bar-fade',
  props: {
    color: {
      type: String,
      default: '#CCC'
    },
    size: {
      type: String,
      default: '40px'
    },
    duration: {
      type: String,
      default: '0.6s'
    }
  }
}
</script>


================================================
FILE: src/loaders/index.js
================================================
import Spinner from './spinner.vue'
import Ring from './ring.vue'
import MiniSpinner from './mini-spinner.vue'
import LineWave from './line-wave.vue'
import LineScale from './line-scale.vue'
import LineDown from './line-down.vue'
import BarFade from './bar-fade.vue'
import BarFadeScale from './bar-fade-scale.vue'

export default {
  Spinner,
  Ring,
  MiniSpinner,
  LineWave,
  LineScale,
  LineDown,
  BarFade,
  BarFadeScale
}


================================================
FILE: src/loaders/line-down.vue
================================================
<template>
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" :width="size" :height="size" viewBox="0 0 24 24" style="enable-background:new 0 0 50 50;" xml:space="preserve">
    <rect x="0" y="0" width="4" height="7" :fill="color">
      <animateTransform  attributeType="xml"
        attributeName="transform" type="scale"
        values="1,1; 1,3; 1,1"
        begin="0s" :dur="duration" repeatCount="indefinite" />       
    </rect>

    <rect x="10" y="0" width="4" height="7" :fill="color">
      <animateTransform  attributeType="xml"
        attributeName="transform" type="scale"
        values="1,1; 1,3; 1,1"
        begin="0.2s" :dur="duration" repeatCount="indefinite" />       
    </rect>
    <rect x="20" y="0" width="4" height="7" :fill="color">
      <animateTransform  attributeType="xml"
        attributeName="transform" type="scale"
        values="1,1; 1,3; 1,1"
        begin="0.4s" :dur="duration" repeatCount="indefinite" />       
    </rect>
  </svg>
</template>

<script>
export default {
  name: 'line-down',
  props: {
    color: {
      type: String,
      default: '#CCC'
    },
    size: {
      type: String,
      default: '40px'
    },
    duration: {
      type: String,
      default: '0.6s'
    }
  }
}
</script>


================================================
FILE: src/loaders/line-scale.vue
================================================
<template>
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" :width="size" :height="size" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
    <rect x="0" y="13" width="4" height="5" :fill="color">
      <animate attributeName="height" attributeType="XML"
        values="5;21;5" 
        begin="0s" :dur="duration" repeatCount="indefinite" />
      <animate attributeName="y" attributeType="XML"
        values="13; 5; 13"
        begin="0s" :dur="duration" repeatCount="indefinite" />
    </rect>
    <rect x="10" y="13" width="4" height="5" :fill="color">
      <animate attributeName="height" attributeType="XML"
        values="5;21;5" 
        begin="0.15s" :dur="duration" repeatCount="indefinite" />
      <animate attributeName="y" attributeType="XML"
        values="13; 5; 13"
        begin="0.15s" :dur="duration" repeatCount="indefinite" />
    </rect>
    <rect x="20" y="13" width="4" height="5" :fill="color">
      <animate attributeName="height" attributeType="XML"
        values="5;21;5" 
        begin="0.3s" :dur="duration" repeatCount="indefinite" />
      <animate attributeName="y" attributeType="XML"
        values="13; 5; 13"
        begin="0.3s" :dur="duration" repeatCount="indefinite" />
    </rect>
  </svg>
</template>

<script>
export default {
  name: 'line-scale',
  props: {
    color: {
      type: String,
      default: '#CCC'
    },
    size: {
      type: String,
      default: '40px'
    },
    duration: {
      type: String,
      default: '0.6s'
    }
  }
}
</script>


================================================
FILE: src/loaders/line-wave.vue
================================================
<template>
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" :width="size" :height="size" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve">
    <rect x="0" y="0" width="4" height="10" :fill="color">
      <animateTransform attributeType="xml"
        attributeName="transform" type="translate"
        values="0 0; 0 20; 0 0"
        begin="0" :dur="duration" repeatCount="indefinite" />
    </rect>
    <rect x="10" y="0" width="4" height="10" :fill="color">
      <animateTransform attributeType="xml"
        attributeName="transform" type="translate"
        values="0 0; 0 20; 0 0"
        begin="0.2s" :dur="duration" repeatCount="indefinite" />
    </rect>
    <rect x="20" y="0" width="4" height="10" :fill="color">
      <animateTransform attributeType="xml"
        attributeName="transform" type="translate"
        values="0 0; 0 20; 0 0"
        begin="0.4s" :dur="duration" repeatCount="indefinite" />
    </rect>
  </svg>
</template>

<script>
export default {
  name: 'line-wave',
  props: {
    color: {
      type: String,
      default: '#CCC'
    },
    size: {
      type: String,
      default: '40px'
    },
    duration: {
      type: String,
      default: '0.6s'
    }
  }
}
</script>


================================================
FILE: src/loaders/mini-spinner.vue
================================================
<template>
  <svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" :width="size" :height="size" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
    <path :fill="color" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z">
      <animateTransform attributeType="xml"
        attributeName="transform"
        type="rotate"
        from="0 25 25"
        to="360 25 25"
        :dur="duration"
        repeatCount="indefinite"/>
    </path>
  </svg>
</template>

<script>
export default {
  name: 'mini-spinner',
  props: {
    color: {
      type: String,
      default: '#CCC'
    },
    size: {
      type: String,
      default: '40px'
    },
    duration: {
      type: String,
      default: '0.6s'
    }
  }
}
</script>


================================================
FILE: src/loaders/ring.vue
================================================
<template>
  <svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" :width="size" :height="size" viewBox="0 0 40 40" enable-background="new 0 0 40 40" xml:space="preserve">
    <path opacity="0.2" :fill="color" d="M20.201,5.169c-8.254,0-14.946,6.692-14.946,14.946c0,8.255,6.692,14.946,14.946,14.946
      s14.946-6.691,14.946-14.946C35.146,11.861,28.455,5.169,20.201,5.169z M20.201,31.749c-6.425,0-11.634-5.208-11.634-11.634
      c0-6.425,5.209-11.634,11.634-11.634c6.425,0,11.633,5.209,11.633,11.634C31.834,26.541,26.626,31.749,20.201,31.749z"/>
    <path :fill="color" d="M26.013,10.047l1.654-2.866c-2.198-1.272-4.743-2.012-7.466-2.012h0v3.312h0
      C22.32,8.481,24.301,9.057,26.013,10.047z">
      <animateTransform attributeType="xml"
        attributeName="transform"
        type="rotate"
        from="0 20 20"
        to="360 20 20"
        :dur="duration"
        repeatCount="indefinite"/>
    </path>
  </svg>
</template>

<script>
export default {
  name: 'ring',
  props: {
    color: {
      type: String,
      default: '#CCC'
    },
    size: {
      type: String,
      default: '40px'
    },
    duration: {
      type: String,
      default: '0.6s'
    }
  }
}
</script>


================================================
FILE: src/loaders/spinner.vue
================================================
<template>
  <svg version="1.1" id="loader-1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" :width="size" :height="size" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve">
    <path :fill="color" d="M43.935,25.145c0-10.318-8.364-18.683-18.683-18.683c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615c8.072,0,14.615,6.543,14.615,14.615H43.935z">
      <animateTransform attributeType="xml"
        attributeName="transform"
        type="rotate"
        from="0 25 25"
        to="360 25 25"
        :dur="duration"
        repeatCount="indefinite"/>
    </path>
  </svg>
</template>

<script>
export default {
  name: 'spinner',
  props: {
    color: {
      type: String,
      default: '#CCC'
    },
    size: {
      type: String,
      default: '40px'
    },
    duration: {
      type: String,
      default: '0.6s'
    }
  }
}
</script>


================================================
FILE: webpack.config.js
================================================
const path = require('path');
const webpack = require('webpack');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  entry: './example/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        sourceMap: true,
        parallel: 4,
        uglifyOptions: {
          warnings: false,
          compress: {
            warnings: false
          },
        },
      })
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
  ],
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
};

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map';
  // http://vue-loader.vuejs.org/en/workflow/production.html
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ]);
}