model

model 配置最终会和公共配置合并。

支持的 model

如果设置了custom优先级大于model，枚举MODEL_TYPES。

model	枚举值	备注
GEAR	`Gear`	齿轮旋转
RING	`Ring`	环形旋转
ZOOM	`Zoom`	图形变形
PATTERN	`Pattern`	多图形
CLOCK	`Clock`	时钟
BEAN	`Bean`	吃豆人
ROLL	`Roll`	翻滚
CIRCULAR	`Circular`	碰
IMG	`Img`	图片
SKELETON	`Skeleton`	骨架屏

GEAR

类型GearOptionsType。

属性	类型	默认值	限制	备注
`lineStart`	`number`	`10`		线端
`lineEnd`	`number`	`16`		线末
`lineStartSkew`	`number`	`0`		线端偏移度
`lineEndSkew`	`number`	`0`		线末偏移度
`lineWidth`	`number`	`4`		线宽度
`lineCap`	`CanvasLineCap`	`round`		线的样式
`lineNum`	`number`	`10`	[4-8]	线数量
`direction`	`boolean`	`true`		x 旋转方向:true:顺,则反

为了更好的控制Gear的size，设置lineStart与lineEnd来控制半径或者大小。

RING

类型RingOptionsType。

属性	类型	默认值	限制	备注
`arcGap`	`number`	`Math.PI / 4`		环与环空隙
`ringGap`	`number`	`10`		弧线之间间隔
`lineWidth`	`number`	`2`		线宽度
`ringNum`	`number`	`2`	[1-10]	环数量
`radius`	`number`	`6`		环半径
`lineCap`	`CanvasLineCap`	`round`		线的样式
`turn`	`number`	`10`		旋转角度
`ringsTurn`	`Array<number>`	`[Math.PI, Math.PI / 4]`	length<=ringNum	多个环初始角度
`direction`	`boolean`	`true`		方向:true:顺,则反

ZOOM

类型ZoomOptionsType。

属性	类型	默认值	限制	备注
`maxSize`	`number`	`16`	>=lineWidth	zoom 变化最大
`zoomGap`	`number`	`10`		zomm 距离
`zoomHeight`	`number`	`2`		zomm 的高度
`zoomNum`	`number`	`5`		zoom 数量
`zoomColors`	`Array<string>`	`[]`		zoom 的自定义颜色
`lineCap`	`CanvasLineCap`	`round`		线的样式
`lineWidth`	`number`	`10`	<=maxSize	线宽度
`action`	`ZOOM_ACTION`	`ZOOM_ACTION.SCALE`		动作
`direction`	`boolean`	`true`		方向:true:顺,则反

ZOOM.action

枚举ZOOM_ACTION。

属性	枚举值	备注
SCALE	`scale`	大小变化
WAVE	`wave`	波浪
HEIGHT	`height`	高度变化

PATTERN

类型PatternOptionsType，此模块delay不能被修改。

属性	类型	默认值	限制	备注
`charts`	`Array<PATTERN_CHART>`	`[PATTERN_CHART.ARC, PATTERN_CHART.RECT, PATTERN_CHART.TRIANGLE, PATTERN_CHART.HEART, PATTERN_CHART.POLYGON]`		支持的图形
`chartSize`	`number`	`12`	[5-24]	图形大小
`chartColors`	`Array<string>`	`['#409EFF', '#67C23A', '#E6A23C', '#F56C6C', '#0960bd']`		动态颜色
`maxHeight`	`number`	`60`		高度

PATTERN.charts

枚举PATTERN_CHART。

属性	枚举值	备注
RECT	`rect`	矩形
ARC	`arc`	圆形
TRIANGLE	`triangle`	三角形
HEART	`heart`	爱心
POLYGON	`polygon`	多边形

CLOCK

类型ClockOptionsType。

属性	类型	默认值	限制	备注
`textTime`	`'time'或's' 或''`	`''`		文字显示模式:time:年月日，s：秒
`lineColors`	`Array<string>`	`['#d4d4d4', '#06ab2d', '#8a0303']`	length<=3	指针颜色
`lineCap`	`CanvasLineCap`	`round`		线的样式
`lineWidth`	`number`	`12`		线宽度
`clockSize`	`number`	15		clock 大小
`clockGap`	`number`	4		clock 空隙
`hLine`	`boolean`	true		时指针显示
`mLine`	`boolean`	false		分指针显示
`sLine`	`boolean`	true		秒指针显示

