https://github.com/gradints/tailwindcss-skeleton-screen

Tailwindcss plugin to make skeleton screen. We provide the basic animation, and you can customize them to your liking.
https://github.com/gradints/tailwindcss-skeleton-screen

skeleton-loading skeleton-screen tailwindcss tailwindcss-plugin

Last synced: 29 days ago
JSON representation

Tailwindcss plugin to make skeleton screen. We provide the basic animation, and you can customize them to your liking.

• Host: GitHub
• URL: https://github.com/gradints/tailwindcss-skeleton-screen
• Owner: gradints
• License: mit
• Created: 2021-04-08T09:26:14.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-11-16T01:38:18.000Z (almost 2 years ago)
• Last Synced: 2024-09-28T13:42:35.211Z (about 1 month ago)
• Topics: skeleton-loading, skeleton-screen, tailwindcss, tailwindcss-plugin
• Language: JavaScript
• Homepage:
• Size: 43.9 KB
• Stars: 21
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# tailwindcss-skeleton-screen

Tailwindcss plugin to make skeleton screen.

[![npm (scoped)](https://img.shields.io/npm/v/@gradin/tailwindcss-skeleton-screen)](https://www.npmjs.com/package/@gradin/tailwindcss-skeleton-screen)

![npm bundle size (scoped)](https://img.shields.io/bundlephobia/min/@gradin/tailwindcss-skeleton-screen)

![npm](https://img.shields.io/npm/dt/@gradin/tailwindcss-skeleton-screen)

[Live Demo](https://play.tailwindcss.com/dcAoaNpFYu)

## Installation

```sh

# Using npm

npm install -D @gradin/tailwindcss-skeleton-screen

# Using Yarn

yarn add -D @gradin/tailwindcss-skeleton-screen

```

Then add the plugin to `tailwind.config.js` file

```js

module.exports = {

  theme: {

    // ...

  },

  plugins: [

    require('@gradin/tailwindcss-skeleton-screen'),

  ],

}

```

## Configuration

You can change the color and animation via `theme` settings.

The object keys will be appended to the end of the `.loading` class.

The base `.loading` class can be configured by `DEFAULT` key.

```js

module.exports = {

  theme: {

    skeletonScreen: {

      DEFAULT: { // .loading

        baseColor: '#c7c7c7',

        movingColor: 'linear-gradient(to right, transparent 0%, #E8E8E8 50%, transparent 100%)',

        duration: '1s',

        timing: 'cubic-bezier(0.4, 0.0, 0.2, 1)',

      },

      // specify another color to have multiple loading colors.

      blue: { // .loading-blue

        baseColor: 'blue',

        movingColor: 'linear-gradient(to right, transparent 0%, lightblue 50%, transparent 100%)',

        duration: '.3s',

        timing: 'ease',

      },

    },

  },

}

```

Or you can use `theme.extend` to add another color in addition to the default.

```js

module.exports = {

  theme: {

    extend: {

      skeletonScreen: {

        red: { // .loading-red

          baseColor: 'red',

          movingColor: 'pink',

          duration: '3s',

          timing: 'ease',

        },

      },

    },

  },

}

```

If you want to use colors from your theme. You can do it like this. Learn more about this [here](https://tailwindcss.com/docs/theme#referencing-other-values).

```js

module.exports = {

  theme: {

    skeletonScreen: theme => ({

      DEFAULT: {

        baseColor: theme('colors.gray.300'),

        movingColor: 'linear-gradient(to right, transparent 0%, ' + theme('colors.gray.50') + ' 50%, transparent 100%)',

        duration: '1s',

        timing: 'ease',

      },

    }),

  },

}

```