simple-shimmer

A pure css simple shimmer like facebook.

Usage no npm install needed!

<script type="module">
  import simpleShimmer from 'https://cdn.skypack.dev/simple-shimmer';
</script>

README

Simple Shimmer

A simple, pure css shimmer for your website. It acts as your pre-loader and is immensely beneficial to solve for PageSpeed issues.

Screenshot

Example

Imgur

Code

Imgur

Installation

Run npm i simple-shimmer into your app and then follow the steps.

Usage

<script>

import SimpleShimmer from "simple-shimmer";

export default defineComponent({
  components: {
    SimpleShimmer
  }
});

</script>

<template>
  <div id="app">
    <simple-shimmer :style="{height:'10px', width:'auto', borderRadius:'8px'}"/>
    <simple-shimmer :style="{height:'100px', width:'100px', borderRadius:'100%'}"/>
  </div>
</template>
  • You can pass style tag inside the :style="{}" property and it will work out of the box.

Nuxt - SSR Usage

To make sure this runs on server side, you need to create your build with the following command:

nuxt build --standalone

You can add the command in your scripts section in the package.json file like this :

"scripts": {
    "build": "nuxt build --standalone",
  },

Why is this needed?

Author

Sagar Chauhan works as a Project Manager - Technology at Greenhonchos. In his spare time, he hunts bug as a Bug Bounty Hunter. Follow him at Instagram, Twitter, Facebook, Github

License

MIT