@gradin/tailwindcss-skeleton-screen
@gradin/tailwindcss-skeleton-screen
npm i @gradin/tailwindcss-skeleton-screen
@gradin/tailwindcss-skeleton-screen

@gradin/tailwindcss-skeleton-screen

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

by gradints

1.0.2 (see all)License:MITTypeScript:Not Found
npm i @gradin/tailwindcss-skeleton-screen
Readme

tailwindcss-skeleton-screen

Tailwindcss plugin to make skeleton screen.

npm (scoped) npm bundle size (scoped) npm

Live Demo

Installation

# 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

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.

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.

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.

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',
      },
    }),
  },
}

Downloads/wk

146

GitHub Stars

10

LAST COMMIT

1yr ago

MAINTAINERS

1

CONTRIBUTORS

1

OPEN ISSUES

1

OPEN PRs

0
VersionTagPublished
1.0.2
latest
1yr ago
1.0.1
undefined
1yr ago
No alternatives found
No tutorials found
Add a tutorial

Rate & Review

100
No reviews found
Be the first to rate