November's Paddleball Marathon

    @gradin/tailwindcss-skeleton-screen

    1.0.2 • Public • Published

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

    Install

    npm i @gradin/tailwindcss-skeleton-screen

    DownloadsWeekly Downloads

    183

    Version

    1.0.2

    License

    MIT

    Unpacked Size

    6.61 kB

    Total Files

    5

    Last publish

    Collaborators

    • propheus