vue3-loading-shimmer

---

A customizable Vue 3 component for creating loading shimmer effects

Documentation

---


$3

- Customizable background color
- Customizable shimmer color
- Customizable time duration
- Customizable direction

$3

---

``
npm install vue3-loading-shimmer --save
`

You can use register it globally like this:

`javascript
import { createApp } from "vue";
import App from "./App.vue";
import vue3LoadingShimmer from "vue3-loading-shimmer";

const app = createApp(App);

app.component("vue3-loading-shimmer", vue3LoadingShimmer);
`

then use it this in your component:


Alternatively, you can use it directly:

`vue



`

$3

`html


`

`javascript
const { createApp } = Vue;
const App = {
//Component code...
};
const app = createApp(App);
app.component("Shimmer", Vue3LoadingShimmer);
app.mount("#app");
``

Available Props

| Prop | Description | Type | Default | Required |
| ------------ | -------------------------------------------------------------------------------- | ------------------------------------------------------------------- | --------------- | -------- |
| bgColor | Background color of the wrapper | String | "#d3d3d3" | false |
| shimmerColor | Color of the shimmer effect (MUST BE IN HEX-FORMAT) e.g: "#RRGGBB" or "#RGB" | String | "#ffffff" | false |
| duration | Duration of the shimmer animation in milliseconds | Number | 1400 | false |
| direction | Direction of the shimmer effect | "left-to-right" , "right-to-left", "top-to-bottom", "bottom-to-top" | "left-to-right" | false |

Customize the component by leveraging these props to meet your specific needs.