├── .cursorignore
├── .eslintcache
├── .eslintrc.cjs
├── .github
└── workflows
│ └── algolia.yml
├── .gitignore
├── .npmignore
├── .prettierrc
├── .vscode
└── settings.json
├── LICENSE
├── README.md
├── README.us.md
├── api-extractor.json
├── dist
├── tsdoc-metadata.json
├── web-loading.cjs.js
├── web-loading.cjs.min.js
├── web-loading.d.ts
├── web-loading.esm-bundler.js
├── web-loading.js
└── web-loading.min.js
├── index.html
├── index.js
├── package-lock.json
├── package.json
├── rollup.config.js
├── src
├── ExtendLoading
│ └── index.ts
├── Webloading
│ ├── index.ts
│ ├── init.ts
│ ├── style.ts
│ └── type.ts
├── draw
│ ├── index.ts
│ ├── model
│ │ ├── BaseModel.ts
│ │ ├── Bean.ts
│ │ ├── Circular.ts
│ │ ├── Clock.ts
│ │ ├── Gear.ts
│ │ ├── Img.ts
│ │ ├── Pattern.ts
│ │ ├── Ring.ts
│ │ ├── Roll.ts
│ │ ├── Skeleton.ts
│ │ ├── Zoom.ts
│ │ └── index.ts
│ └── type.ts
├── index.ts
├── loading.ts
├── main.ts
├── type.ts
└── utils.ts
├── tsconfig.base.json
└── tsconfig.json
/.cursorignore:
--------------------------------------------------------------------------------
1 | /dist
2 | /lib
3 | /node_modules
4 | /coverage
5 | /.vscode
6 | /.idea
7 | .DS_Store
8 | *.log
9 | npm-debug.log*
10 | yarn-debug.log*
11 | yarn-error.log*
--------------------------------------------------------------------------------
/.eslintcache:
--------------------------------------------------------------------------------
1 | [{"F:\\tem-pro\\web-loading\\src\\draw\\index.ts":"1","F:\\tem-pro\\web-loading\\src\\draw\\model\\BaseModel.ts":"2","F:\\tem-pro\\web-loading\\src\\draw\\model\\Bean.ts":"3","F:\\tem-pro\\web-loading\\src\\draw\\model\\Circular.ts":"4","F:\\tem-pro\\web-loading\\src\\draw\\model\\Clock.ts":"5","F:\\tem-pro\\web-loading\\src\\draw\\model\\Gear.ts":"6","F:\\tem-pro\\web-loading\\src\\draw\\model\\Img.ts":"7","F:\\tem-pro\\web-loading\\src\\draw\\model\\index.ts":"8","F:\\tem-pro\\web-loading\\src\\draw\\model\\Pattern.ts":"9","F:\\tem-pro\\web-loading\\src\\draw\\model\\Ring.ts":"10","F:\\tem-pro\\web-loading\\src\\draw\\model\\Roll.ts":"11","F:\\tem-pro\\web-loading\\src\\draw\\model\\Skeleton.ts":"12","F:\\tem-pro\\web-loading\\src\\draw\\model\\Zoom.ts":"13","F:\\tem-pro\\web-loading\\src\\draw\\type.ts":"14","F:\\tem-pro\\web-loading\\src\\ExtendLoading\\index.ts":"15","F:\\tem-pro\\web-loading\\src\\index.ts":"16","F:\\tem-pro\\web-loading\\src\\loading.ts":"17","F:\\tem-pro\\web-loading\\src\\main.ts":"18","F:\\tem-pro\\web-loading\\src\\type.ts":"19","F:\\tem-pro\\web-loading\\src\\utils.ts":"20","F:\\tem-pro\\web-loading\\src\\Webloading\\index.ts":"21","F:\\tem-pro\\web-loading\\src\\Webloading\\init.ts":"22","F:\\tem-pro\\web-loading\\src\\Webloading\\style.ts":"23","F:\\tem-pro\\web-loading\\src\\Webloading\\type.ts":"24"},{"size":1239,"mtime":1745548174583,"results":"25","hashOfConfig":"26"},{"size":7988,"mtime":1745548412816,"results":"27","hashOfConfig":"26"},{"size":4565,"mtime":1745546611103,"results":"28","hashOfConfig":"26"},{"size":3816,"mtime":1745546611104,"results":"29","hashOfConfig":"26"},{"size":4610,"mtime":1745546611104,"results":"30","hashOfConfig":"26"},{"size":3418,"mtime":1745546611104,"results":"31","hashOfConfig":"26"},{"size":1716,"mtime":1745546611106,"results":"32","hashOfConfig":"26"},{"size":496,"mtime":1745546611107,"results":"33","hashOfConfig":"26"},{"size":8228,"mtime":1745546611106,"results":"34","hashOfConfig":"26"},{"size":3172,"mtime":1745546611107,"results":"35","hashOfConfig":"26"},{"size":6921,"mtime":1745546611107,"results":"36","hashOfConfig":"26"},{"size":4121,"mtime":1745546611107,"results":"37","hashOfConfig":"26"},{"size":4476,"mtime":1745546611107,"results":"38","hashOfConfig":"26"},{"size":4185,"mtime":1745546611108,"results":"39","hashOfConfig":"26"},{"size":1866,"mtime":1745546611101,"results":"40","hashOfConfig":"26"},{"size":562,"mtime":1745546611108,"results":"41","hashOfConfig":"26"},{"size":3909,"mtime":1745546611108,"results":"42","hashOfConfig":"26"},{"size":881,"mtime":1745546611108,"results":"43","hashOfConfig":"26"},{"size":2909,"mtime":1745547935920,"results":"44","hashOfConfig":"26"},{"size":6065,"mtime":1745547794768,"results":"45","hashOfConfig":"26"},{"size":5087,"mtime":1745547794766,"results":"46","hashOfConfig":"26"},{"size":1928,"mtime":1745547794766,"results":"47","hashOfConfig":"26"},{"size":3412,"mtime":1745548126713,"results":"48","hashOfConfig":"26"},{"size":238,"mtime":1745547794766,"results":"49","hashOfConfig":"26"},{"filePath":"50","messages":"51","suppressedMessages":"52","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"1joz206",{"filePath":"53","messages":"54","suppressedMessages":"55","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"56","messages":"57","suppressedMessages":"58","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"59","messages":"60","suppressedMessages":"61","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"62","messages":"63","suppressedMessages":"64","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"65","messages":"66","suppressedMessages":"67","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"68","messages":"69","suppressedMessages":"70","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"71","messages":"72","suppressedMessages":"73","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"74","messages":"75","suppressedMessages":"76","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"77","messages":"78","suppressedMessages":"79","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"80","messages":"81","suppressedMessages":"82","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"83","messages":"84","suppressedMessages":"85","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"86","messages":"87","suppressedMessages":"88","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"89","messages":"90","suppressedMessages":"91","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"92","messages":"93","suppressedMessages":"94","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"95","messages":"96","suppressedMessages":"97","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"98","messages":"99","suppressedMessages":"100","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"101","messages":"102","suppressedMessages":"103","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"104","messages":"105","suppressedMessages":"106","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"107","messages":"108","suppressedMessages":"109","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"110","messages":"111","suppressedMessages":"112","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"113","messages":"114","suppressedMessages":"115","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"116","messages":"117","suppressedMessages":"118","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"119","messages":"120","suppressedMessages":"121","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"F:\\tem-pro\\web-loading\\src\\draw\\index.ts",[],[],"F:\\tem-pro\\web-loading\\src\\draw\\model\\BaseModel.ts",[],[],"F:\\tem-pro\\web-loading\\src\\draw\\model\\Bean.ts",[],[],"F:\\tem-pro\\web-loading\\src\\draw\\model\\Circular.ts",[],[],"F:\\tem-pro\\web-loading\\src\\draw\\model\\Clock.ts",[],[],"F:\\tem-pro\\web-loading\\src\\draw\\model\\Gear.ts",[],[],"F:\\tem-pro\\web-loading\\src\\draw\\model\\Img.ts",[],[],"F:\\tem-pro\\web-loading\\src\\draw\\model\\index.ts",[],[],"F:\\tem-pro\\web-loading\\src\\draw\\model\\Pattern.ts",[],[],"F:\\tem-pro\\web-loading\\src\\draw\\model\\Ring.ts",[],[],"F:\\tem-pro\\web-loading\\src\\draw\\model\\Roll.ts",[],[],"F:\\tem-pro\\web-loading\\src\\draw\\model\\Skeleton.ts",[],[],"F:\\tem-pro\\web-loading\\src\\draw\\model\\Zoom.ts",[],[],"F:\\tem-pro\\web-loading\\src\\draw\\type.ts",[],[],"F:\\tem-pro\\web-loading\\src\\ExtendLoading\\index.ts",[],[],"F:\\tem-pro\\web-loading\\src\\index.ts",[],[],"F:\\tem-pro\\web-loading\\src\\loading.ts",[],[],"F:\\tem-pro\\web-loading\\src\\main.ts",[],[],"F:\\tem-pro\\web-loading\\src\\type.ts",[],[],"F:\\tem-pro\\web-loading\\src\\utils.ts",[],[],"F:\\tem-pro\\web-loading\\src\\Webloading\\index.ts",[],[],"F:\\tem-pro\\web-loading\\src\\Webloading\\init.ts",[],[],"F:\\tem-pro\\web-loading\\src\\Webloading\\style.ts",[],[],"F:\\tem-pro\\web-loading\\src\\Webloading\\type.ts",[],[]]
--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | root: true,
3 | env: {
4 | browser: true,
5 | node: true,
6 | es6: true,
7 | },
8 | parserOptions: {
9 | parser: "@typescript-eslint/parser",
10 | ecmaVersion: 2020,
11 | sourceType: "module",
12 | ecmaFeatures: {
13 | jsx: true,
14 | },
15 | },
16 | extends: ["plugin:@typescript-eslint/recommended", "plugin:prettier/recommended"],
17 | rules: {
18 | "@typescript-eslint/ban-ts-ignore": "off",
19 | "@typescript-eslint/explicit-function-return-type": "off",
20 | "@typescript-eslint/no-explicit-any": "off",
21 | "@typescript-eslint/no-var-requires": "off",
22 | "@typescript-eslint/no-empty-function": "off",
23 | "no-use-before-define": "off",
24 | "@typescript-eslint/no-use-before-define": "off",
25 | "@typescript-eslint/ban-ts-comment": "off",
26 | "@typescript-eslint/ban-types": "off",
27 | "@typescript-eslint/no-non-null-assertion": "off",
28 | "@typescript-eslint/explicit-module-boundary-types": "off",
29 | "@typescript-eslint/no-unused-vars": [
30 | "error",
31 | {
32 | argsIgnorePattern: "^_",
33 | varsIgnorePattern: "^_",
34 | },
35 | ],
36 | "no-unused-vars": [
37 | "error",
38 | {
39 | argsIgnorePattern: "^_",
40 | varsIgnorePattern: "^_",
41 | },
42 | ],
43 | "space-before-function-paren": "off",
44 | },
45 | };
46 |
--------------------------------------------------------------------------------
/.github/workflows/algolia.yml:
--------------------------------------------------------------------------------
1 | name: algolia
2 | on:
3 | push:
4 | branches:
5 | - master
6 | jobs:
7 | algolia:
8 | runs-on: ubuntu-latest
9 | steps:
10 | - uses: actions/checkout@v3
11 | - name: Get the content of algolia.json as config
12 | id: algolia_config
13 | run: echo "config=$(cat crawlerConfig.json | jq -r tostring)" >> $GITHUB_OUTPUT
14 | - name: Push indices to Algolia
15 | uses: signcl/docsearch-scraper-action@master
16 | env:
17 | APPLICATION_ID: ${{ secrets.APPLICATION_ID }}
18 | API_KEY: ${{ secrets.API_KEY }}
19 | CONFIG: ${{ steps.algolia_config.outputs.config }}
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | lib
3 | temp
4 | docs
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | src
2 | temp
3 | lib
4 | .eslint*
5 | docs
6 | api-extractor.json
7 | rollup.config*
8 | tsconfig*
9 | package-lock.json
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "eslintIntegration": true,
3 | "stylelintIntegration": true,
4 | "tabWidth": 2,
5 | "singleQuote": true,
6 | "semi": false,
7 | "trailingComma": "none",
8 | "htmlWhitespaceSensitivity": "ignore",
9 | "printWidth": 120,
10 | "endOfLine": "auto"
11 | }
12 |
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "commentTranslate.source": "DarkCWK.youdao-youdao"
3 | }
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Apache License
2 | Version 2.0, January 2004
3 | http://www.apache.org/licenses/
4 |
5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
6 |
7 | 1. Definitions.
8 |
9 | "License" shall mean the terms and conditions for use, reproduction,
10 | and distribution as defined by Sections 1 through 9 of this document.
11 |
12 | "Licensor" shall mean the copyright owner or entity authorized by
13 | the copyright owner that is granting the License.
14 |
15 | "Legal Entity" shall mean the union of the acting entity and all
16 | other entities that control, are controlled by, or are under common
17 | control with that entity. For the purposes of this definition,
18 | "control" means (i) the power, direct or indirect, to cause the
19 | direction or management of such entity, whether by contract or
20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the
21 | outstanding shares, or (iii) beneficial ownership of such entity.
22 |
23 | "You" (or "Your") shall mean an individual or Legal Entity
24 | exercising permissions granted by this License.
25 |
26 | "Source" form shall mean the preferred form for making modifications,
27 | including but not limited to software source code, documentation
28 | source, and configuration files.
29 |
30 | "Object" form shall mean any form resulting from mechanical
31 | transformation or translation of a Source form, including but
32 | not limited to compiled object code, generated documentation,
33 | and conversions to other media types.
34 |
35 | "Work" shall mean the work of authorship, whether in Source or
36 | Object form, made available under the License, as indicated by a
37 | copyright notice that is included in or attached to the work
38 | (an example is provided in the Appendix below).
39 |
40 | "Derivative Works" shall mean any work, whether in Source or Object
41 | form, that is based on (or derived from) the Work and for which the
42 | editorial revisions, annotations, elaborations, or other modifications
43 | represent, as a whole, an original work of authorship. For the purposes
44 | of this License, Derivative Works shall not include works that remain
45 | separable from, or merely link (or bind by name) to the interfaces of,
46 | the Work and Derivative Works thereof.
47 |
48 | "Contribution" shall mean any work of authorship, including
49 | the original version of the Work and any modifications or additions
50 | to that Work or Derivative Works thereof, that is intentionally
51 | submitted to Licensor for inclusion in the Work by the copyright owner
52 | or by an individual or Legal Entity authorized to submit on behalf of
53 | the copyright owner. For the purposes of this definition, "submitted"
54 | means any form of electronic, verbal, or written communication sent
55 | to the Licensor or its representatives, including but not limited to
56 | communication on electronic mailing lists, source code control systems,
57 | and issue tracking systems that are managed by, or on behalf of, the
58 | Licensor for the purpose of discussing and improving the Work, but
59 | excluding communication that is conspicuously marked or otherwise
60 | designated in writing by the copyright owner as "Not a Contribution."
61 |
62 | "Contributor" shall mean Licensor and any individual or Legal Entity
63 | on behalf of whom a Contribution has been received by Licensor and
64 | subsequently incorporated within the Work.
65 |
66 | 2. Grant of Copyright License. Subject to the terms and conditions of
67 | this License, each Contributor hereby grants to You a perpetual,
68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable
69 | copyright license to reproduce, prepare Derivative Works of,
70 | publicly display, publicly perform, sublicense, and distribute the
71 | Work and such Derivative Works in Source or Object form.
72 |
73 | 3. Grant of Patent License. Subject to the terms and conditions of
74 | this License, each Contributor hereby grants to You a perpetual,
75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable
76 | (except as stated in this section) patent license to make, have made,
77 | use, offer to sell, sell, import, and otherwise transfer the Work,
78 | where such license applies only to those patent claims licensable
79 | by such Contributor that are necessarily infringed by their
80 | Contribution(s) alone or by combination of their Contribution(s)
81 | with the Work to which such Contribution(s) was submitted. If You
82 | institute patent litigation against any entity (including a
83 | cross-claim or counterclaim in a lawsuit) alleging that the Work
84 | or a Contribution incorporated within the Work constitutes direct
85 | or contributory patent infringement, then any patent licenses
86 | granted to You under this License for that Work shall terminate
87 | as of the date such litigation is filed.
88 |
89 | 4. Redistribution. You may reproduce and distribute copies of the
90 | Work or Derivative Works thereof in any medium, with or without
91 | modifications, and in Source or Object form, provided that You
92 | meet the following conditions:
93 |
94 | (a) You must give any other recipients of the Work or
95 | Derivative Works a copy of this License; and
96 |
97 | (b) You must cause any modified files to carry prominent notices
98 | stating that You changed the files; and
99 |
100 | (c) You must retain, in the Source form of any Derivative Works
101 | that You distribute, all copyright, patent, trademark, and
102 | attribution notices from the Source form of the Work,
103 | excluding those notices that do not pertain to any part of
104 | the Derivative Works; and
105 |
106 | (d) If the Work includes a "NOTICE" text file as part of its
107 | distribution, then any Derivative Works that You distribute must
108 | include a readable copy of the attribution notices contained
109 | within such NOTICE file, excluding those notices that do not
110 | pertain to any part of the Derivative Works, in at least one
111 | of the following places: within a NOTICE text file distributed
112 | as part of the Derivative Works; within the Source form or
113 | documentation, if provided along with the Derivative Works; or,
114 | within a display generated by the Derivative Works, if and
115 | wherever such third-party notices normally appear. The contents
116 | of the NOTICE file are for informational purposes only and
117 | do not modify the License. You may add Your own attribution
118 | notices within Derivative Works that You distribute, alongside
119 | or as an addendum to the NOTICE text from the Work, provided
120 | that such additional attribution notices cannot be construed
121 | as modifying the License.
122 |
123 | You may add Your own copyright statement to Your modifications and
124 | may provide additional or different license terms and conditions
125 | for use, reproduction, or distribution of Your modifications, or
126 | for any such Derivative Works as a whole, provided Your use,
127 | reproduction, and distribution of the Work otherwise complies with
128 | the conditions stated in this License.
129 |
130 | 5. Submission of Contributions. Unless You explicitly state otherwise,
131 | any Contribution intentionally submitted for inclusion in the Work
132 | by You to the Licensor shall be under the terms and conditions of
133 | this License, without any additional terms or conditions.
134 | Notwithstanding the above, nothing herein shall supersede or modify
135 | the terms of any separate license agreement you may have executed
136 | with Licensor regarding such Contributions.
137 |
138 | 6. Trademarks. This License does not grant permission to use the trade
139 | names, trademarks, service marks, or product names of the Licensor,
140 | except as required for reasonable and customary use in describing the
141 | origin of the Work and reproducing the content of the NOTICE file.
142 |
143 | 7. Disclaimer of Warranty. Unless required by applicable law or
144 | agreed to in writing, Licensor provides the Work (and each
145 | Contributor provides its Contributions) on an "AS IS" BASIS,
146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
147 | implied, including, without limitation, any warranties or conditions
148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
149 | PARTICULAR PURPOSE. You are solely responsible for determining the
150 | appropriateness of using or redistributing the Work and assume any
151 | risks associated with Your exercise of permissions under this License.
152 |
153 | 8. Limitation of Liability. In no event and under no legal theory,
154 | whether in tort (including negligence), contract, or otherwise,
155 | unless required by applicable law (such as deliberate and grossly
156 | negligent acts) or agreed to in writing, shall any Contributor be
157 | liable to You for damages, including any direct, indirect, special,
158 | incidental, or consequential damages of any character arising as a
159 | result of this License or out of the use or inability to use the
160 | Work (including but not limited to damages for loss of goodwill,
161 | work stoppage, computer failure or malfunction, or any and all
162 | other commercial damages or losses), even if such Contributor
163 | has been advised of the possibility of such damages.
164 |
165 | 9. Accepting Warranty or Additional Liability. While redistributing
166 | the Work or Derivative Works thereof, You may choose to offer,
167 | and charge a fee for, acceptance of support, warranty, indemnity,
168 | or other liability obligations and/or rights consistent with this
169 | License. However, in accepting such obligations, You may act only
170 | on Your own behalf and on Your sole responsibility, not on behalf
171 | of any other Contributor, and only if You agree to indemnify,
172 | defend, and hold each Contributor harmless for any liability
173 | incurred by, or claims asserted against, such Contributor by reason
174 | of your accepting any such warranty or additional liability.
175 |
176 | END OF TERMS AND CONDITIONS
177 |
178 | APPENDIX: How to apply the Apache License to your work.
179 |
180 | To apply the Apache License to your work, attach the following
181 | boilerplate notice, with the fields enclosed by brackets "[]"
182 | replaced with your own identifying information. (Don't include
183 | the brackets!) The text should be enclosed in the appropriate
184 | comment syntax for the file format. We also recommend that a
185 | file or class name and description of purpose be included on the
186 | same "printed page" as the copyright notice for easier
187 | identification within third-party archives.
188 |
189 | Copyright [yyyy] [name of copyright owner]
190 |
191 | Licensed under the Apache License, Version 2.0 (the "License");
192 | you may not use this file except in compliance with the License.
193 | You may obtain a copy of the License at
194 |
195 | http://www.apache.org/licenses/LICENSE-2.0
196 |
197 | Unless required by applicable law or agreed to in writing, software
198 | distributed under the License is distributed on an "AS IS" BASIS,
199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
200 | See the License for the specific language governing permissions and
201 | limitations under the License.
202 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # web-loading
2 |
3 |
4 | 
5 |
6 |
7 |
8 | 基于 Canvas 的高性能 Web 加载动画库，为您的应用提供丝滑加载效果
9 |
10 |
11 |
12 |
13 | 
14 |
15 |
16 | 
17 |
18 |
19 | 
20 |
21 |
22 |
23 | ## 🔥 特性
24 |
25 | - 💪 基于 Canvas 绘制，性能优异
26 | - 🔥 使用 TypeScript 编写，提供完整的类型定义
27 | - 📦 开箱即用的多种加载动画效果
28 | - 🌈 支持三种挂载模式：DOM、全屏、移动端
29 | - 👓 提供完整的生命周期钩子函数
30 | - ⚡ 支持自定义动画模型
31 |
32 | ## 📋 更新日志
33 |
34 | - 优化源码文件结构
35 | - 新增无感刷新功能
36 | - 解决秒关闪屏bug
37 | - 更换打包方式，引入路径有变化
38 |
39 | ## 🎬 官方文档
40 |
41 | [查看官方文档和示例](https://tommyrunner.github.io/web-loading/)
42 |
43 | ## 介绍
44 |
45 | Web 中实现 loading 的方式有很多种，例如使用`css`动画、`js`操作元素、`gif`图片、`svg`动画、`ui`框架中自带`loading`等等，各有所优，操作元素可能更方便，但会影响性能或其他元素，动态图片性能很好，但自定义不理想。
46 |
47 | `WebLoading` 是一个基于 web 封装的`loading`动画插件，主要**model**是通过`Canvas`绘制，这种方式不会影响到界面中的元素，当然，`WebLoading`也提供了`html`配置兼容了**html**加载方式。默认的**model**模块都提供了独自的`options`配置属性，如果想更贴近业务可以使用`Custom`进行自定义，`WebLoading`提供了`BaseModel` 继承`class`让你更方便自定义自己的`loading`，或者`html`加载方式。
48 |
49 | ## 实现
50 |
51 | `WebLoading`中每一个**model**都是使用`Canvas`绘制，启动方式分别有`DOM`(元素挂载)、`FULL`(全屏)、`MINI`(移动端)。
52 |
53 | 原理大同小异，这里以`DOM`来讲述，首先我们需要`initLoading`初始化你需要渲染的**model**并提供自定义参数，当然，这个操作不是必须的，因为`WebLoading`已经初始化所有的默认数据，此时抛出操作`WebLoading`相关函数。
54 |
55 | 启动`WebLoading`调用`loading`函数需要一个`HtmlElement`元素，该元素必须拥有`children`，而不是一个单标签元素。启动`WebLoading`时会获取到这个挂载的元素，并在`children`添加一个`Canvas`，同时会计算该元素位置以及大小以最优显示同步到`Canvas`上。`WebLoading`会根据`options`参数来绘制具体的**model**，**model**中主要以`requestAnimationFrame`来进行递归回调渲染，以此来实现每一帧动画。
56 |
57 | 注意：如果配置是通过**html**渲染，那么就不会走上一步。
58 |
59 | `WebLoading`封装上主要分隔三层
60 |
61 | - 交互层：开发者与`WebLoading`的操作，例如初始化、启动、关闭、获取相关信息等等。
62 | - 逻辑层：获取到`WebLoading`接收`options`后进行初始化挂载的元素以及`canvas`等等。
63 | - model 层：继承`BaseModel`获取初始化后的`canvas`进行绘制模块。
64 |
65 | ## 安装
66 |
67 | > 根据自己的包管理工具下载。
68 |
69 | ```sh
70 | npm install web-loading
71 | ```
72 |
73 | ## 使用
74 |
75 | ### CDN引入
76 |
77 | ```html
78 |
79 |
83 | ```
84 |
85 | ### 工程项目引入
86 |
87 | ```typescript
88 | import type { LoadingType } from "web-loading";
89 | import { initLoading } from "web-loading";
90 | let webLoading: LoadingType = initLoading({
91 | // 自定义options
92 | })
93 | ```
94 |
95 | > - 参数
96 | > - `options?:OptionsType`
97 | > - 返回
98 | > - `webLoading:LoadingType`
99 |
100 | ### 获取元素
101 |
102 | ```typescript
103 | // 无框架情况
104 | let dom = document.querySelector('xxx')
105 | // vue
106 | let dom = ref()
107 | // ...如果是FULL或MINI不需要获取元素
108 | ```
109 |
110 | ### 启动
111 |
112 | ```typescript
113 | // 注意:在dom加载完成后再调用loading
114 | window.onload = function () {
115 | webLoading.loading(dom)
116 | }
117 | ```
118 |
119 | > 参数
120 | >
121 | > - `dom`:挂载的`HtmlElement`元素
122 | >
123 | > - `options?:OptionsType`，支持覆盖`options`。
124 |
125 | ## 启动方式
126 |
127 | `DOM`、`FULL`、`MINI`三种启动方式都需要基于`HtmlElement`，这里`FULL`、`MINI`是扩展的启动方式，参数中无须提供`HtemlElment`，是因为`WebLoading`已经处理的元素的创建到消失的流程。
128 |
129 | ```typescript
130 | import type { LoadingType } from "web-loading";
131 | import { fullLoading,miniLoading LOADING_TYPES } from "web-loading";
132 |
133 | let webLoading: LoadingType = fullLoading() // 全屏
134 | // let webLoading: LoadingType = miniLoading() // 移动端
135 |
136 | // 启动(如果是MINI或者FULL无需传递dom)
137 | webLoading.loading()
138 | ```
139 |
140 |
--------------------------------------------------------------------------------
/README.us.md:
--------------------------------------------------------------------------------
1 | # web-loading
2 |
3 |
4 |
5 |
6 |
7 |
8 | High-performance Web loading animation library based on Canvas, providing smooth loading effects for your applications
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | ## 🔥 Features
24 |
25 | - 💪 Based on Canvas rendering, excellent performance
26 | - 🔥 Written in TypeScript, providing complete type definitions
27 | - 📦 Multiple out-of-the-box loading animation effects
28 | - 🌈 Supports three mounting modes: DOM, full-screen, and mobile
29 | - 👓 Provides complete lifecycle hook functions
30 | - ⚡ Supports custom animation models
31 |
32 | ## 📋 Changelog
33 |
34 | - Optimized source code structure
35 | - Added seamless refresh functionality
36 | - Fixed flash screen bug on quick close
37 | - Changed packaging method, import paths have changed
38 |
39 | ## 🎬 Official Documentation
40 |
41 | [View official documentation and examples](https://tommyrunner.github.io/web-loading/)
42 |
43 |
44 | ## introduce
45 |
46 | There are many ways to implement loading on the Web, such as using `css` animation,`js` operation element, `gif` image, `svg` animation, and `loading` in the `ui` framework. Each has its own advantages. The operation element may be more convenient, but it will affect performance or other elements. The dynamic image performance is good, but the customization is not ideal.
47 |
48 | `WebLoading`is a `loading`animation plug-in based on web encapsulation. The main **model** is drawn through` Canvas`. This method will not affect the elements in the interface. Of course, `WebLoading` also provides`html`configuration, which is compatible with the **html** loading method. The default **model** module provides its own `options` configuration attribute. If you want to be closer to the business, you can use`Custom`to customize it.`WebLoading`provides` BaseModel` inheritance `class` to make it easier for you to customize your own`loading`or`html`loading method.
49 |
50 | ## realization
51 |
52 | `Each **model** in WebLoading `is drawn using` Canvas`. The startup methods include `DOM` (element mount), `FULL` (full screen), and `MINI` (mobile terminal).
53 |
54 | The principle is very similar. For `DOM`, first we need `initLoading` to initialize the **model** that you need to render and provide custom parameters. Of course, this operation is not necessary, because `WebLoading` has initialized all the default data. At this time, the operation `WebLoading` related function is thrown.
55 |
56 | Starting the `WebLoading` and calling the `loading` function requires a `HtmlElement` element, which must have `children` instead of a single label element. When you start `WebLoading`, you will get the mounted element and add a `Canvas` in`children`. At the same time, the location and size of the element will be calculated and synchronized to` Canvas` for optimal display`WebLoading`will draw the specific **model** according to the` options` parameter, **In model** recursive callback rendering is mainly performed using `requestAnimationFrame` to achieve each frame of animation.
57 |
58 | Note: If the configuration is rendered through **html**, you will not go to the next step.
59 |
60 | `WebLoading ` package is mainly divided into three layers
61 |
62 | - Interaction layer: operations between developers and `WebLoading`, such as initialization, startup, shutdown, obtaining relevant information, etc.
63 | - Logical layer: get the elements to be initialized and mounted after `WebLoading` receives` options` and `canvas`.
64 | - Model layer: Inherit `BaseModel` to get the initialized `canvas` for drawing module.
65 |
66 | ## install
67 |
68 | > Download according to your own package management tool.
69 |
70 | ```sh
71 | npm install web-loading
72 | ```
73 |
74 | ## use
75 |
76 | ### CDN introduction
77 |
78 | ```html
79 |
80 |
84 | ```
85 |
86 | ### Introduction of engineering projects
87 |
88 | ```typescript
89 | import type { LoadingType } from "web-loading";
90 | import { initLoading } from "web-loading";
91 | let webLoading: LoadingType = initLoading({
92 | // Custom options
93 | })
94 | ```
95 |
96 | > - parameter
97 | > - `options?:OptionsType`
98 | > - return
99 | > - `webLoading:LoadingType`
100 |
101 | ### Get Element
102 |
103 | ```typescript
104 | // No frame
105 | let dom = document.querySelector('xxx')
106 | // vue
107 | let dom = ref()
108 | // ...If it is FULL or MINI, it is not necessary to obtain the element
109 | ```
110 |
111 | ### start-up
112 |
113 | ```typescript
114 | // Note: After the dom loading is completed, call loading
115 | window.onload = function () {
116 | webLoading.loading(dom)
117 | }
118 | ```
119 |
120 | > parameter
121 | >
122 | > - `dom`:Mounted`HtmlElement`element
123 | >
124 | > - `options?:OptionsType`, Support Overrides`options`.
125 |
126 | ## Start mode
127 |
128 | `DOM `,`FULL`,`MINI`All three startup methods need to be based on`HtmlElement`, where`FULL`and`MINI`are the extended startup methods, and`HtmlElement`is not required in the parameters, because`WebLoading`has processed the process from creation to disappearance of elements.
129 |
130 | ```typescript
131 | import type { LoadingType } from "web-loading";
132 | import { fullLoading,miniLoading LOADING_TYPES } from "web-loading";
133 |
134 | let webLoading: LoadingType = fullLoading() // full screen
135 | // let webLoading: LoadingType = miniLoading() // mobile terminal
136 |
137 | // Start (if it is MINI or FULL, there is no need to pass dom)
138 | webLoading.loading()
139 | ```
140 |
--------------------------------------------------------------------------------
/api-extractor.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json",
3 |
4 | "mainEntryPointFilePath": "/lib/index.d.ts",
5 |
6 | "bundledPackages": [],
7 |
8 | "compiler": {
9 | "tsconfigFilePath": "/tsconfig.json"
10 | },
11 |
12 | "apiReport": {
13 | "enabled": false
14 | },
15 |
16 | "docModel": {
17 | "enabled": true
18 | },
19 |
20 | "dtsRollup": {
21 | "enabled": true,
22 | "untrimmedFilePath": "/dist/web-loading.d.ts"
23 | },
24 |
25 | "tsdocMetadata": {
26 | "enabled": true,
27 | "tsdocMetadataFilePath": "/dist/tsdoc-metadata.json"
28 | },
29 |
30 | "messages": {
31 | "compilerMessageReporting": {
32 | "default": {
33 | "logLevel": "warning"
34 | }
35 | },
36 |
37 | "extractorMessageReporting": {
38 | "default": {
39 | "logLevel": "warning"
40 | },
41 | "ae-forgotten-export": {
42 | "logLevel": "none"
43 | }
44 | },
45 |
46 | "tsdocMessageReporting": {
47 | "default": {
48 | "logLevel": "warning"
49 | },
50 | "tsdoc-undefined-tag": {
51 | "logLevel": "none"
52 | },
53 | "tsdoc-param-tag-with-invalid-type": {
54 | "logLevel": "none"
55 | },
56 | "tsdoc-param-tag-with-invalid-optional-name": {
57 | "logLevel": "none"
58 | },
59 | "tsdoc-escape-right-brace": {
60 | "logLevel": "none"
61 | },
62 | "tsdoc-malformed-inline-tag": {
63 | "logLevel": "none"
64 | }
65 | }
66 | }
67 | }
68 |
--------------------------------------------------------------------------------
/dist/tsdoc-metadata.json:
--------------------------------------------------------------------------------
1 | // This file is read by tools that parse documentation comments conforming to the TSDoc standard.
2 | // It should be published with your NPM package. It should not be tracked by Git.
3 | {
4 | "tsdocVersion": "0.12",
5 | "toolPackages": [
6 | {
7 | "packageName": "@microsoft/api-extractor",
8 | "packageVersion": "7.35.2"
9 | }
10 | ]
11 | }
12 |
--------------------------------------------------------------------------------
/dist/web-loading.cjs.min.js:
--------------------------------------------------------------------------------
1 | "use strict";var t,e,i,o;function n(){return{custom:null,html:"",type:exports.LOADING_TYPES.DOM,extendClass:"extend",model:exports.MODEL_TYPES.GEAR,text:"加载中...",textGap:8,fontSize:12,fontFamily:"Microsoft YaHei",delay:65,notFeel:0,delayInto:320,optimization:!1,zIndex:"2001",themeColor:"rgba(64,158,255,1)",bgColor:"rgba(0, 0, 0, 0.8)",shadowColor:"rgba(64,158,255,0.6)",shadowOffsetX:2,shadowOffsetY:2,shadowBlur:5,pointerEvents:!1,toast:!0}}Object.defineProperty(exports,"__esModule",{value:!0}),exports.LOADING_TYPES=void 0,(t=exports.LOADING_TYPES||(exports.LOADING_TYPES={})).DOM="dom",t.FULL="full",t.MINI="mini",exports.MODEL_TYPES=void 0,(e=exports.MODEL_TYPES||(exports.MODEL_TYPES={})).GEAR="Gear",e.RING="Ring",e.ZOOM="Zoom",e.PATTERN="Pattern",e.CLOCK="Clock",e.BEAN="Bean",e.ROLL="Roll",e.CIRCULAR="Circular",e.IMG="Img",e.SKELETON="Skeleton",exports.HOOKS_CALL_KEY=void 0,(i=exports.HOOKS_CALL_KEY||(exports.HOOKS_CALL_KEY={})).BEFORE_CLOSE="beforeClose",i.CLOSED="closed",exports.LOG_TYPES=void 0,(o=exports.LOG_TYPES||(exports.LOG_TYPES={}))[o.INFO=1]="INFO",o[o.WARN=2]="WARN",o[o.ERROR=3]="ERROR";var s,a,r,h,l=function(){function t(){}return t.info=function(t){this.call(t,exports.LOG_TYPES.INFO)},t.warn=function(t){this.call(t,exports.LOG_TYPES.WARN)},t.error=function(t){this.call(t,exports.LOG_TYPES.ERROR)},t.call=function(t,e,i){void 0===e&&(e=exports.LOG_TYPES.INFO),void 0===i&&(i={color:n().themeColor,bgColor:n().bgColor});var o=i.bgColor;2===e&&(o="#fffbe5"),3===e&&(o="#fff0f0");var s="\n background:".concat(o,";\n font-size:14px;\n color:").concat(i.color,";\n padding: 4px;\n border: 1px solid;");console.log("%c web-loading:".concat(t," "),s)},t}();function c(t){switch(d(t)){case"object":return Object.keys(t).length>0;case"array":return t.length>0;case"undefined":default:return void 0!==t;case"null":return null!==t}}function p(t){window.requestAnimationFrame?window.cancelAnimationFrame(t):window.clearInterval(t)}function d(t){try{return Object.prototype.toString.call(t).split(" ")[1].split("]")[0].toLowerCase()}catch(t){return"not-type"}}function x(t,e){var i=null,o={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"};for(var n in o)if(void 0!==t.style[n]){i=o[n];break}if(i){var s=function(){e(),t.removeEventListener(i,s)};t.addEventListener(i,s)}else e()}function u(){var t=String(Date.now());return window.crypto&&window.crypto.randomUUID&&(t=window.crypto.randomUUID()),"wl_"+t.replace(/-/g,"")}exports.ZOOM_ACTION=void 0,(s=exports.ZOOM_ACTION||(exports.ZOOM_ACTION={})).SCALE="scale",s.WAVE="wave",s.HEIGHT="height",exports.PATTERN_CHART=void 0,(a=exports.PATTERN_CHART||(exports.PATTERN_CHART={})).RECT="rect",a.ARC="arc",a.TRIANGLE="triangle",a.HEART="heart",a.POLYGON="polygon",exports.ROLL_CHART=void 0,(r=exports.ROLL_CHART||(exports.ROLL_CHART={})).RECT="rect",r.WHEEL="wheel",r.WINDMILL="windmill",exports.CIRCULAR_ACTION=void 0,(h=exports.CIRCULAR_ACTION||(exports.CIRCULAR_ACTION={})).COLLISION="collision",h.ROTATE="rotate";var f=function(){function t(t,e,i,o,n,s,a,r){this.modelDefOptions=void 0,this.limits=void 0,this.modelDefCall=void 0,this.webLog=l,this.stepClear=1,this.w=t,this.h=e,this.canvas=i,this.ctx=i.getContext("2d"),this.options=o,this.element=n,this.initContextCall(s,a,r)}return t.prototype._$initBaseContext=function(){this.clearRect(),this.ctx.resetTransform();var t=this.options,e=this.canvas.width,i=this.canvas.height;this.ctx.fillStyle=t.themeColor,this.ctx.strokeStyle=t.themeColor,this.ctx.shadowColor=t.shadowColor,this.ctx.font="".concat(t.fontSize,"px ").concat(t.fontFamily," small-caps"),this.ctx.textAlign="center",this.ctx.textBaseline="middle",this.ctx.translate(e/2,i/2);var o=window.devicePixelRatio||1;this.ctx.scale(o,o),this.ctx.save()},t.prototype._$initEvent=function(){var t=this;this.element.$store&&this.element.$store.hookCall.beforeClose((function(){t.clearRect()}))},t.prototype._$animationFrame=function(t){var e=this,i=this.element.$store;if(i){window.requestAnimationFrame||(i.animationId=window.setInterval(t,this.options.delay));var o=Date.now()+this.options.delay;t.call(this);var n=function(){Date.now()>o&&(t.call(e),o=Date.now()+e.options.delay),i.animationId=window.requestAnimationFrame(n)};i.animationId=window.requestAnimationFrame(n)}},t.prototype.initContextCall=function(t,e,i){var o=this;this._$initBaseContext(),this._$initEvent(),c(t)&&(this.modelDefOptions=t,this.options=Object.assign(t,this.options),this.element.$store&&(this.element.$store.options=this.options),e&&e.length&&this.options.toast&&e.forEach((function(t){var e=o.options[t.key];c(e)&&!t.limit(e)&&l.warn(t.message)}))),c(e)&&(this.limits=e),c(i)&&i.call(this,this)},t.prototype.run=function(t){var e=this.element.$store;e&&e.animationId&&this.clearAnimationFrame(e.animationId),this._$animationFrame(t)},t.prototype.clearAnimationFrame=function(t){p(t)},t.prototype.clearRect=function(t,e,i,o){var n=this.canvas.width,s=this.canvas.height;if(c(t)&&c(e)&&c(i)&&c(o))this.ctx.clearRect(t,e,i,o);else if(c(t)&&c(e)&&c(i)&&!c(o)){var a=i-this.stepClear,r=Math.sqrt(i*i-a*a),h=t-a,l=e-r,p=2*a,d=2*r;this.stepClear<=i?(this.ctx.clearRect(h,l,p,d),this.stepClear+=1,this.clearRect(t,e,i)):this.stepClear=1}else this.ctx.clearRect(-n,-s,2*n,2*s)},t.prototype.drawRadiusRect=function(t,e,i,o,n){this.ctx.beginPath(),this.ctx.arc(t+n,e+n,n,1*Math.PI,1.5*Math.PI),this.ctx.lineTo(t+i-n,e),this.ctx.arc(t+i-n,e+n,n,1.5*Math.PI,0),this.ctx.lineTo(t+i,e+o-n),this.ctx.arc(t+i-n,e+o-n,n,0,.5*Math.PI),this.ctx.lineTo(t+n,e+o),this.ctx.arc(t+n,e+o-n,n,.5*Math.PI,Math.PI),this.ctx.lineTo(t,e+n),this.ctx.closePath()},t.prototype.drawText=function(t){var e=this.options,i=Object.assign({esGap:e.textGap||0,x:0,text:e.text||"",textColor:e.themeColor||"rgba(64,158,255,1)"},t);this.ctx.save(),this.ctx.beginPath(),this.ctx.fillStyle=i.textColor,this.ctx.fillText(i.text,i.x,(e.textGap||0)+(e.fontSize||0)+i.esGap),this.ctx.closePath(),this.ctx.restore()},t}(),m=function(t,e){return m=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])},m(t,e)};function w(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Class extends value "+String(e)+" is not a constructor or null");function i(){this.constructor=t}m(t,e),t.prototype=null===e?Object.create(e):(i.prototype=e.prototype,new i)}var v={lineStart:10,lineEnd:16,lineStartSkew:0,lineEndSkew:0,lineWidth:4,lineCap:"round",lineNum:10,direction:!0},g=[{key:"lineNum",message:"lineNum value 4-18",limit:function(t){return t>=4&&t<=18}}],S=function(t){function e(e,i,o,n,s){var a=t.call(this,e,i,o,n,s,v,g,(function(t){var e=t.options;t.ctx.lineCap=e.lineCap,t.ctx.lineWidth=e.lineWidth,t.ctx.save()}))||this;return a.optimization(a.options.textGap+a.options.lineEnd),a.aps=Array.from({length:a.options.lineNum},(function(t,e){return e})),a.run(a.draw),a}return w(e,t),e.prototype.draw=function(){this.clearRect(),this.controller(),this.drawGear();var t=this.options;this.drawText({esGap:t.lineEnd})},e.prototype.controller=function(){var t=this;this.options.direction?this.aps=this.aps.map((function(e){return e-1<=0?t.aps.length-1:e-1})):this.aps=this.aps.map((function(e){return e+1>t.aps.length?0:e+1}))},e.prototype.drawGear=function(){var t=this.options;this.ctx.save(),this.ctx.shadowOffsetX=t.shadowOffsetX,this.ctx.shadowOffsetY=t.shadowOffsetY,this.ctx.shadowBlur=t.shadowBlur;for(var e=0;ethis.h&&(this.options.lineStart=this.h/6-5,this.options.lineEnd=this.h/6,this.options.textGap=2)},e}(f),C={zoomGap:10,maxSize:16,zoomNum:5,lineWidth:10,zoomHeight:2,lineCap:"round",action:exports.ZOOM_ACTION.SCALE,direction:!0,zoomColors:[]},T=[{key:"lineWidth",message:"lineWidth(default:10) <= maxSize(default:16)",limit:function(t){return t<=C.maxSize}},{key:"maxSize",message:"lineWidth(default:10) <= maxSize(default:16)",limit:function(t){return C.lineWidth<=t}}],y=function(t){function e(e,i,o,n,s){var a=t.call(this,e,i,o,n,s,C,T,(function(t){var e=t.options;t.ctx.lineCap=e.lineCap,t.ctx.lineWidth=e.lineWidth,t.ctx.translate(-(e.lineWidth*(e.zoomNum+1)+e.zoomGap*(e.zoomNum+1))/2,-e.zoomHeight/2),t.ctx.save()}))||this;return a.zoomIndex=a.options.direction?0:a.options.zoomNum-1,a.list=Array.from({length:a.options.zoomNum},(function(t,e){return Object.assign({value:a.options.lineWidth,state:0})})),a.run(a.draw),a}return w(e,t),e.prototype.draw=function(){this.clearRect(),this.drawZoom();var t=this.options;this.drawText({esGap:t.maxSize,x:(t.lineWidth*(t.zoomNum+1)+t.zoomGap*(t.zoomNum+1))/2}),this.controller()},e.prototype.controller=function(){var t=this.options;t.direction&&this.zoomIndex>=t.zoomNum?this.zoomIndex=0:t.direction&&this.zoomIndex<0&&(this.zoomIndex=t.zoomNum-1)},e.prototype.drawZoom=function(){for(var t=this.options,e=0;e=t.lineWidth&&this.list[e].value--,t.action===exports.ZOOM_ACTION.SCALE&&(this.ctx.lineWidth=this.list[e].value),e===this.zoomIndex&&(this.list[e].value>t.maxSize&&(this.list[e].state=2,t.direction?this.zoomIndex++:this.zoomIndex-1>=0?this.zoomIndex--:this.zoomIndex=t.zoomNum-1),this.list[e].value<=t.lineWidth&&(this.list[e].state=1)),this.ctx.beginPath(),t.zoomColors.length>0&&t.zoomColors[e]?this.ctx.strokeStyle=t.zoomColors[e]:this.ctx.strokeStyle=t.themeColor;var i=0,o=t.zoomHeight;t.action!==exports.ZOOM_ACTION.HEIGHT&&t.action!==exports.ZOOM_ACTION.WAVE||(i=-this.list[e].value),t.action===exports.ZOOM_ACTION.WAVE&&(o=-this.list[e].value),this.ctx.moveTo((e+1)*(t.lineWidth+t.zoomGap),i),this.ctx.lineTo((e+1)*(t.lineWidth+t.zoomGap),o),this.ctx.stroke(),this.ctx.closePath()}},e}(f),O={arcGap:Math.PI/4,ringGap:10,lineWidth:2,ringNum:2,radius:6,lineCap:"round",turn:10,ringsTurn:[Math.PI,Math.PI/4],direction:!0},E=[{key:"ringNum",message:"ringNum value 1-10",limit:function(t){return t>=1&&t<=10}},{key:"ringsTurn",message:"ringsTurn size ".concat(O.ringNum),limit:function(t){return t.length<=O.ringNum}}],I=function(t){function e(e,i,o,n,s){var a=t.call(this,e,i,o,n,s,O,E,(function(t){var e=t.options;t.ctx.lineCap=e.lineCap,t.ctx.lineWidth=e.lineWidth,t.ctx.save()}))||this;return a.rotate=10,a.run(a.draw),a}return w(e,t),e.prototype.draw=function(){this.clearRect(),this.controller();var t=this.options;this.drawText({esGap:t.ringNum*(t.radius+t.ringGap/2)})},e.prototype.controller=function(){this.ctx.save();var t=this.options,e=this.rotate*Math.PI/180*(t.direction?1:-1);this.ctx.rotate(e),this.ctx.shadowOffsetX=t.shadowOffsetX,this.ctx.shadowOffsetY=t.shadowOffsetY,this.ctx.shadowBlur=t.shadowBlur;for(var i=1;i<=t.ringNum;i++)this.drawRing(t.radius+(i-1)*t.ringGap,t.arcGap,t.ringsTurn&&t.ringsTurn.length>0?t.ringsTurn[i-1]:Math.PI/i);this.rotate+=t.turn,this.ctx.restore()},e.prototype.drawRing=function(t,e,i){void 0===e&&(e=1),void 0===i&&(i=0),this.ctx.beginPath(),this.ctx.arc(0,0,t,e+i,Math.PI+i),this.ctx.stroke(),this.ctx.closePath(),this.ctx.beginPath(),this.ctx.arc(0,0,t,Math.PI+e+i,i),this.ctx.stroke(),this.ctx.closePath()},e}(f),b={beanSize:15,pointLength:15},P=[{key:"pointLength",message:"pointLength value >= 5",limit:function(t){return t>=5}},{key:"beanSize",message:"beanSize value >= 5",limit:function(t){return t>=5}}],R=function(t){function e(e,i,o,n,s){var a=t.call(this,e,i,o,n,s,b,P)||this;return a.bean={turn:30,state:1,beanState:1,nowX:-a.options.pointLength*a.options.beanSize/2-3*a.options.beanSize,beans:Array.from({length:a.options.pointLength},(function(){return 1})),beanAnimaIndex:0},a.options.delay=10,a.run(a.draw),a}return w(e,t),e.prototype.draw=function(){var t=this.options;this.clearRect(),this.ctx.save(),this.ctx.beginPath(),this.ctx.translate(this.bean.nowX,0),this.ctx.arc(0,0,t.beanSize,(360-this.bean.turn)*Math.PI/180,this.bean.turn*Math.PI/180,!0),this.ctx.lineTo(0,0),this.ctx.fill(),this.ctx.closePath(),this.ctx.restore(),this.drawPoint(),this.drawFilter(),this.drawText({esGap:t.beanSize}),this.controller()},e.prototype.controller=function(){var t=this.options;this.bean.nowX>=t.pointLength*t.beanSize/2+2*t.beanSize&&(this.bean.nowX=-t.pointLength*t.beanSize/2-3*t.beanSize,this.bean.beanAnimaIndex=0),this.bean.nowX<=-t.pointLength*t.beanSize/2&&(this.bean.beanState=2),this.bean.turn<=0&&(this.bean.state=2),this.bean.turn>=30&&(this.bean.state=1),1===this.bean.state&&(this.bean.turn-=1),2===this.bean.state&&(this.bean.turn+=1),1===this.bean.beanState&&(this.bean.nowX-=1),2===this.bean.beanState&&(this.bean.nowX+=1)},e.prototype.drawPoint=function(){var t=this.options;this.ctx.save(),this.setShadow(),this.ctx.translate(-t.pointLength*t.beanSize/2,0);for(var e=0;e=5&&t<=24}},{key:"delay",message:"Pattern.delay not allowed update",limit:function(t){return t===n().delay}}],N=function(t){function e(e,i,o,n,s){var a=t.call(this,e,i,o,n,s,k,_,(function(t){t.options.delay=10}))||this;return a.pattern={color:a.randomState("chartColors"),nowHeight:10,chart:a.randomState("charts"),shadow:0,nowState:1,turn:0},a.run(a.draw),a}return w(e,t),e.prototype.draw=function(){var t=this.options;this.clearRect(),this.ctx.save(),this.ctx.beginPath(),this.ctx.translate(0,this.pattern.nowHeight),this.ctx.rotate(this.pattern.turn/Math.PI*2),this.ctx.fillStyle=this.pattern.color,this.selectChart(0,0,t.chartSize),this.ctx.closePath(),this.ctx.restore(),this.drawShadow(),this.clearRect(-this.w,0,2*this.w,this.h),this.controller(t),this.drawText({textColor:this.pattern.color})},e.prototype.controller=function(t){this.pattern.turn+=10,1===this.pattern.nowState?(this.pattern.nowHeight--,this.pattern.shadow+=.2):2===this.pattern.nowState&&(this.pattern.nowHeight++,this.pattern.shadow-=.2),this.pattern.shadow=Math.floor(100*this.pattern.shadow)/100,this.pattern.nowHeight<=-t.chartSize&&this.pattern.nowHeight%8==0&&(t.delay+=.5,t.delay=Math.floor(100*t.delay)/100),this.pattern.nowHeight<=-t.maxHeight?this.pattern.nowState=2:this.pattern.nowHeight>=t.chartSize&&(this.pattern.nowState=1,t.delay=10,this.pattern.chart=this.randomState("charts"),this.pattern.color=this.randomState("chartColors"))},e.prototype.selectChart=function(t,e,i){switch(this.pattern.chart){case exports.PATTERN_CHART.RECT:this.drawRect(t,e,i);break;case exports.PATTERN_CHART.ARC:this.drawArc(t,e,i);break;case exports.PATTERN_CHART.TRIANGLE:this.drawTriangle(t,e,i);break;case exports.PATTERN_CHART.HEART:this.drawHeart(t,e,i);break;case exports.PATTERN_CHART.POLYGON:this.drawPolygon(t,e,i)}},e.prototype.randomState=function(t){var e=this.options;return e[t][parseInt(String(Math.random()*e[t].length))]},e.prototype.drawShadow=function(){this.ctx.save(),this.ctx.beginPath(),this.setShadow(),this.ctx.globalAlpha=.2,this.ctx.strokeStyle=this.pattern.color,this.ctx.moveTo(-this.pattern.shadow/2,0),this.ctx.lineTo(this.pattern.shadow,0),this.ctx.stroke(),this.ctx.beginPath(),this.ctx.restore()},e.prototype.drawRect=function(t,e,i){this.ctx.save(),this.ctx.beginPath(),this.setShadow(),this.ctx.translate(-i/2,-i/2),this.ctx.fillRect(t,e,i,i),this.ctx.closePath(),this.ctx.restore()},e.prototype.drawArc=function(t,e,i){this.ctx.save(),this.ctx.beginPath(),this.setShadow(),this.ctx.arc(t,e,i/2,0,2*Math.PI),this.ctx.fill(),this.ctx.closePath(),this.ctx.restore()},e.prototype.drawTriangle=function(t,e,i){this.ctx.save(),this.ctx.beginPath(),this.setShadow(),this.ctx.translate(-i/2,-i/2*Math.sqrt(3)/2),this.ctx.moveTo(t,e),this.ctx.lineTo(i,0),this.ctx.lineTo(i/2,i/2*Math.sqrt(3)),this.ctx.lineTo(t,e),this.ctx.fill(),this.ctx.closePath(),this.ctx.restore()},e.prototype.drawHeart=function(t,e,i){i/=2,this.ctx.save(),this.ctx.beginPath(),this.setShadow(),this.ctx.translate(0,-2*i/2),this.ctx.moveTo(t,e),this.ctx.bezierCurveTo(i/2,-i,3*i,-i/2,e,2*i),this.ctx.moveTo(t,e),this.ctx.bezierCurveTo(-i/2,-i,3*-i,-i/2,e,2*i),this.ctx.fill(),this.ctx.closePath(),this.ctx.restore()},e.prototype.drawPolygon=function(t,e,i){this.ctx.save(),this.ctx.beginPath(),this.setShadow(),this.ctx.translate(-i/2,-i/2),this.ctx.moveTo(t,e),this.ctx.lineTo(i,e),this.ctx.lineTo(i+i/2,i/2),this.ctx.lineTo(i,i/2+i/2),this.ctx.lineTo(t,i),this.ctx.lineTo(t-i/2,i-i/2),this.ctx.lineTo(t,e),this.ctx.fill(),this.ctx.closePath(),this.ctx.restore()},e.prototype.setShadow=function(){var t=this.options;this.ctx.shadowColor=this.pattern.color,this.ctx.shadowOffsetX=t.shadowOffsetX,this.ctx.shadowOffsetY=t.shadowOffsetY,this.ctx.shadowBlur=t.shadowBlur},e}(f),G={rollGap:12,childNum:4,rollSize:16,showChild:!0,chart:exports.ROLL_CHART.WHEEL,windmills:["#1ab3ea","#de6834","#30925d","#f48ea5"],windmillPointColor:"#f2c31f",fixed:!1},M=[{key:"childNum",message:"chartSize value 4-10",limit:function(t){return t>=4&&t<=10}},{key:"delay",message:"Roll.delay not allowed update",limit:function(t){return t===n().delay}}],H=function(t){function e(e,i,o,n,s){var a=t.call(this,e,i,o,n,s,G,M)||this;return a.Roll={turn:1,nowX:a.options.fixed?0:a.options.childNum/2*(a.options.rollSize+a.options.rollGap)+a.options.rollGap/2,state:2,child:[]},a.run(a.draw),a}return w(e,t),e.prototype.draw=function(){this.clearRect(),this.drawGround(),this.drawChild(),this.ctx.save(),this.ctx.beginPath(),this.ctx.translate(-this.Roll.nowX,0),this.ctx.rotate(this.Roll.turn*Math.PI/180),this.selectChart(),this.controller(),this.ctx.restore();var t=this.options;this.drawText({esGap:t.rollSize})},e.prototype.selectChart=function(){switch(this.options.chart){case exports.ROLL_CHART.RECT:this.drawRect();break;case exports.ROLL_CHART.WHEEL:this.drawWheel();break;case exports.ROLL_CHART.WINDMILL:this.drawWindmill()}},e.prototype.controller=function(){var t=this.options;if(1===this.Roll.state&&(this.Roll.turn-=10,t.delay<20&&!t.fixed&&(t.delay+=2)),2===this.Roll.state&&(this.Roll.turn+=10,t.delay>10&&!t.fixed&&(t.delay-=5)),!t.fixed){this.Roll.nowX<=-t.childNum/2*(t.rollSize+t.rollGap/1.6)&&(this.Roll.state=1),this.Roll.nowX>=t.childNum/2*(t.rollSize+t.rollGap)+t.rollGap/2&&(this.Roll.state=2),1===this.Roll.state&&this.Roll.nowX++,2===this.Roll.state&&this.Roll.nowX--;var e=this.Roll.child;this.Roll.nowX%(t.rollSize+t.rollGap)==0&&2===this.Roll.state&&e.push({turn:this.Roll.turn,x:this.Roll.nowX}),1===this.Roll.state&&e[e.length-1]&&e[e.length-1].x===this.Roll.nowX&&this.Roll.child.pop()}},e.prototype.drawRect=function(){var t=this.options;this.ctx.save(),this.setShadow(),this.ctx.translate(-t.rollSize/2,-t.rollSize/2),this.ctx.fillRect(0,0,t.rollSize,t.rollSize),this.ctx.restore()},e.prototype.drawWheel=function(){var t=this.options;this.ctx.save(),this.ctx.lineWidth=4,this.ctx.beginPath(),this.ctx.arc(0,0,t.rollSize/6,0,2*Math.PI),this.ctx.stroke(),this.ctx.closePath(),this.ctx.beginPath(),this.ctx.arc(0,0,t.rollSize/2,0,2*Math.PI),this.ctx.stroke(),this.ctx.closePath(),this.ctx.beginPath(),this.ctx.arc(0,0,t.rollSize,0,2*Math.PI),this.ctx.stroke(),this.ctx.closePath();for(var e=0;e<6;e++)this.ctx.beginPath(),this.ctx.moveTo(0,t.rollSize/2),this.ctx.lineTo(0,t.rollSize),this.ctx.stroke(),this.ctx.rotate(60*Math.PI/180),this.ctx.closePath();this.ctx.restore()},e.prototype.drawWindmill=function(){var t=this.options;this.ctx.save();for(var e=0;e0?e.some((function(e){return t.classList.contains(e)}))&&this.skeleton.push({title:t.nodeName,element:t}):this.skeleton.push({title:t.nodeName,element:t})},e.prototype.controller=function(t){for(var e=this.options,i=0,o=Array.from(t);i=.9&&(this.state=2),this.colorFlow<=.1&&(this.state=1),1===this.state&&(this.colorFlow+=.06),2===this.state&&(this.colorFlow-=.06))},e}(f)};function X(t,e,i,o,n){try{if(!n.$store)return;var s=n.$store.model;if(s)s.initContextCall(s.modelDefOptions,s.limits,s.modelDefCall);else{s=o.custom?new o.custom(t,e,i,o,n):new F[o.model](t,e,i,o,n)}}catch(t){l.error("draw error("+t+")")}}var B=window;function K(){var t;return(t={})[exports.HOOKS_CALL_KEY.BEFORE_CLOSE]=[],t[exports.HOOKS_CALL_KEY.CLOSED]=[],t}function $(t){var e;return(e={})[exports.HOOKS_CALL_KEY.BEFORE_CLOSE]=function(e){t[exports.HOOKS_CALL_KEY.BEFORE_CLOSE].push(e)},e[exports.HOOKS_CALL_KEY.CLOSED]=function(e){t[exports.HOOKS_CALL_KEY.CLOSED].push(e)},e}var j=window;function U(t,e,i,o){var n=e.pointerEvents?t.scrollWidth:t.clientWidth,s=e.pointerEvents?t.scrollHeight:t.clientHeight,a=j.getComputedStyle(t),r=t.style,h=o.style;return e.type!==exports.LOADING_TYPES.DOM||e.pointerEvents||(t.style.pointerEvents="none"),a.position&&"static"!==a.position||(r.position="relative"),o.id=i,h.opacity="0",h.position="absolute",h.left="".concat(e.pointerEvents?0:t.scrollLeft,"px"),h.top="".concat(e.pointerEvents?0:t.scrollTop,"px"),h.zIndex=e.zIndex,h.transition="".concat(e.delayInto/1e3,"s ease-in-out"),h.backgroundColor=e.bgColor,h.borderRadius=a.borderRadius,"htmlcanvaselement"===d(o)?Z(o,n,s):"htmldivelement"===d(o)&&(h.width="".concat(n,"px"),h.height="".concat(s,"px"),h.display="flex",h.alignItems="center",h.justifyContent="center"),t.append(o),j.setTimeout((function(){return h.opacity="1"}),0),x(t,(function(){t.$store&&(t.$store.loadingId=i)})),t}function Z(t,e,i){var o=j.devicePixelRatio||1;t.width=e*o,t.height=i*o,t.style.width="".concat(e,"px"),t.style.height="".concat(i,"px")}var q=window,V=function(){function t(t){this.canvas=null,this.htmlElement=null,this.loadingId=null,this.element=null,this.hooks=null,this.resizeTimeId=null,this.options=Object.assign(n(),t)}return t.prototype.resize=function(t,e){var i=this;this.resizeTimeId||(this.resizeTimeId=q.setTimeout((function(){var o=e,n=t.clientWidth,s=t.clientHeight;o.width>t.clientWidth&&(n=t.offsetWidth,s=t.offsetHeight),i.canvas?(Z(o,n,s),t.$store&&X(n,s,o,i.options,t)):i.htmlElement&&(i.htmlElement.style.width="".concat(n,"px"),i.htmlElement.style.height="".concat(s,"px")),i.resizeTimeId=null}),this.options.delayInto))},t.prototype.close=function(t,e){var i=this,o=this.options,n=t.$store;q.setTimeout((function(){!function(t,e,i){i.style.opacity="0",e.type!==exports.LOADING_TYPES.DOM&&(t.style.boxShadow="none")}(t,o,e),o.type!==exports.LOADING_TYPES.DOM||o.pointerEvents||(t.style.pointerEvents="auto"),x(t,(function(){n&&(n.model=null,i.callEvent(exports.HOOKS_CALL_KEY.BEFORE_CLOSE),n.animationId&&p(n.animationId)),o.type!==exports.LOADING_TYPES.DOM?t.remove():e.remove(),i.loadingId=null,i.callEvent(exports.HOOKS_CALL_KEY.CLOSED),i.hooks=K()}))}),n&&!n.loadingId?o.delayInto:0)},t.prototype.draw=function(t){var e=this.options;if(e.html){var i={content:B.document.createElement("div"),loadingId:u()},o=i.content,n=i.loadingId;this.htmlElement=o,this.htmlElement.innerHTML=e.html,this.loadingId=n,this.element=U(t,e,n,o)}else{var s={canvas:B.document.createElement("canvas"),hooks:K(),loadingId:u()},a=s.canvas,r=s.hooks;n=s.loadingId;this.canvas=a,this.hooks=r,this.loadingId=n,function(t,e,i){t.$store={options:e,animationId:void 0,loadingId:null,model:null,hookCall:$(i)}}(t,e,r),this.element=U(t,e,n,a),t.$store?X(a.offsetWidth,a.offsetHeight,a,this.options,t):l.error("WebLoading:canvas or ctx null")}},t.prototype.callEvent=function(t){this.hooks&&this.hooks[t].forEach((function(t){t()}))},t}(),J=window,Q=function(){function t(t){this.options=t,this.extendEl=this.initStyle()}return t.prototype.initStyle=function(){this.extendEl=J.document.createElement("div");var t=this.options,e="100vw",i="100vh",o="0px";return t&&(this.extendEl.classList.add("wl_"+(t.extendClass||"loading")),t.type===exports.LOADING_TYPES.MINI&&(e="180px",i="160px",o="10px"),this.extendEl.style.cssText="\n position:fixed;\n width:".concat(e,";\n height:").concat(i,";\n top:50%;\n left:50%;\n transform:translate(-50%, -50%);\n border-radius: ").concat(o,";\n z-index: ").concat(t.zIndex,";\n box-shadow:\n 2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),\n 6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),\n 12.5px 12.5px 10px rgba(0, 0, 0, 0.035),\n 22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),\n 41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05),\n 100px 100px 80px rgba(0, 0, 0, 0.07)\n ;\n ")),J.document.body.appendChild(this.extendEl),this.extendEl},t.prototype.getElement=function(){return this.extendEl},t}(),tt=window;function et(t){var e=new V(t),i=null;function o(t){if(e.element){var i=e.canvas;e.htmlElement&&(i=e.htmlElement),i?e[t](e.element,i):l.warn("Animation element not found!")}}return{loading:function(t,o){var n=Object.assign(e.options,o);if(!e.loadingId&&!i)if(n.type!==exports.LOADING_TYPES.DOM&&(t=new Q(n).getElement()),t){var s=new Promise((function(t){tt.setTimeout((function(){t(!0)}),n.notFeel)})),a=new Promise((function(t){i=t}));Promise.race([s,a]).then((function(o){o?e.draw(t):n.type!==exports.LOADING_TYPES.DOM&&t.remove(),i=null}))}else l.error("The loading function cannot find an HTMLElement element!")},resize:function(){o("resize")},close:function(){i&&i(!1),o("close")},update:function(t){var i=e.canvas,o=Object.assign(e.options,t),n=e.element;i&&o&&n&&n.$store&&X(i.offsetWidth,i.offsetHeight,i,o,n)},getOptions:function(){return e.options},getLoadingId:function(){return e.loadingId}}}function it(t,e){return et(Object.assign(n(),e||{},{type:t}))}var ot=window;ot.BaseModel=f,ot.initLoading=function(t){return et(t)},ot.miniLoading=function(t){return it(exports.LOADING_TYPES.MINI,t)},ot.fullLoading=function(t){return it(exports.LOADING_TYPES.FULL,t)},exports.BaseModel=f,exports.fullLoading=function(t){return it(exports.LOADING_TYPES.FULL,t)},exports.initLoading=et,exports.miniLoading=function(t){return it(exports.LOADING_TYPES.MINI,t)};
2 |
--------------------------------------------------------------------------------
/dist/web-loading.d.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * @packageDocumentation
3 | * @description 包文档说明
4 | */
5 |
6 | /**
7 | * @description 日志输出类
8 | * @public
9 | */
10 | declare class $Log {
11 | /**
12 | * @description 输出信息日志
13 | * @param {string} message - 日志内容
14 | */
15 | static info(message: string): void;
16 | /**
17 | * @description 输出警告日志
18 | * @param {string} message - 日志内容
19 | */
20 | static warn(message: string): void;
21 | /**
22 | * @description 输出错误日志
23 | * @param {string} message - 日志内容
24 | */
25 | static error(message: string): void;
26 | /**
27 | * @description 调用日志输出
28 | * @param {string} message - 日志内容
29 | * @param {LOG_TYPES} type - 日志类型
30 | * @param {LogConfigType} config - 日志配置
31 | */
32 | static call(message: string, type?: LOG_TYPES, config?: LogConfigType): void;
33 | }
34 |
35 | /**
36 | * @description 基础模型类
37 | * @public
38 | */
39 | export declare class BaseModel {
40 | w: number;
41 | h: number;
42 | canvas: HTMLCanvasElement;
43 | ctx: CanvasRenderingContext2D;
44 | options: Required;
45 | element: ElementType;
46 | modelDefOptions: T | undefined;
47 | limits: Array | undefined;
48 | modelDefCall: ((model: BaseModel) => void) | undefined;
49 | webLog: $Log;
50 | private stepClear;
51 | /**
52 | * @description 自定义基础模型
53 | * @param {number} w - Canvas宽度
54 | * @param {number} h - Canvas高度
55 | * @param {HTMLCanvasElement} canvas - Canvas元素
56 | * @param {Required} options - 配置选项
57 | * @param {ElementType} element - 容器元素
58 | * @param {T} [modelDefOptions] - 模型默认选项（可选）
59 | * @param {Array} [limits] - 模型默认限制（可选）
60 | * @param {(model: BaseModel) => void} [modelDefCall] - 提供模型初始化的回调函数，通常在模型中初始化"canvas"或"画笔"（可选）
61 | */
62 | constructor(w: number, h: number, canvas: HTMLCanvasElement, options: Required, element: ElementType, modelDefOptions?: T, limits?: Array, modelDefCall?: (model: BaseModel) => void);
63 | private _$initBaseContext;
64 | private _$initEvent;
65 | /**
66 | * @description 封装requestAnimationFrame触发动画针
67 | * @param {() => void} fun - 触发函数
68 | * @private
69 | */
70 | private _$animationFrame;
71 | /**
72 | * @description 初始化画笔属性
73 | * @param {T} [modelDefOptions] - 提供模型初始化的选项
74 | * @param {Array} [limits] - 提供模型初始化的限制
75 | * @param {(model: BaseModel) => void} [modelDefCall] - 提供模型初始化的回调函数
76 | */
77 | initContextCall(modelDefOptions?: T, limits?: Array, modelDefCall?: (model: BaseModel) => void): void;
78 | /**
79 | * @description 开始动画
80 | * @param {() => void} fun - 动画函数
81 | */
82 | run(fun: () => void): void;
83 | /**
84 | * @description 取消animationFrame动画针
85 | * @param {number} id - 动画ID
86 | */
87 | clearAnimationFrame(id: number): void;
88 | /**
89 | * @description 清空画布
90 | * @param {number} [x] - x坐标
91 | * @param {number} [y] - y坐标
92 | * @param {number} [w_r] - 宽度或半径
93 | * @param {number} [h] - 高度
94 | */
95 | clearRect(x?: number, y?: number, w_r?: number, h?: number): void;
96 | /**
97 | * @description 绘制圆角矩形
98 | * @param {number} x - x坐标
99 | * @param {number} y - y坐标
100 | * @param {number} w - 宽度
101 | * @param {number} h - 高度
102 | * @param {number} r - 圆角半径
103 | */
104 | drawRadiusRect(x: number, y: number, w: number, h: number, r: number): void;
105 | /**
106 | * @description 绘制文本
107 | * @param {DrawTextParamsType} [params] - 文本参数
108 | * DrawTextParamsType:
109 | * esGap?: 额外空隙
110 | * x?: X轴位置
111 | * text?: 文本内容
112 | * textColor?: 文本颜色
113 | */
114 | drawText(params?: DrawTextParamsType): void;
115 | }
116 |
117 | /**
118 | * @description 豆形模型配置类型
119 | * @public
120 | */
121 | export declare interface BeanOptionsType extends OptionsType {
122 | beanSize?: number;
123 | pointLength?: number;
124 | }
125 |
126 | /**
127 | * @description 圆形动作枚举
128 | * @public
129 | */
130 | export declare enum CIRCULAR_ACTION {
131 | COLLISION = "collision",
132 | ROTATE = "rotate"
133 | }
134 |
135 | /**
136 | * @description 圆形模型配置类型
137 | * @public
138 | */
139 | export declare interface CircularOptionsType extends OptionsType {
140 | arcSize?: number;
141 | arcGap?: number;
142 | arcColors?: Array;
143 | action?: CIRCULAR_ACTION;
144 | }
145 |
146 | /**
147 | * @description 时钟模型配置类型
148 | * @public
149 | */
150 | export declare interface ClockOptionsType extends OptionsType {
151 | textTime?: 'time' | 's' | '';
152 | lineColors?: Array;
153 | lineCap?: CanvasLineCap;
154 | lineWidth?: number;
155 | clockSize?: number;
156 | clockGap?: number;
157 | hLine?: boolean;
158 | mLine?: boolean;
159 | sLine?: boolean;
160 | }
161 |
162 | /**
163 | * @description 绘制文本参数类型
164 | * @public
165 | */
166 | export declare interface DrawTextParamsType {
167 | esGap?: number;
168 | x?: number;
169 | text?: string;
170 | textColor?: string;
171 | }
172 |
173 | /**
174 | * @description 元素存储类型接口
175 | * @public
176 | */
177 | export declare interface ElementStoreType {
178 | options: OptionsType;
179 | animationId: number | undefined;
180 | loadingId: string | null;
181 | hookCall: HooksCallType;
182 | model: BaseModel | null;
183 | }
184 |
185 | /**
186 | * @description 元素类型接口
187 | * @public
188 | */
189 | export declare interface ElementType extends HTMLElement {
190 | loadingId?: string | null;
191 | $store?: ElementStoreType;
192 | }
193 |
194 | /**
195 | * @description 全屏加载
196 | * @param {OptionsType} options - 配置选项
197 | * @returns {LoadingType} 返回加载操作对象
198 | * @public
199 | */
200 | export declare function fullLoading(options?: OptionsType): LoadingType;
201 |
202 | /**
203 | * @description 齿轮模型配置类型
204 | * @public
205 | */
206 | export declare interface GearOptionsType extends OptionsType {
207 | lineStart?: number;
208 | lineEnd?: number;
209 | lineStartSkew?: number;
210 | lineEndSkew?: number;
211 | lineWidth?: number;
212 | lineCap?: CanvasLineCap;
213 | lineNum?: number;
214 | direction?: boolean;
215 | }
216 |
217 | /**
218 | * @description 钩子调用键枚举
219 | * @public
220 | */
221 | export declare enum HOOKS_CALL_KEY {
222 | BEFORE_CLOSE = "beforeClose",
223 | CLOSED = "closed"
224 | }
225 |
226 | /**
227 | * @description 钩子调用类型
228 | * 映射键是枚举
229 | */
230 | declare type HooksCallType = {
231 | [key in T]: (...args: any[]) => void;
232 | };
233 |
234 | /**
235 | * @description 图片模型配置类型
236 | * @public
237 | */
238 | export declare interface ImageOptionsType extends OptionsType {
239 | src?: string;
240 | width?: number;
241 | height?: number;
242 | turn?: boolean;
243 | }
244 |
245 | /**
246 | * @description 初始化加载动画
247 | * @param {OptionsType} options - 配置选项
248 | * @returns {LoadingType} 返回加载操作对象
249 | * @public
250 | */
251 | export declare function initLoading(options?: OptionsType): LoadingType;
252 |
253 | /**
254 | * @description 限制类型接口
255 | * @public
256 | */
257 | export declare interface LimitType {
258 | key: string;
259 | message: string;
260 | limit: (key: any) => boolean;
261 | }
262 |
263 | /**
264 | * @description 支持的加载方法
265 | * @public
266 | */
267 | export declare enum LOADING_TYPES {
268 | DOM = "dom",
269 | FULL = "full",
270 | MINI = "mini"
271 | }
272 |
273 | /**
274 | * @description 加载类型接口
275 | * @public
276 | */
277 | export declare interface LoadingType {
278 | loading: (dom: ElementType, options?: OptionsType) => void;
279 | resize: () => void;
280 | close: () => void;
281 | update: (options?: OptionsType) => void;
282 | getOptions: () => OptionsType;
283 | getLoadingId: () => string | null;
284 | }
285 |
286 | /**
287 | * @description 日志类型枚举
288 | * @public
289 | */
290 | export declare enum LOG_TYPES {
291 | INFO = 1,
292 | WARN = 2,
293 | ERROR = 3
294 | }
295 |
296 | /**
297 | * @description 日志配置类型
298 | * @public
299 | */
300 | export declare type LogConfigType = {
301 | color?: string;
302 | bgColor?: string;
303 | };
304 |
305 | /**
306 | * @description 迷你加载
307 | * @param {OptionsType} options - 配置选项
308 | * @returns {LoadingType} 返回加载操作对象
309 | * @public
310 | */
311 | export declare function miniLoading(options?: OptionsType): LoadingType;
312 |
313 | /**
314 | * @description 支持的模型类型
315 | * @public
316 | */
317 | export declare enum MODEL_TYPES {
318 | GEAR = "Gear",
319 | RING = "Ring",
320 | ZOOM = "Zoom",
321 | PATTERN = "Pattern",
322 | CLOCK = "Clock",
323 | BEAN = "Bean",
324 | ROLL = "Roll",
325 | CIRCULAR = "Circular",
326 | IMG = "Img",
327 | SKELETON = "Skeleton"
328 | }
329 |
330 | /**
331 | * @description 配置选项接口
332 | * @public
333 | */
334 | export declare interface OptionsType {
335 | custom?: typeof BaseModel | null;
336 | type?: LOADING_TYPES;
337 | extendClass?: string | null | undefined;
338 | model?: MODEL_TYPES;
339 | html?: string;
340 | text?: string;
341 | textGap?: number;
342 | fontSize?: number;
343 | fontFamily?: string;
344 | delay?: number;
345 | delayInto?: number;
346 | notFeel?: number;
347 | optimization?: boolean;
348 | zIndex?: string;
349 | themeColor?: string;
350 | bgColor?: string;
351 | shadowColor?: string;
352 | shadowOffsetX?: number;
353 | shadowOffsetY?: number;
354 | shadowBlur?: number;
355 | pointerEvents?: boolean;
356 | toast?: boolean;
357 | }
358 |
359 | /**
360 | * @description 图案类型枚举
361 | * @public
362 | */
363 | export declare enum PATTERN_CHART {
364 | RECT = "rect",
365 | ARC = "arc",
366 | TRIANGLE = "triangle",
367 | HEART = "heart",
368 | POLYGON = "polygon"
369 | }
370 |
371 | /**
372 | * @description 图案模型配置类型
373 | * @public
374 | */
375 | export declare interface PatternOptionsType extends OptionsType {
376 | charts?: Array;
377 | chartSize?: number;
378 | chartColors?: Array;
379 | maxHeight?: number;
380 | }
381 |
382 | /**
383 | * @description 环形模型配置类型
384 | * @public
385 | */
386 | export declare interface RingOptionsType extends OptionsType {
387 | ringGap?: number;
388 | arcGap?: number;
389 | lineWidth?: number;
390 | ringNum?: number;
391 | radius?: number;
392 | lineCap?: CanvasLineCap;
393 | turn?: number;
394 | ringsTurn?: Array;
395 | direction?: boolean;
396 | }
397 |
398 | /**
399 | * @description 滚动图表类型枚举
400 | * @public
401 | */
402 | export declare enum ROLL_CHART {
403 | RECT = "rect",
404 | WHEEL = "wheel",
405 | WINDMILL = "windmill"
406 | }
407 |
408 | /**
409 | * @description 滚动模型配置类型
410 | * @public
411 | */
412 | export declare interface RollOptionsType extends OptionsType {
413 | rollGap?: number;
414 | rollSize?: number;
415 | showChild?: boolean;
416 | childNum?: number;
417 | chart?: ROLL_CHART;
418 | windmills?: Array;
419 | windmillPointColor?: string;
420 | fixed?: boolean;
421 | }
422 |
423 | /**
424 | * @description 骨架屏模型配置类型
425 | * @public
426 | */
427 | export declare interface SkeletonOptionsType extends OptionsType {
428 | skeletonColor?: string;
429 | skeletonAnimationColor?: string;
430 | radius?: number;
431 | animation?: boolean;
432 | deep?: boolean;
433 | appointElementClass?: Array;
434 | }
435 |
436 | /**
437 | * @description 缩放动作枚举
438 | * @public
439 | */
440 | export declare enum ZOOM_ACTION {
441 | SCALE = "scale",
442 | WAVE = "wave",
443 | HEIGHT = "height"
444 | }
445 |
446 | /**
447 | * @description 缩放模型配置类型
448 | * @public
449 | */
450 | export declare interface ZoomOptionsType extends OptionsType {
451 | maxSize?: number;
452 | zoomGap?: number;
453 | zoomHeight?: number;
454 | zoomNum?: number;
455 | zoomColors?: Array;
456 | lineCap?: CanvasLineCap;
457 | lineWidth?: number;
458 | action: ZOOM_ACTION;
459 | direction?: boolean;
460 | }
461 |
462 | export { }
463 |
--------------------------------------------------------------------------------
/dist/web-loading.min.js:
--------------------------------------------------------------------------------
1 | !function(t,i){"object"==typeof exports&&"undefined"!=typeof module?i(exports):"function"==typeof define&&define.amd?define(["exports"],i):i((t="undefined"!=typeof globalThis?globalThis:t||self).rustOption={})}(this,(function(t){"use strict";var i,e,o,n;function s(){return{custom:null,html:"",type:t.LOADING_TYPES.DOM,extendClass:"extend",model:t.MODEL_TYPES.GEAR,text:"加载中...",textGap:8,fontSize:12,fontFamily:"Microsoft YaHei",delay:65,notFeel:0,delayInto:320,optimization:!1,zIndex:"2001",themeColor:"rgba(64,158,255,1)",bgColor:"rgba(0, 0, 0, 0.8)",shadowColor:"rgba(64,158,255,0.6)",shadowOffsetX:2,shadowOffsetY:2,shadowBlur:5,pointerEvents:!1,toast:!0}}t.LOADING_TYPES=void 0,(i=t.LOADING_TYPES||(t.LOADING_TYPES={})).DOM="dom",i.FULL="full",i.MINI="mini",t.MODEL_TYPES=void 0,(e=t.MODEL_TYPES||(t.MODEL_TYPES={})).GEAR="Gear",e.RING="Ring",e.ZOOM="Zoom",e.PATTERN="Pattern",e.CLOCK="Clock",e.BEAN="Bean",e.ROLL="Roll",e.CIRCULAR="Circular",e.IMG="Img",e.SKELETON="Skeleton",t.HOOKS_CALL_KEY=void 0,(o=t.HOOKS_CALL_KEY||(t.HOOKS_CALL_KEY={})).BEFORE_CLOSE="beforeClose",o.CLOSED="closed",t.LOG_TYPES=void 0,(n=t.LOG_TYPES||(t.LOG_TYPES={}))[n.INFO=1]="INFO",n[n.WARN=2]="WARN",n[n.ERROR=3]="ERROR";var a,r,h,l,c=function(){function i(){}return i.info=function(i){this.call(i,t.LOG_TYPES.INFO)},i.warn=function(i){this.call(i,t.LOG_TYPES.WARN)},i.error=function(i){this.call(i,t.LOG_TYPES.ERROR)},i.call=function(i,e,o){void 0===e&&(e=t.LOG_TYPES.INFO),void 0===o&&(o={color:s().themeColor,bgColor:s().bgColor});var n=o.bgColor;2===e&&(n="#fffbe5"),3===e&&(n="#fff0f0");var a="\n background:".concat(n,";\n font-size:14px;\n color:").concat(o.color,";\n padding: 4px;\n border: 1px solid;");console.log("%c web-loading:".concat(i," "),a)},i}();function d(t){switch(u(t)){case"object":return Object.keys(t).length>0;case"array":return t.length>0;case"undefined":default:return void 0!==t;case"null":return null!==t}}function p(t){window.requestAnimationFrame?window.cancelAnimationFrame(t):window.clearInterval(t)}function u(t){try{return Object.prototype.toString.call(t).split(" ")[1].split("]")[0].toLowerCase()}catch(t){return"not-type"}}function x(t,i){var e=null,o={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"};for(var n in o)if(void 0!==t.style[n]){e=o[n];break}if(e){var s=function(){i(),t.removeEventListener(e,s)};t.addEventListener(e,s)}else i()}function f(){var t=String(Date.now());return window.crypto&&window.crypto.randomUUID&&(t=window.crypto.randomUUID()),"wl_"+t.replace(/-/g,"")}t.ZOOM_ACTION=void 0,(a=t.ZOOM_ACTION||(t.ZOOM_ACTION={})).SCALE="scale",a.WAVE="wave",a.HEIGHT="height",t.PATTERN_CHART=void 0,(r=t.PATTERN_CHART||(t.PATTERN_CHART={})).RECT="rect",r.ARC="arc",r.TRIANGLE="triangle",r.HEART="heart",r.POLYGON="polygon",t.ROLL_CHART=void 0,(h=t.ROLL_CHART||(t.ROLL_CHART={})).RECT="rect",h.WHEEL="wheel",h.WINDMILL="windmill",t.CIRCULAR_ACTION=void 0,(l=t.CIRCULAR_ACTION||(t.CIRCULAR_ACTION={})).COLLISION="collision",l.ROTATE="rotate";var m=function(){function t(t,i,e,o,n,s,a,r){this.modelDefOptions=void 0,this.limits=void 0,this.modelDefCall=void 0,this.webLog=c,this.stepClear=1,this.w=t,this.h=i,this.canvas=e,this.ctx=e.getContext("2d"),this.options=o,this.element=n,this.initContextCall(s,a,r)}return t.prototype._$initBaseContext=function(){this.clearRect(),this.ctx.resetTransform();var t=this.options,i=this.canvas.width,e=this.canvas.height;this.ctx.fillStyle=t.themeColor,this.ctx.strokeStyle=t.themeColor,this.ctx.shadowColor=t.shadowColor,this.ctx.font="".concat(t.fontSize,"px ").concat(t.fontFamily," small-caps"),this.ctx.textAlign="center",this.ctx.textBaseline="middle",this.ctx.translate(i/2,e/2);var o=window.devicePixelRatio||1;this.ctx.scale(o,o),this.ctx.save()},t.prototype._$initEvent=function(){var t=this;this.element.$store&&this.element.$store.hookCall.beforeClose((function(){t.clearRect()}))},t.prototype._$animationFrame=function(t){var i=this,e=this.element.$store;if(e){window.requestAnimationFrame||(e.animationId=window.setInterval(t,this.options.delay));var o=Date.now()+this.options.delay;t.call(this);var n=function(){Date.now()>o&&(t.call(i),o=Date.now()+i.options.delay),e.animationId=window.requestAnimationFrame(n)};e.animationId=window.requestAnimationFrame(n)}},t.prototype.initContextCall=function(t,i,e){var o=this;this._$initBaseContext(),this._$initEvent(),d(t)&&(this.modelDefOptions=t,this.options=Object.assign(t,this.options),this.element.$store&&(this.element.$store.options=this.options),i&&i.length&&this.options.toast&&i.forEach((function(t){var i=o.options[t.key];d(i)&&!t.limit(i)&&c.warn(t.message)}))),d(i)&&(this.limits=i),d(e)&&e.call(this,this)},t.prototype.run=function(t){var i=this.element.$store;i&&i.animationId&&this.clearAnimationFrame(i.animationId),this._$animationFrame(t)},t.prototype.clearAnimationFrame=function(t){p(t)},t.prototype.clearRect=function(t,i,e,o){var n=this.canvas.width,s=this.canvas.height;if(d(t)&&d(i)&&d(e)&&d(o))this.ctx.clearRect(t,i,e,o);else if(d(t)&&d(i)&&d(e)&&!d(o)){var a=e-this.stepClear,r=Math.sqrt(e*e-a*a),h=t-a,l=i-r,c=2*a,p=2*r;this.stepClear<=e?(this.ctx.clearRect(h,l,c,p),this.stepClear+=1,this.clearRect(t,i,e)):this.stepClear=1}else this.ctx.clearRect(-n,-s,2*n,2*s)},t.prototype.drawRadiusRect=function(t,i,e,o,n){this.ctx.beginPath(),this.ctx.arc(t+n,i+n,n,1*Math.PI,1.5*Math.PI),this.ctx.lineTo(t+e-n,i),this.ctx.arc(t+e-n,i+n,n,1.5*Math.PI,0),this.ctx.lineTo(t+e,i+o-n),this.ctx.arc(t+e-n,i+o-n,n,0,.5*Math.PI),this.ctx.lineTo(t+n,i+o),this.ctx.arc(t+n,i+o-n,n,.5*Math.PI,Math.PI),this.ctx.lineTo(t,i+n),this.ctx.closePath()},t.prototype.drawText=function(t){var i=this.options,e=Object.assign({esGap:i.textGap||0,x:0,text:i.text||"",textColor:i.themeColor||"rgba(64,158,255,1)"},t);this.ctx.save(),this.ctx.beginPath(),this.ctx.fillStyle=e.textColor,this.ctx.fillText(e.text,e.x,(i.textGap||0)+(i.fontSize||0)+e.esGap),this.ctx.closePath(),this.ctx.restore()},t}(),w=function(t,i){return w=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,i){t.__proto__=i}||function(t,i){for(var e in i)Object.prototype.hasOwnProperty.call(i,e)&&(t[e]=i[e])},w(t,i)};function v(t,i){if("function"!=typeof i&&null!==i)throw new TypeError("Class extends value "+String(i)+" is not a constructor or null");function e(){this.constructor=t}w(t,i),t.prototype=null===i?Object.create(i):(e.prototype=i.prototype,new e)}var g={lineStart:10,lineEnd:16,lineStartSkew:0,lineEndSkew:0,lineWidth:4,lineCap:"round",lineNum:10,direction:!0},S=[{key:"lineNum",message:"lineNum value 4-18",limit:function(t){return t>=4&&t<=18}}],C=function(t){function i(i,e,o,n,s){var a=t.call(this,i,e,o,n,s,g,S,(function(t){var i=t.options;t.ctx.lineCap=i.lineCap,t.ctx.lineWidth=i.lineWidth,t.ctx.save()}))||this;return a.optimization(a.options.textGap+a.options.lineEnd),a.aps=Array.from({length:a.options.lineNum},(function(t,i){return i})),a.run(a.draw),a}return v(i,t),i.prototype.draw=function(){this.clearRect(),this.controller(),this.drawGear();var t=this.options;this.drawText({esGap:t.lineEnd})},i.prototype.controller=function(){var t=this;this.options.direction?this.aps=this.aps.map((function(i){return i-1<=0?t.aps.length-1:i-1})):this.aps=this.aps.map((function(i){return i+1>t.aps.length?0:i+1}))},i.prototype.drawGear=function(){var t=this.options;this.ctx.save(),this.ctx.shadowOffsetX=t.shadowOffsetX,this.ctx.shadowOffsetY=t.shadowOffsetY,this.ctx.shadowBlur=t.shadowBlur;for(var i=0;ithis.h&&(this.options.lineStart=this.h/6-5,this.options.lineEnd=this.h/6,this.options.textGap=2)},i}(m),T={zoomGap:10,maxSize:16,zoomNum:5,lineWidth:10,zoomHeight:2,lineCap:"round",action:t.ZOOM_ACTION.SCALE,direction:!0,zoomColors:[]},y=[{key:"lineWidth",message:"lineWidth(default:10) <= maxSize(default:16)",limit:function(t){return t<=T.maxSize}},{key:"maxSize",message:"lineWidth(default:10) <= maxSize(default:16)",limit:function(t){return T.lineWidth<=t}}],O=function(i){function e(t,e,o,n,s){var a=i.call(this,t,e,o,n,s,T,y,(function(t){var i=t.options;t.ctx.lineCap=i.lineCap,t.ctx.lineWidth=i.lineWidth,t.ctx.translate(-(i.lineWidth*(i.zoomNum+1)+i.zoomGap*(i.zoomNum+1))/2,-i.zoomHeight/2),t.ctx.save()}))||this;return a.zoomIndex=a.options.direction?0:a.options.zoomNum-1,a.list=Array.from({length:a.options.zoomNum},(function(t,i){return Object.assign({value:a.options.lineWidth,state:0})})),a.run(a.draw),a}return v(e,i),e.prototype.draw=function(){this.clearRect(),this.drawZoom();var t=this.options;this.drawText({esGap:t.maxSize,x:(t.lineWidth*(t.zoomNum+1)+t.zoomGap*(t.zoomNum+1))/2}),this.controller()},e.prototype.controller=function(){var t=this.options;t.direction&&this.zoomIndex>=t.zoomNum?this.zoomIndex=0:t.direction&&this.zoomIndex<0&&(this.zoomIndex=t.zoomNum-1)},e.prototype.drawZoom=function(){for(var i=this.options,e=0;e=i.lineWidth&&this.list[e].value--,i.action===t.ZOOM_ACTION.SCALE&&(this.ctx.lineWidth=this.list[e].value),e===this.zoomIndex&&(this.list[e].value>i.maxSize&&(this.list[e].state=2,i.direction?this.zoomIndex++:this.zoomIndex-1>=0?this.zoomIndex--:this.zoomIndex=i.zoomNum-1),this.list[e].value<=i.lineWidth&&(this.list[e].state=1)),this.ctx.beginPath(),i.zoomColors.length>0&&i.zoomColors[e]?this.ctx.strokeStyle=i.zoomColors[e]:this.ctx.strokeStyle=i.themeColor;var o=0,n=i.zoomHeight;i.action!==t.ZOOM_ACTION.HEIGHT&&i.action!==t.ZOOM_ACTION.WAVE||(o=-this.list[e].value),i.action===t.ZOOM_ACTION.WAVE&&(n=-this.list[e].value),this.ctx.moveTo((e+1)*(i.lineWidth+i.zoomGap),o),this.ctx.lineTo((e+1)*(i.lineWidth+i.zoomGap),n),this.ctx.stroke(),this.ctx.closePath()}},e}(m),E={arcGap:Math.PI/4,ringGap:10,lineWidth:2,ringNum:2,radius:6,lineCap:"round",turn:10,ringsTurn:[Math.PI,Math.PI/4],direction:!0},I=[{key:"ringNum",message:"ringNum value 1-10",limit:function(t){return t>=1&&t<=10}},{key:"ringsTurn",message:"ringsTurn size ".concat(E.ringNum),limit:function(t){return t.length<=E.ringNum}}],b=function(t){function i(i,e,o,n,s){var a=t.call(this,i,e,o,n,s,E,I,(function(t){var i=t.options;t.ctx.lineCap=i.lineCap,t.ctx.lineWidth=i.lineWidth,t.ctx.save()}))||this;return a.rotate=10,a.run(a.draw),a}return v(i,t),i.prototype.draw=function(){this.clearRect(),this.controller();var t=this.options;this.drawText({esGap:t.ringNum*(t.radius+t.ringGap/2)})},i.prototype.controller=function(){this.ctx.save();var t=this.options,i=this.rotate*Math.PI/180*(t.direction?1:-1);this.ctx.rotate(i),this.ctx.shadowOffsetX=t.shadowOffsetX,this.ctx.shadowOffsetY=t.shadowOffsetY,this.ctx.shadowBlur=t.shadowBlur;for(var e=1;e<=t.ringNum;e++)this.drawRing(t.radius+(e-1)*t.ringGap,t.arcGap,t.ringsTurn&&t.ringsTurn.length>0?t.ringsTurn[e-1]:Math.PI/e);this.rotate+=t.turn,this.ctx.restore()},i.prototype.drawRing=function(t,i,e){void 0===i&&(i=1),void 0===e&&(e=0),this.ctx.beginPath(),this.ctx.arc(0,0,t,i+e,Math.PI+e),this.ctx.stroke(),this.ctx.closePath(),this.ctx.beginPath(),this.ctx.arc(0,0,t,Math.PI+i+e,e),this.ctx.stroke(),this.ctx.closePath()},i}(m),P={beanSize:15,pointLength:15},R=[{key:"pointLength",message:"pointLength value >= 5",limit:function(t){return t>=5}},{key:"beanSize",message:"beanSize value >= 5",limit:function(t){return t>=5}}],L=function(t){function i(i,e,o,n,s){var a=t.call(this,i,e,o,n,s,P,R)||this;return a.bean={turn:30,state:1,beanState:1,nowX:-a.options.pointLength*a.options.beanSize/2-3*a.options.beanSize,beans:Array.from({length:a.options.pointLength},(function(){return 1})),beanAnimaIndex:0},a.options.delay=10,a.run(a.draw),a}return v(i,t),i.prototype.draw=function(){var t=this.options;this.clearRect(),this.ctx.save(),this.ctx.beginPath(),this.ctx.translate(this.bean.nowX,0),this.ctx.arc(0,0,t.beanSize,(360-this.bean.turn)*Math.PI/180,this.bean.turn*Math.PI/180,!0),this.ctx.lineTo(0,0),this.ctx.fill(),this.ctx.closePath(),this.ctx.restore(),this.drawPoint(),this.drawFilter(),this.drawText({esGap:t.beanSize}),this.controller()},i.prototype.controller=function(){var t=this.options;this.bean.nowX>=t.pointLength*t.beanSize/2+2*t.beanSize&&(this.bean.nowX=-t.pointLength*t.beanSize/2-3*t.beanSize,this.bean.beanAnimaIndex=0),this.bean.nowX<=-t.pointLength*t.beanSize/2&&(this.bean.beanState=2),this.bean.turn<=0&&(this.bean.state=2),this.bean.turn>=30&&(this.bean.state=1),1===this.bean.state&&(this.bean.turn-=1),2===this.bean.state&&(this.bean.turn+=1),1===this.bean.beanState&&(this.bean.nowX-=1),2===this.bean.beanState&&(this.bean.nowX+=1)},i.prototype.drawPoint=function(){var t=this.options;this.ctx.save(),this.setShadow(),this.ctx.translate(-t.pointLength*t.beanSize/2,0);for(var i=0;i=5&&t<=24}},{key:"delay",message:"Pattern.delay not allowed update",limit:function(t){return t===s().delay}}],G=function(i){function e(t,e,o,n,s){var a=i.call(this,t,e,o,n,s,_,N,(function(t){t.options.delay=10}))||this;return a.pattern={color:a.randomState("chartColors"),nowHeight:10,chart:a.randomState("charts"),shadow:0,nowState:1,turn:0},a.run(a.draw),a}return v(e,i),e.prototype.draw=function(){var t=this.options;this.clearRect(),this.ctx.save(),this.ctx.beginPath(),this.ctx.translate(0,this.pattern.nowHeight),this.ctx.rotate(this.pattern.turn/Math.PI*2),this.ctx.fillStyle=this.pattern.color,this.selectChart(0,0,t.chartSize),this.ctx.closePath(),this.ctx.restore(),this.drawShadow(),this.clearRect(-this.w,0,2*this.w,this.h),this.controller(t),this.drawText({textColor:this.pattern.color})},e.prototype.controller=function(t){this.pattern.turn+=10,1===this.pattern.nowState?(this.pattern.nowHeight--,this.pattern.shadow+=.2):2===this.pattern.nowState&&(this.pattern.nowHeight++,this.pattern.shadow-=.2),this.pattern.shadow=Math.floor(100*this.pattern.shadow)/100,this.pattern.nowHeight<=-t.chartSize&&this.pattern.nowHeight%8==0&&(t.delay+=.5,t.delay=Math.floor(100*t.delay)/100),this.pattern.nowHeight<=-t.maxHeight?this.pattern.nowState=2:this.pattern.nowHeight>=t.chartSize&&(this.pattern.nowState=1,t.delay=10,this.pattern.chart=this.randomState("charts"),this.pattern.color=this.randomState("chartColors"))},e.prototype.selectChart=function(i,e,o){switch(this.pattern.chart){case t.PATTERN_CHART.RECT:this.drawRect(i,e,o);break;case t.PATTERN_CHART.ARC:this.drawArc(i,e,o);break;case t.PATTERN_CHART.TRIANGLE:this.drawTriangle(i,e,o);break;case t.PATTERN_CHART.HEART:this.drawHeart(i,e,o);break;case t.PATTERN_CHART.POLYGON:this.drawPolygon(i,e,o)}},e.prototype.randomState=function(t){var i=this.options;return i[t][parseInt(String(Math.random()*i[t].length))]},e.prototype.drawShadow=function(){this.ctx.save(),this.ctx.beginPath(),this.setShadow(),this.ctx.globalAlpha=.2,this.ctx.strokeStyle=this.pattern.color,this.ctx.moveTo(-this.pattern.shadow/2,0),this.ctx.lineTo(this.pattern.shadow,0),this.ctx.stroke(),this.ctx.beginPath(),this.ctx.restore()},e.prototype.drawRect=function(t,i,e){this.ctx.save(),this.ctx.beginPath(),this.setShadow(),this.ctx.translate(-e/2,-e/2),this.ctx.fillRect(t,i,e,e),this.ctx.closePath(),this.ctx.restore()},e.prototype.drawArc=function(t,i,e){this.ctx.save(),this.ctx.beginPath(),this.setShadow(),this.ctx.arc(t,i,e/2,0,2*Math.PI),this.ctx.fill(),this.ctx.closePath(),this.ctx.restore()},e.prototype.drawTriangle=function(t,i,e){this.ctx.save(),this.ctx.beginPath(),this.setShadow(),this.ctx.translate(-e/2,-e/2*Math.sqrt(3)/2),this.ctx.moveTo(t,i),this.ctx.lineTo(e,0),this.ctx.lineTo(e/2,e/2*Math.sqrt(3)),this.ctx.lineTo(t,i),this.ctx.fill(),this.ctx.closePath(),this.ctx.restore()},e.prototype.drawHeart=function(t,i,e){e/=2,this.ctx.save(),this.ctx.beginPath(),this.setShadow(),this.ctx.translate(0,-2*e/2),this.ctx.moveTo(t,i),this.ctx.bezierCurveTo(e/2,-e,3*e,-e/2,i,2*e),this.ctx.moveTo(t,i),this.ctx.bezierCurveTo(-e/2,-e,3*-e,-e/2,i,2*e),this.ctx.fill(),this.ctx.closePath(),this.ctx.restore()},e.prototype.drawPolygon=function(t,i,e){this.ctx.save(),this.ctx.beginPath(),this.setShadow(),this.ctx.translate(-e/2,-e/2),this.ctx.moveTo(t,i),this.ctx.lineTo(e,i),this.ctx.lineTo(e+e/2,e/2),this.ctx.lineTo(e,e/2+e/2),this.ctx.lineTo(t,e),this.ctx.lineTo(t-e/2,e-e/2),this.ctx.lineTo(t,i),this.ctx.fill(),this.ctx.closePath(),this.ctx.restore()},e.prototype.setShadow=function(){var t=this.options;this.ctx.shadowColor=this.pattern.color,this.ctx.shadowOffsetX=t.shadowOffsetX,this.ctx.shadowOffsetY=t.shadowOffsetY,this.ctx.shadowBlur=t.shadowBlur},e}(m),M={rollGap:12,childNum:4,rollSize:16,showChild:!0,chart:t.ROLL_CHART.WHEEL,windmills:["#1ab3ea","#de6834","#30925d","#f48ea5"],windmillPointColor:"#f2c31f",fixed:!1},H=[{key:"childNum",message:"chartSize value 4-10",limit:function(t){return t>=4&&t<=10}},{key:"delay",message:"Roll.delay not allowed update",limit:function(t){return t===s().delay}}],W=function(i){function e(t,e,o,n,s){var a=i.call(this,t,e,o,n,s,M,H)||this;return a.Roll={turn:1,nowX:a.options.fixed?0:a.options.childNum/2*(a.options.rollSize+a.options.rollGap)+a.options.rollGap/2,state:2,child:[]},a.run(a.draw),a}return v(e,i),e.prototype.draw=function(){this.clearRect(),this.drawGround(),this.drawChild(),this.ctx.save(),this.ctx.beginPath(),this.ctx.translate(-this.Roll.nowX,0),this.ctx.rotate(this.Roll.turn*Math.PI/180),this.selectChart(),this.controller(),this.ctx.restore();var t=this.options;this.drawText({esGap:t.rollSize})},e.prototype.selectChart=function(){switch(this.options.chart){case t.ROLL_CHART.RECT:this.drawRect();break;case t.ROLL_CHART.WHEEL:this.drawWheel();break;case t.ROLL_CHART.WINDMILL:this.drawWindmill()}},e.prototype.controller=function(){var t=this.options;if(1===this.Roll.state&&(this.Roll.turn-=10,t.delay<20&&!t.fixed&&(t.delay+=2)),2===this.Roll.state&&(this.Roll.turn+=10,t.delay>10&&!t.fixed&&(t.delay-=5)),!t.fixed){this.Roll.nowX<=-t.childNum/2*(t.rollSize+t.rollGap/1.6)&&(this.Roll.state=1),this.Roll.nowX>=t.childNum/2*(t.rollSize+t.rollGap)+t.rollGap/2&&(this.Roll.state=2),1===this.Roll.state&&this.Roll.nowX++,2===this.Roll.state&&this.Roll.nowX--;var i=this.Roll.child;this.Roll.nowX%(t.rollSize+t.rollGap)==0&&2===this.Roll.state&&i.push({turn:this.Roll.turn,x:this.Roll.nowX}),1===this.Roll.state&&i[i.length-1]&&i[i.length-1].x===this.Roll.nowX&&this.Roll.child.pop()}},e.prototype.drawRect=function(){var t=this.options;this.ctx.save(),this.setShadow(),this.ctx.translate(-t.rollSize/2,-t.rollSize/2),this.ctx.fillRect(0,0,t.rollSize,t.rollSize),this.ctx.restore()},e.prototype.drawWheel=function(){var t=this.options;this.ctx.save(),this.ctx.lineWidth=4,this.ctx.beginPath(),this.ctx.arc(0,0,t.rollSize/6,0,2*Math.PI),this.ctx.stroke(),this.ctx.closePath(),this.ctx.beginPath(),this.ctx.arc(0,0,t.rollSize/2,0,2*Math.PI),this.ctx.stroke(),this.ctx.closePath(),this.ctx.beginPath(),this.ctx.arc(0,0,t.rollSize,0,2*Math.PI),this.ctx.stroke(),this.ctx.closePath();for(var i=0;i<6;i++)this.ctx.beginPath(),this.ctx.moveTo(0,t.rollSize/2),this.ctx.lineTo(0,t.rollSize),this.ctx.stroke(),this.ctx.rotate(60*Math.PI/180),this.ctx.closePath();this.ctx.restore()},e.prototype.drawWindmill=function(){var t=this.options;this.ctx.save();for(var i=0;i0?i.some((function(i){return t.classList.contains(i)}))&&this.skeleton.push({title:t.nodeName,element:t}):this.skeleton.push({title:t.nodeName,element:t})},i.prototype.controller=function(t){for(var i=this.options,e=0,o=Array.from(t);e=.9&&(this.state=2),this.colorFlow<=.1&&(this.state=1),1===this.state&&(this.colorFlow+=.06),2===this.state&&(this.colorFlow-=.06))},i}(m)};function B(t,i,e,o,n){try{if(!n.$store)return;var s=n.$store.model;if(s)s.initContextCall(s.modelDefOptions,s.limits,s.modelDefCall);else{s=o.custom?new o.custom(t,i,e,o,n):new X[o.model](t,i,e,o,n)}}catch(t){c.error("draw error("+t+")")}}var K=window;function $(){var i;return(i={})[t.HOOKS_CALL_KEY.BEFORE_CLOSE]=[],i[t.HOOKS_CALL_KEY.CLOSED]=[],i}function j(i){var e;return(e={})[t.HOOKS_CALL_KEY.BEFORE_CLOSE]=function(e){i[t.HOOKS_CALL_KEY.BEFORE_CLOSE].push(e)},e[t.HOOKS_CALL_KEY.CLOSED]=function(e){i[t.HOOKS_CALL_KEY.CLOSED].push(e)},e}var U=window;function Z(i,e,o,n){var s=e.pointerEvents?i.scrollWidth:i.clientWidth,a=e.pointerEvents?i.scrollHeight:i.clientHeight,r=U.getComputedStyle(i),h=i.style,l=n.style;return e.type!==t.LOADING_TYPES.DOM||e.pointerEvents||(i.style.pointerEvents="none"),r.position&&"static"!==r.position||(h.position="relative"),n.id=o,l.opacity="0",l.position="absolute",l.left="".concat(e.pointerEvents?0:i.scrollLeft,"px"),l.top="".concat(e.pointerEvents?0:i.scrollTop,"px"),l.zIndex=e.zIndex,l.transition="".concat(e.delayInto/1e3,"s ease-in-out"),l.backgroundColor=e.bgColor,l.borderRadius=r.borderRadius,"htmlcanvaselement"===u(n)?q(n,s,a):"htmldivelement"===u(n)&&(l.width="".concat(s,"px"),l.height="".concat(a,"px"),l.display="flex",l.alignItems="center",l.justifyContent="center"),i.append(n),U.setTimeout((function(){return l.opacity="1"}),0),x(i,(function(){i.$store&&(i.$store.loadingId=o)})),i}function q(t,i,e){var o=U.devicePixelRatio||1;t.width=i*o,t.height=e*o,t.style.width="".concat(i,"px"),t.style.height="".concat(e,"px")}var V=window,J=function(){function i(t){this.canvas=null,this.htmlElement=null,this.loadingId=null,this.element=null,this.hooks=null,this.resizeTimeId=null,this.options=Object.assign(s(),t)}return i.prototype.resize=function(t,i){var e=this;this.resizeTimeId||(this.resizeTimeId=V.setTimeout((function(){var o=i,n=t.clientWidth,s=t.clientHeight;o.width>t.clientWidth&&(n=t.offsetWidth,s=t.offsetHeight),e.canvas?(q(o,n,s),t.$store&&B(n,s,o,e.options,t)):e.htmlElement&&(e.htmlElement.style.width="".concat(n,"px"),e.htmlElement.style.height="".concat(s,"px")),e.resizeTimeId=null}),this.options.delayInto))},i.prototype.close=function(i,e){var o=this,n=this.options,s=i.$store;V.setTimeout((function(){!function(i,e,o){o.style.opacity="0",e.type!==t.LOADING_TYPES.DOM&&(i.style.boxShadow="none")}(i,n,e),n.type!==t.LOADING_TYPES.DOM||n.pointerEvents||(i.style.pointerEvents="auto"),x(i,(function(){s&&(s.model=null,o.callEvent(t.HOOKS_CALL_KEY.BEFORE_CLOSE),s.animationId&&p(s.animationId)),n.type!==t.LOADING_TYPES.DOM?i.remove():e.remove(),o.loadingId=null,o.callEvent(t.HOOKS_CALL_KEY.CLOSED),o.hooks=$()}))}),s&&!s.loadingId?n.delayInto:0)},i.prototype.draw=function(t){var i=this.options;if(i.html){var e={content:K.document.createElement("div"),loadingId:f()},o=e.content,n=e.loadingId;this.htmlElement=o,this.htmlElement.innerHTML=i.html,this.loadingId=n,this.element=Z(t,i,n,o)}else{var s={canvas:K.document.createElement("canvas"),hooks:$(),loadingId:f()},a=s.canvas,r=s.hooks;n=s.loadingId;this.canvas=a,this.hooks=r,this.loadingId=n,function(t,i,e){t.$store={options:i,animationId:void 0,loadingId:null,model:null,hookCall:j(e)}}(t,i,r),this.element=Z(t,i,n,a),t.$store?B(a.offsetWidth,a.offsetHeight,a,this.options,t):c.error("WebLoading:canvas or ctx null")}},i.prototype.callEvent=function(t){this.hooks&&this.hooks[t].forEach((function(t){t()}))},i}(),Q=window,tt=function(){function i(t){this.options=t,this.extendEl=this.initStyle()}return i.prototype.initStyle=function(){this.extendEl=Q.document.createElement("div");var i=this.options,e="100vw",o="100vh",n="0px";return i&&(this.extendEl.classList.add("wl_"+(i.extendClass||"loading")),i.type===t.LOADING_TYPES.MINI&&(e="180px",o="160px",n="10px"),this.extendEl.style.cssText="\n position:fixed;\n width:".concat(e,";\n height:").concat(o,";\n top:50%;\n left:50%;\n transform:translate(-50%, -50%);\n border-radius: ").concat(n,";\n z-index: ").concat(i.zIndex,";\n box-shadow:\n 2.8px 2.8px 2.2px rgba(0, 0, 0, 0.02),\n 6.7px 6.7px 5.3px rgba(0, 0, 0, 0.028),\n 12.5px 12.5px 10px rgba(0, 0, 0, 0.035),\n 22.3px 22.3px 17.9px rgba(0, 0, 0, 0.042),\n 41.8px 41.8px 33.4px rgba(0, 0, 0, 0.05),\n 100px 100px 80px rgba(0, 0, 0, 0.07)\n ;\n ")),Q.document.body.appendChild(this.extendEl),this.extendEl},i.prototype.getElement=function(){return this.extendEl},i}(),it=window;function et(i){var e=new J(i),o=null;function n(t){if(e.element){var i=e.canvas;e.htmlElement&&(i=e.htmlElement),i?e[t](e.element,i):c.warn("Animation element not found!")}}return{loading:function(i,n){var s=Object.assign(e.options,n);if(!e.loadingId&&!o)if(s.type!==t.LOADING_TYPES.DOM&&(i=new tt(s).getElement()),i){var a=new Promise((function(t){it.setTimeout((function(){t(!0)}),s.notFeel)})),r=new Promise((function(t){o=t}));Promise.race([a,r]).then((function(n){n?e.draw(i):s.type!==t.LOADING_TYPES.DOM&&i.remove(),o=null}))}else c.error("The loading function cannot find an HTMLElement element!")},resize:function(){n("resize")},close:function(){o&&o(!1),n("close")},update:function(t){var i=e.canvas,o=Object.assign(e.options,t),n=e.element;i&&o&&n&&n.$store&&B(i.offsetWidth,i.offsetHeight,i,o,n)},getOptions:function(){return e.options},getLoadingId:function(){return e.loadingId}}}function ot(t,i){return et(Object.assign(s(),i||{},{type:t}))}var nt=window;nt.BaseModel=m,nt.initLoading=function(t){return et(t)},nt.miniLoading=function(i){return ot(t.LOADING_TYPES.MINI,i)},nt.fullLoading=function(i){return ot(t.LOADING_TYPES.FULL,i)},t.BaseModel=m,t.fullLoading=function(i){return ot(t.LOADING_TYPES.FULL,i)},t.initLoading=et,t.miniLoading=function(i){return ot(t.LOADING_TYPES.MINI,i)},Object.defineProperty(t,"__esModule",{value:!0})}));
2 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | web-loading
7 |
8 |
9 |
10 |
11 |
12 |
13 | id:
14 | 001
15 |
16 |
17 | user:
18 | use1
19 |
20 |
21 |