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