model

The model configuration will eventually be merged with public configuration.

Supported models

If the custom priority is set to be greater than model, enumerate MODEL_ TYPES。

model	enum	remarks
GEAR	Gear	Gear rotation
RING	Ring	Circular rotation
ZOOM	Zoom	Shape deformation
PATTERN	Pattern	Multigraph
CLOCK	Clock	Clock
BEAN	Bean	Pac-Man
ROLL	Roll	roll
CIRCULAR	Circular	Circular
IMG	Img	image
SKELETON	Skeleton	Skeleton

GEAR

type GearOptionsType。

attribute	type	Default	limit	remarks
lineStart	number	10		Line end
lineEnd	number	16		End of line
lineStartSkew	number	0		Line end Offset
lineEndSkew	number	0		End of line Offset
lineWidth	number	4		Linewidth
lineCap	CanvasLineCap	round		Line style
lineNum	number	10	[4-8]	Number of lines
direction	boolean	true		X Rotation direction: true: clockwise, then reverse

To better control the size of Gear, set lineStart and lineEnd to control the radius or size.

RING

type RingOptionsType。

attribute	type	Default	limit	remarks
arcGap	number	Math.PI / 4		Ring to ring gap
ringGap	number	10		Interval between arcs
lineWidth	number	2		Linewidth
ringNum	number	2	[1-10]	Number of rings
radius	number	6		Ring radius
lineCap	CanvasLineCap	round		Line style
turn	number	10		Rotation angle
ringsTurn	Array<number>	[Math.PI, Math.PI / 4]	length<=ringNum	Initial angle of multiple rings
direction	boolean	true		Direction: true: positive, then negative

ZOOM

typeZoomOptionsType。

attribute	type	Default	limit	remarks
maxSize	number	16	>=lineWidth	zoom Maximum variation
zoomGap	number	10		zomm distance
zoomHeight	number	2		zomm Height of
zoomNum	number	5		zoom quantity
zoomColors	Array<string>	[]		zoom Custom colors for
lineCap	CanvasLineCap	round		Line style
lineWidth	number	10	<=maxSize	Linewidth
action	ZOOM_ACTION	ZOOM_ACTION.SCALE		action
direction	boolean	true		Direction: true: positive, then negative

ZOOM.action

enumeration ZOOM_ACTION。

attribute	enum	remarks
SCALE	scale	Size change
WAVE	wave	wave
HEIGHT	height	Height change

PATTERN

Type PatternOptionsType, this module delay cannot be modified.

attribute	type	Default	limit	remarks
charts	Array<PATTERN_CHART>	[PATTERN_CHART.ARC, PATTERN_CHART.RECT, PATTERN_CHART.TRIANGLE, PATTERN_CHART.HEART, PATTERN_CHART.POLYGON]		Supported graphics
chartSize	number	12	[5-24]	largeness of the shape of the figure
chartColors	Array<string>	['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#0960bd']		Dynamic color
maxHeight	number	60		height

PATTERN.charts

enumeration PATTERN_CHART。

attribute	enum	remarks
RECT	rect	rect
ARC	arc	arc
TRIANGLE	triangle	triangle
HEART	heart	heart
POLYGON	polygon	polygon

CLOCK

typeClockOptionsType。

attribute	type	Default	limit	remarks
textTime	'time' or 's' or ''	''		Text display mode: time: mm/dd/yy, s: sec
lineColors	Array<string>	['#d4d4d4', '#06ab2d', '#8a0303']	length<=3	Pointer color
lineCap	CanvasLineCap	round		Line style
lineWidth	number	12		Linewidth
clockSize	number	15		Clock size
clockGap	number	4		Clock gap
hLine	boolean	true		Time pointer display
mLine	boolean	false		Pointer display
sLine	boolean	true		Second pointer display

BEAN

typeBeanOptionsType。

attribute	type	Default	limit	remarks
beanSize	'number'	15	>=5	bean Size
pointLength	number	16	>=5	The number of points in the bean

ROLL

Type RollOptionsType, this module delay cannot be modified.

attribute	type	Default	limit	remarks
rollSize	number	16	length<=3	roll size
showChild	boolean	true		Show shadow child
childNum	number	4	[4-10]	Child shadow quantity
rollGap	number	12		Shadow gap
chart	ROLL_CHART	ROLL_CHART.WHEEL		Displayed graphics
windmills	Array<string>	['#1ab3ea', '#de6834', '#30925d', '#f48ea5']		The figure is the blade color of Windmills.
windmillPointColor	string	#f2c31f		The middle point color when the graph is Windmills.
fixad	boolean	false		Center fixed or not

