support all types of font-awesome

.browserslistrc

@@ -0,0 +1,3 @@
+current node
+last 2 versions and > 2%
+ie > 10

.gitignore

@@ -1,3 +1,21 @@
 .DS_Store
-node_modules
-package-lock.json
+node_modules/
+/dist/
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*

README.md

@@ -1,7 +1,6 @@
-# Vuejs Loading Screen ([Demo](https://helmab.github.io/vue-loading/))
-Using to block whlie client processed work.
+# Vuejs Loading Screen 
+Using to block whlie client processed work. Please checkout [Demo](https://helmab.github.io/vue-loading/) to see how does it look like.
 
-## Screenshot
 ![Screenshot](./src/assets/screenshot.png)
 
 ## Installation
@@ -23,26 +22,27 @@ Vue.use(loading)
 </template>
 
 <script>
-    export default {
-        methods: {
-            fetchData () {
-                this.$isLoading(true) // show loading screen
-                this.$axios.post(url).then((response) => {
-                        this.$isLoading(false) // hide loading screen
-                        console.log(response)
-                    })
-            }
-        },
-        mounted () {
-            this.fetchData()
-        }
+  export default {
+    methods: {
+      sendHttpRequest () {
+        this.$isLoading(true) // show loading screen
+        this.$axios.post(url).then(({data}) => {
+            this.$isLoading(false) // hide loading screen
+            console.log(data)
+        })
+      }
+    },
+    mounted () {
+      this.sendHttpRequest()
     }
+  }
 </script>
 ```
 
 ## Customization
 
 If you want to modify such background, icon size, color, type, you just configure options such:
+
 ```js
 Vue.use(loading, {
     bg: '#41b883ad',
@@ -52,12 +52,25 @@ Vue.use(loading, {
 })
 ```
 
+or you can style the loading by yourself (TailwindCss as example):
+
+```js
+Vue.use(loading, {
+  bg: '#41b883ad',
+  slot: `
+    <div class="px-5 py-3 bg-gray-800 rounded">
+      <h3 class="text-3xl text-white"><i class="fas fa-spinner fa-spin"></i> Loading...</h3>
+    </div>
+  `
+})
+```
+
 ## Configurations
 
 | Option        | Value           | Description  |
 | ------------- | -------------| -----|
 | bg      | `default: '#41b883ad'` | : color string |
-| icon      | `deault: 'spinner'`      |   : support font-awesome |
+| icon      | `deault: 'fas fa-spinner'`      |   : support [font-awesome](https://www.npmjs.com/package/@fortawesome/fontawesome-free) |
 | size | `default: '3'`      |    : {1, 2, 3, 4, 5} string |
 | icon_color | `default: '#ffffff'`      |    : color string |
 | slot | `default: font-awesome`      |    : raw html |

babel.config.js

@@ -0,0 +1,16 @@
+const devPresets = ['@vue/babel-preset-app'];
+const buildPresets = [
+  [
+    '@babel/preset-env',
+    // Config for @babel/preset-env
+    {
+      // Example: Always transpile optional chaining/nullish coalescing
+      // include: [
+      //   /(optional-chaining|nullish-coalescing)/
+      // ],
+    },
+  ],
+];
+module.exports = {
+  presets: (process.env.NODE_ENV === 'development' ? devPresets : buildPresets),
+};

build/rollup.config.js

@@ -0,0 +1,171 @@
+// rollup.config.js
+import fs from 'fs';
+import path from 'path';
+import vue from 'rollup-plugin-vue';
+import alias from '@rollup/plugin-alias';
+import commonjs from '@rollup/plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
+import replace from '@rollup/plugin-replace';
+import babel from '@rollup/plugin-babel';
+import { terser } from 'rollup-plugin-terser';
+import minimist from 'minimist';
+
+// Get browserslist config and remove ie from es build targets
+const esbrowserslist = fs.readFileSync('./.browserslistrc')
+  .toString()
+  .split('\n')
+  .filter((entry) => entry && entry.substring(0, 2) !== 'ie');
+
+// Extract babel preset-env config, to combine with esbrowserslist
+const babelPresetEnvConfig = require('../babel.config')
+  .presets.filter((entry) => entry[0] === '@babel/preset-env')[0][1];
+
+const argv = minimist(process.argv.slice(2));
+
+const projectRoot = path.resolve(__dirname, '..');
+
+const baseConfig = {
+  input: 'src/entry.js',
+  plugins: {
+    preVue: [
+      alias({
+        entries: [
+          {
+            find: '@',
+            replacement: `${path.resolve(projectRoot, 'src')}`,
+          },
+        ],
+      }),
+    ],
+    replace: {
+      'process.env.NODE_ENV': JSON.stringify('production'),
+    },
+    vue: {
+      css: true,
+      template: {
+        isProduction: true,
+      },
+    },
+    postVue: [
+      resolve({
+        extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
+      }),
+      commonjs(),
+    ],
+    babel: {
+      exclude: 'node_modules/**',
+      extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
+      babelHelpers: 'bundled',
+    },
+  },
+};
+
+// ESM/UMD/IIFE shared settings: externals
+// Refer to https://rollupjs.org/guide/en/#warning-treating-module-as-external-dependency
+const external = [
+  // list external dependencies, exactly the way it is written in the import statement.
+  // eg. 'jquery'
+  'vue',
+];
+
+// UMD/IIFE shared settings: output.globals
+// Refer to https://rollupjs.org/guide/en#output-globals for details
+const globals = {
+  // Provide global variable names to replace your external imports
+  // eg. jquery: '$'
+  vue: 'Vue',
+};
+
+// Customize configs for individual targets
+const buildFormats = [];
+if (!argv.format || argv.format === 'es') {
+  const esConfig = {
+    ...baseConfig,
+    input: 'src/entry.esm.js',
+    external,
+    output: {
+      file: 'dist/vuejs-loading-screen.esm.js',
+      format: 'esm',
+      exports: 'named',
+    },
+    plugins: [
+      replace(baseConfig.plugins.replace),
+      ...baseConfig.plugins.preVue,
+      vue(baseConfig.plugins.vue),
+      ...baseConfig.plugins.postVue,
+      babel({
+        ...baseConfig.plugins.babel,
+        presets: [
+          [
+            '@babel/preset-env',
+            {
+              ...babelPresetEnvConfig,
+              targets: esbrowserslist,
+            },
+          ],
+        ],
+      }),
+    ],
+  };
+  buildFormats.push(esConfig);
+}
+
+if (!argv.format || argv.format === 'cjs') {
+  const umdConfig = {
+    ...baseConfig,
+    external,
+    output: {
+      compact: true,
+      file: 'dist/vuejs-loading-screen.ssr.js',
+      format: 'cjs',
+      name: 'VuejsLoadingScreen',
+      exports: 'auto',
+      globals,
+    },
+    plugins: [
+      replace(baseConfig.plugins.replace),
+      ...baseConfig.plugins.preVue,
+      vue({
+        ...baseConfig.plugins.vue,
+        template: {
+          ...baseConfig.plugins.vue.template,
+          optimizeSSR: true,
+        },
+      }),
+      ...baseConfig.plugins.postVue,
+      babel(baseConfig.plugins.babel),
+    ],
+  };
+  buildFormats.push(umdConfig);
+}
+
+if (!argv.format || argv.format === 'iife') {
+  const unpkgConfig = {
+    ...baseConfig,
+    external,
+    output: {
+      compact: true,
+      file: 'dist/vuejs-loading-screen.min.js',
+      format: 'iife',
+      name: 'VuejsLoadingScreen',
+      exports: 'auto',
+      globals,
+    },
+    plugins: [
+      replace(baseConfig.plugins.replace),
+      ...baseConfig.plugins.preVue,
+      vue(baseConfig.plugins.vue),
+      ...baseConfig.plugins.postVue,
+      babel(baseConfig.plugins.babel),
+      terser({
+        output: {
+          ecma: 5,
+        },
+      }),
+    ],
+  };
+  buildFormats.push(unpkgConfig);
+}
+
+// Export config
+export default buildFormats;

dev/serve.js

@@ -0,0 +1,19 @@
+import Vue from 'vue';
+import Dev from './serve.vue';
+// To register individual components where they are used (serve.vue) instead of using the
+// library as a whole, comment/remove this import and it's corresponding "Vue.use" call
+import VuejsLoadingScreen from '@/entry.esm';
+Vue.use(VuejsLoadingScreen, {
+  bg: '#41b883ad',
+  slot: `
+    <div class="px-5 py-3 bg-gray-800 rounded">
+      <h3 class="text-3xl text-white"><i class="fas fa-spinner fa-spin"></i> Loading...</h3>
+    </div>
+  `
+});
+
+Vue.config.productionTip = false;
+
+new Vue({
+  render: (h) => h(Dev),
+}).$mount('#app');

dev/serve.vue

@@ -0,0 +1,37 @@
+<script>
+import Vue from "vue";
+
+export default Vue.extend({
+  name: "ServeDev",
+  methods: {
+    async showLoading() {
+      this.$isLoading(true);
+      await this.pause();
+      this.$isLoading(false);
+    },
+    pause(milliseconds = 3600) {
+      return new Promise((resolve) => setTimeout(resolve, milliseconds));
+    },
+  },
+});
+</script>
+
+<template>
+  <div id="app">
+    <div class="flex justify-center items-center h-screen w-screen">
+      <div class="text-center">
+        <h3 class="mb-5 text-2xl">Vuejs Loading Screen</h3>
+        <button
+          class="px-4 py-2 bg-blue-800 rounded text-white"
+          @click="showLoading"
+        >
+          Send HTTP Request
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+@import url("https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css");
+</style>