multipage-skeleton
    TypeScript icon, indicating that this package has built-in type declarations

    1.3.6 • Public • Published

    Multi-page skeleton screen

    base on dps

    Usage

    install

    yarn add multipage-skeleton -D
    // or
    npm i multipage-skeleton -D
    

    or

    yarn global add multipage-skeleton
    // or
    npm i multipage-skeleton -g
    

    via skeleton.config.js

    Create skeleton.config.js in the root directory of the project, the file will export the following configuration

    const path = require(`path`)
     
    module.exports = [
      {
        // puppeteer config.headless
        headless: true,
        // URL address that can be accessed
        url: `http://localhost:8080/`,
        output: {
          // Save path of skeleton screen code
          filepath: path.resolve(__dirname, `./index.html`),
          // Container for inserting skeleton screen code
          injectSelector: `.test-wrapper-m`,
        },
        // default device
        device: `iPhone 6`,
        // mediaQuery
        mediaQuery: `@media only screen and (max-width: 768px)`,
        // background color
        background: '#fff',
        // skeleton color
        skeletonColor: `#eee`,
        // animation
        animation: `opacity 1.5s linear infinite;`,
      },
      {
        headless: true,
        url: `https://www.baidu.com/`,
        output: {
          filepath: `path/to/file.html`,
          injectSelector: `.test-wrapper-pc`,
        },
        device: `pc`,
        // userAgent
        // userAgent and viewport must be provided together
        userAgent: `Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.89 Safari/537.36`,
        // viewport
        // viewport and userAgent must be provided together
        viewport: {
          // width
          width: 1440,
          // height
          height: 1300,
        },
        mediaQuery: `@media only screen and (min-width: 1440px)`,
        background: '#000',
        skeletonColor: `#fff`,
        // The name of the method injected into the window to destroy the skeleton screen code
        // If not provided, it will be removed in the DOMContentLoaded event
        destroy: `__destroy__`,
        animation: `opacity 1.5s linear infinite;`,
      },
    ]

    then

    npx skeleton start
    
    // If you installed it globally
    skeleton start
    

    or

    // import
    const skeleton = require(`multipage-skeleton`)
     
    // run
    skeleton(parameter)

    The parameter of the skeleton screen are like skeleton.config.js.

    Detailed configuration can refer to index.d.ts

    Tip

    Note that if your previous version is lower than 1.2.2, you need to update the configuration after upgrading the version. Change the original background property to the skeletonColor property to make it more semantic and easy to understand.

    Install

    npm i multipage-skeleton

    DownloadsWeekly Downloads

    9

    Version

    1.3.6

    License

    MIT

    Unpacked Size

    96.2 kB

    Total Files

    27

    Last publish

    Collaborators

    • lucifer_zl