ROLL.chart

enumeration ROLL_CHART。

attribute	enum	remarks
RECT	rect	rect
WHEEL	wheel	wheel
WINDMILL	windmill	windmill

Circular

typeCircularOptionsType。

属性	类型	默认值	备注
arcSize	number	8	Circle size
arcGap	number	2	Circular gap
arcColors	Array<string>	['#ec7546', '#8364a4', '#ff6c6e', '#5bc6ab']	Custom color for circles
action	CIRCULAR_ACTION	CIRCULAR_ACTION.COLLISION	action

Circular.action

enumeration CIRCULAR_ACTION。

属性	枚举值	备注
COLLISION	collision	move
ROTATE	rotate	rotate

IMG

typeImageOptionsType。

attribute	type	Default	remarks
src	string	WebLoading logo	pictures linking
width	number	52	image width
height	number	52	Picture height
turn	boolean	true	Rotation or not

Img creates aHTMLImageElement, so usesrcto be compatible with it.

SKELETON

type SkeletonOptionsType。

Skeleton No skeleton is generated for embedded text.

attribute	type	Default	remarks
skeletonColor	string	rgb(240, 240, 240)	Skeleton default color
skeletonAnimationColor	string	rgb(226, 226, 226)	Skeleton animation color
radius	number	5	Skeleton fillet
animation	boolean	true	Show Animation
deep	boolean	true	deep skeleton
appoint	string	''	Specify the element skeleton

SKELETON上拉加载例子

Business scenario: The function is to specify some elements to display the skeleton, such as pull-up loading. Only the last or more module elements need to be dynamically displayed to display the skeleton. At this time, it is recommended to specify the elements.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>web-loading</title>
  </head>
  <script src="https://cdn.jsdelivr.net/npm/web-loading"></script>
  <body>
    <div id="app">
      <div class="list">
        <div class="item">
          <div>
            id:
            <span class="value">001</span>
          </div>
          <div>
            user:
            <span class="value">use1</span>
          </div>
        </div>
        <div class="item">
          <div>
            id:
            <span class="value">002</span>
          </div>
          <div>
            user:
            <span class="value">use2</span>
          </div>
        </div>
        <div class="item">
          <div>
            id:
            <span class="value">003</span>
          </div>
          <div>
            user:
            <span class="value">use3</span>
          </div>
        </div>
      </div>
      <div class="skeleton">
        <div>
          <span>id:</span>
          <span class="value"></span>
        </div>
        <div>
          <span>user:</span>
          <span class="value"></span>
        </div>
      </div>
    </div>
    <script>
      let time = null
      let itemIndex = 3
      window.onload = () => {
        let docApp = document.querySelector('#app')
        let docList = document.querySelector('#app .list')
        let itemDoc = document.querySelector('#app .skeleton')
        const webLoading = initLoading({
          model: 'Skeleton',
          bgColor: '',
          deep: true,
          pointerEvents: true
        })
        window.addEventListener('resize', webLoading.resize)
        docApp.addEventListener('scroll', () => {
          if (docApp.scrollTop + docApp.clientHeight >= docApp.scrollHeight - 60) {
            webLoading.loading(itemDoc)
            clearTimeout(time)
            // simulate loading data
            time = setTimeout(() => {
              ++itemIndex
              docList.innerHTML += `<div class="item">
                <span>
                  id:
                  <b class="value">00${itemIndex}</b>
                </span>
                <span>
                  user:
                  <b class="value">user${itemIndex}</b>
                </span>
              </div>`
              webLoading.close()
            }, 1500)
          }
        })
      }
    </script>
  </body>
  <style>
    #app {
      margin: 12px;
      padding: 12px;
      height: 200px;
      border: 1px solid gray;
      overflow: auto;
      border-radius: 5px;
    }
    #app .item,
    #app .skeleton {
      display: flex;
      flex-direction: column;
      border: 1px solid gray;
      border-radius: 5px;
      padding: 10px;
      line-height: 30px;
      margin-bottom: 6px;
      height: 60px;
    }
    #app .item .value,
    #app .skeleton .value {
      display: inline-block;
      min-width: 31px;
      min-height: 16px;
      font-weight: bold;
      color: rgb(64, 158, 255);
    }
  </style>
</html>

Here, the native html method is used to introduce and display, and other web frameworks are the same. Here, elements are used to separate. Of course, appoint can also be used to specify elements.

HTEMLElmenttype involved

CanvasLineCap

attribute	type	remarks
butt	string
round	string
square	string