Last updated 14 days ago by zivyangll .
Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install awesome-skeleton 
SYNC missed versions from official npm registry.


NPM version Build status Dependency status

Skeleton generation tool

English | 简体中文



Effect preview

View online effects: Kaola cart:

kaola skeleton


  • skeleton generation component, only for the node side. This component provides two capabilities for skeleton generation and skeleton template injection.
  • Skeletal diagram generation logic: Open the page address by using the Puppeteer headless browser by passing in the page address, perform gray background processing on the first screen image and text of the page, and then take a screenshot of the first screen of the page to generate a compressed base64 png image.


Global installation

$ npm i awesome-skeleton -g

Installation in the project

$ npm i awesome-skeleton -D


Adding a configuration file


  "pageName": "baidu",
  "pageUrl": "",
  "openRepeatList": false,
  "device": "iPhone X",
  "minGrayBlockWidth": 80,
  "minGrayPseudoWidth": 10,
  "debug": true,
  "debugTime": 3000,
  "cookies": [
      "domain": "",
      "expirationDate": 1568267131.555328,
      "hostOnly": false,
      "httpOnly": false,
      "name": "BDORZ",
      "path": "/",
      "sameSite": "unspecified",
      "secure": false,
      "session": false,
      "storeId": "0",
      "value": "yyyyyyyyy",
      "id": 2

Globally generated skeleton

$ skeleton -c ./skeleton.config.json

After the page DomReady, a red button appears at the top of the page: Start generating the skeleton screen.

After the build is complete, a skeleton-output file is generated in the run directory, which includes the skeleton screen png image, base64 text, and html file:

  • base64-baidu.png # skeleton picture
  • base64-baidu.txt # skeleton diagram Base64 encoding
  • base64-baidu.html # Final HTML generationL

The html file can be used directly, copy the following location:

    <!--- skeleton html code -->


  • The skeleton is destroyed by default after onload event.
  • Manual destruction method:
window.SKELETON && SKELETON.destroy();

Of course, you can also use the generated Base64 image directly in your project

Creating a skeleton screen in the project

Add a script to package.json :

"scripts": {
   "skeleton": "skeleton -c ./skeleton.config.json"

Generate skeleton screen::

$ npm run skeleton

Solve the login status

If the page requires a login, you'll need to download the Chrome plugin [EditThisCookie] ( to copy the cookie into the configuration parameters.


Parameter Name Required Default Description
pageUrl Yes - Page address (this address must be accessible)
pageName no output page name (English only)
cookies no page cookies to resolve login status issues
OutputPath no skeleton-output skeleton file output folder path, default to project skeleton-output
openRepeatList no true by default will copy the first item of each list
device no empty for PC reference puppeteer/DeviceDescriptors.js, can be set to 'iPhone 6 Plus'
debug no false turn on debug switch
debugTime No 0 Time in the debug mode, the page stays in the skeleton
minGrayBlockWidth No 0 Minimum processing width of gray blocks
minGrayPseudoWidth No 0 Minimum processing pseudo-class width

dom node attribute

This is the main point of obtaining a high-quality skeleton. By setting the following dom node attributes, some nodes are removed, ignored, and specified in the skeleton to remove the interference of redundant nodes, thus making the skeleton effect Get the best.

Parameter Name Description
data-skeleton-remove Specifies the dom node properties to remove
data-skeleton-bgcolor Specify the background color added in a dom node
data-skeleton-ignore Specifies to ignore dom node properties without any processing
data-skeleton-empty Set a dom's innerHTML to an empty string


<div data-skeleton-remove><span>abc</span></div>
<div data-skeleton-bgcolor="#EE00EE"><span>abc</span></div>
<div data-skeleton-ignore><span>abc</span></div>
<div data-skeleton-empty><span>abc</span></div>


Installation dependencies

$ git clone
$ cd awesome-skeleton && npm i

Running the project

Since the code that generates the skeleton is inserted through dynamic scripts, the code in src/script needs to be packaged into src/script/dist/index.js by Rollup.

$ npm run dev

Modify the configuration in demo/index.js to generate a skeleton of the different pages:

$ cd demo
$ node index.js


Current Tags

  • 0.1.4                                ...           latest (14 days ago)

19 Versions

  • 0.1.4                                ...           14 days ago
  • 0.1.3                                ...           a year ago
  • 0.1.2                                ...           a year ago
  • 0.1.1                                ...           a year ago
  • 0.1.0                                ...           a year ago
  • 0.0.14                                ...           a year ago
  • 0.0.13                                ...           a year ago
  • 0.0.12                                ...           a year ago
  • 0.0.11                                ...           a year ago
  • 0.0.10                                ...           a year ago
  • 0.0.9                                ...           a year ago
  • 0.0.8                                ...           a year ago
  • 0.0.7                                ...           a year ago
  • 0.0.6                                ...           a year ago
  • 0.0.5                                ...           a year ago
  • 0.0.4                                ...           a year ago
  • 0.0.3                                ...           a year ago
  • 0.0.2                                ...           a year ago
  • 0.0.1                                ...           a year ago
Maintainers (1)
Today 0
This Week 4
This Month 6
Last Day 0
Last Week 35
Last Month 65
Dependencies (7)
Dev Dependencies (11)
Dependents (0)

Copyright 2014 - 2016 © |