crazyloader-nuxt

CrazyLoader - Nuxt

Axios plugin for nuxt 2 to show Crazy Loading animation

This is just a regular plugin I made to display loading with a "percent animation" automatically. Created because the projects I work on often use Vuetify2 and Nuxt2. So instead of me making a "board loader" component for axios, yeah I think making this isn't too much haha. If you want to try it, make sure your project uses nuxt version 2 and vuetify version 2.

Features

• Show loading with Vuetify's v-progress-circular component
• Displays an overlay when the loader is displayed so the user cannot do "crazy" activities :)
• Customizable Size, Position, Color
• When axios makes a request, crazyloader will become "crazy" :)
• Well, that's all.

Installastion

Make sure the @nuxtjs/axios plugin and @nuxtjs/vuetify is ready.

npm i crazyloader-nuxt

Load as a plugin in nuxt.config.js configuration

export default {
  // ...
  plugins: [
    // ...
    "~/node_modules/crazyloader-nuxt/@vuetify",
    // ..
  ],
  // ...
};

Usage

Example of usage in layout

layouts/default.vue

<template>
    <v-app>
        <!-- CrazyLoader component -->
        <crazy-loader />

        <v-main>
            <!-- Main -->
            <v-container fluid class="pt-0">
                <nuxt />
            </v-container>
        </v-main>
    </v-app>
</template>

<script>
export default {
    created() {
        // Sample axios request to show "CrazyLoader"
        this.crazyRequest().then((r) => {
            console.log(r.data)
        })
    },

    methods: {
        crazyRequest() {
            return this.$axios.get('https://dummyjson.com/products')
        }
    }
}
</script>

Props

Options	Type	Default	Descripion
rotate	string/number	360	Rotate value
size	string/numver	100	Size value
width	string/number	15	Width value
color	string	#d6f037	Color value
zIndex	string/number	9999999	z-index style value

<crazy-loader
  rotate="360"
  size="100"
  width="15"
  color="#d6f037"
  z-index="9999999"
/>

Contributing

Just pull request :)