v-loading-directive

A simple loading indicator for your Vue project. Vue 2.x and 3.x versions are supported.

Installation

npm install v-loading-directive

Usage

First, register the directive.

// globally
import Vue from 'vue';
import VLoading from 'v-loading-directive';

Vue.directive('loading', VLoading);

// or locally
import loading from 'v-loading-directive';

export default {
  directives: {
    loading,
  },
};

Then add v-loading attribute to element, passing a boolean value.

<template>
  <div v-loading="isLoading">...some content...</div>
</template>

<script>
  export default {
    data() {
      return {
        isLoading: true,
      };
    },
  };
</script>

Customization

You can use CSS variables to customize spinner color and size.

<template>
  <div v-loading="isLoading" class="content">...some content...</div>
</template>

<style scoped>
  .content {
    --v-loading-color: red;
    --v-loading-size: 4em;
  }
</style>

License

MIT License