# crazyloader-nuxt

> Axios plugin for nuxt 2 to show "Crazy Loading" animation

Latest version **1.0.1** (published 2024-05-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install crazyloader-nuxt
pnpm add crazyloader-nuxt
yarn add crazyloader-nuxt
bun add crazyloader-nuxt
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2024-05-17 |
| First published | 2024-05-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 7.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Fathurrohman |
| Maintainers | fatfatcocofat |
| Keywords | nuxt, axios, vuetify, loader, loading |

## Links

- npm: https://www.npmjs.com/package/crazyloader-nuxt
- Repository: https://github.com/fatfatcocofat/crazyloader-nuxt
- Homepage: https://github.com/fatfatcocofat/crazyloader-nuxt#readme
- Issues: https://github.com/fatfatcocofat/crazyloader-nuxt/issues
- npm.io page: https://npm.io/package/crazyloader-nuxt

## Recent versions

- 1.0.1 (latest) — 2024-05-17
- 1.0.0 — 2024-05-16

## README

# CrazyLoader - Nuxt

[![Node.js Package](https://github.com/fatfatcocofat/crazyloader-nuxt/actions/workflows/npm-publish.yml/badge.svg)](https://github.com/fatfatcocofat/crazyloader-nuxt/actions/workflows/npm-publish.yml)

> 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.

```bash
npm i crazyloader-nuxt
```

Load as a plugin in `nuxt.config.js` configuration

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

### Usage

Example of usage in `layout`

> `layouts/default.vue`

```jsx
<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 |

###

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

### Contributing

Just pull request :)

---
_Source: https://npm.io/package/crazyloader-nuxt · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._