BEAN

类型BeanOptionsType。

属性	类型	默认值	限制	备注
`beanSize`	`'number'`	`15`	>=5	bean 的大小
`pointLength`	`number`	`16`	>=5	bean 里的 point 数量

ROLL

类型RollOptionsType，此模块delay不能被修改。

属性	类型	默认值	限制	备注
`rollSize`	`number`	`16`	length<=3	roll 大小
`showChild`	`boolean`	`true`		显示影子 child
`childNum`	`number`	`4`	[4-10]	child 影子数量
`rollGap`	`number`	`12`		影子空隙
`chart`	`ROLL_CHART`	`ROLL_CHART.WHEEL`		显示的图形
`windmills`	`Array<string>`	`['#1ab3ea', '#de6834', '#30925d', '#f48ea5']`		图形为 Windmills 的叶片颜色。
`windmillPointColor`	`string`	`#f2c31f`		图形为 Windmills 时中间点颜色。
`fixad`	`boolean`	`false`		是否中心固定

ROLL.chart

枚举ROLL_CHART。

属性	枚举值	备注
RECT	`rect`	矩形
WHEEL	`wheel`	轮子
WINDMILL	`windmill`	风车

Circular

类型CircularOptionsType。

属性	类型	默认值	备注
`arcSize`	`number`	`8`	圆大小
`arcGap`	`number`	`2`	圆空隙
`arcColors`	`Array<string>`	`['#ec7546', '#8364a4', '#ff6c6e', '#5bc6ab']`	圆的自定义颜色
`action`	`CIRCULAR_ACTION`	`CIRCULAR_ACTION.COLLISION`	动作

Circular.action

枚举CIRCULAR_ACTION。

属性	枚举值	备注
COLLISION	`collision`	移动
ROTATE	`rotate`	旋转

IMG

类型ImageOptionsType。

属性	类型	默认值	备注
`src`	`string`	WebLoading 的 logo	图片链接
`width`	`number`	`52`	图片宽度
`height`	`number`	`52`	图片高度
`turn`	`boolean`	`true`	是否旋转

Img是创建了一个HTMLImageElement，所以使用src兼容与它。

SKELETON

类型SkeletonOptionsType。
Skeleton 不会给内嵌文本生成骨架。

属性	类型	默认值	备注
`skeletonColor`	`string`	`rgb(240, 240, 240)`	skeleton 默认颜色
`skeletonAnimationColor`	`string`	`rgb(226, 226, 226)`	skeleton 动画颜色
`radius`	`number`	`5`	skeleton 圆角
`animation`	`boolean`	`true`	显示动画
`deep`	`boolean`	`true`	深度 skeleton
`appoint`	`string`	`''`	指定元素 skeleton

SKELETON 上拉加载例子

业务场景：功能是指定某些元素，显示骨架，比如上拉加载，只需要动态显示最后一个或多个模块元素显示骨架，此时推荐指定元素。

<!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>

这里使用原生 html 方式引入，并显示，其余 web 框架同理。这里用的是元素分隔的方式，当然也可以使用appoint指定元素实现。

涉及到的 HTEMLElment 类型

CanvasLineCap

属性	类型	备注
butt	string
round	string
square	string

# model

# 支持的 model

# GEAR

# RING

# ZOOM

# ZOOM.action

# PATTERN

# PATTERN.charts

# CLOCK

# BEAN

# ROLL

# ROLL.chart

# Circular

# Circular.action

# IMG

# SKELETON

# SKELETON 上拉加载例子

# 涉及到的 HTEMLElment 类型

# CanvasLineCap

model

支持的 model

GEAR

RING

ZOOM

ZOOM.action

PATTERN

PATTERN.charts

CLOCK

BEAN

ROLL

ROLL.chart

Circular

Circular.action

IMG

SKELETON

SKELETON 上拉加载例子

涉及到的 HTEMLElment 类型

CanvasLineCap