├── .github
├── issue_template.md
└── pull_request_template.md
├── .gitignore
├── .prettierrc
├── .travis.yml
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── demo
├── .npmrc
├── app
│ ├── App_Resources
│ │ ├── Android
│ │ │ ├── app.gradle
│ │ │ └── src
│ │ │ │ └── main
│ │ │ │ ├── AndroidManifest.xml
│ │ │ │ └── res
│ │ │ │ ├── drawable-hdpi
│ │ │ │ ├── background.png
│ │ │ │ ├── checkmark.png
│ │ │ │ ├── icon.png
│ │ │ │ ├── logo.png
│ │ │ │ └── nstudio.png
│ │ │ │ ├── drawable-ldpi
│ │ │ │ ├── background.png
│ │ │ │ ├── checkmark.png
│ │ │ │ ├── icon.png
│ │ │ │ └── logo.png
│ │ │ │ ├── drawable-mdpi
│ │ │ │ ├── background.png
│ │ │ │ ├── checkmark.png
│ │ │ │ ├── icon.png
│ │ │ │ └── logo.png
│ │ │ │ ├── drawable-nodpi
│ │ │ │ └── splash_screen.xml
│ │ │ │ ├── drawable-xhdpi
│ │ │ │ ├── background.png
│ │ │ │ ├── checkmark.png
│ │ │ │ ├── icon.png
│ │ │ │ └── logo.png
│ │ │ │ ├── drawable-xxhdpi
│ │ │ │ ├── background.png
│ │ │ │ ├── checkmark.png
│ │ │ │ ├── icon.png
│ │ │ │ └── logo.png
│ │ │ │ ├── drawable-xxxhdpi
│ │ │ │ ├── background.png
│ │ │ │ ├── checkmark.png
│ │ │ │ ├── icon.png
│ │ │ │ └── logo.png
│ │ │ │ ├── values-v21
│ │ │ │ ├── colors.xml
│ │ │ │ └── styles.xml
│ │ │ │ └── values
│ │ │ │ ├── colors.xml
│ │ │ │ └── styles.xml
│ │ └── iOS
│ │ │ ├── Assets.xcassets
│ │ │ ├── AppIcon.appiconset
│ │ │ │ ├── Contents.json
│ │ │ │ ├── icon-29.png
│ │ │ │ ├── icon-29@2x.png
│ │ │ │ ├── icon-29@3x.png
│ │ │ │ ├── icon-40.png
│ │ │ │ ├── icon-40@2x.png
│ │ │ │ ├── icon-40@3x.png
│ │ │ │ ├── icon-50.png
│ │ │ │ ├── icon-50@2x.png
│ │ │ │ ├── icon-57.png
│ │ │ │ ├── icon-57@2x.png
│ │ │ │ ├── icon-60@2x.png
│ │ │ │ ├── icon-60@3x.png
│ │ │ │ ├── icon-72.png
│ │ │ │ ├── icon-72@2x.png
│ │ │ │ ├── icon-76.png
│ │ │ │ ├── icon-76@2x.png
│ │ │ │ └── icon-83.5@2x.png
│ │ │ ├── Checkmark.imageset
│ │ │ │ ├── Checkmark.png
│ │ │ │ ├── Checkmark@2x.png
│ │ │ │ ├── Checkmark@3x.png
│ │ │ │ └── Contents.json
│ │ │ ├── Contents.json
│ │ │ ├── LaunchImage.launchimage
│ │ │ │ ├── Contents.json
│ │ │ │ ├── Default-568h@2x.png
│ │ │ │ ├── Default-667h@2x.png
│ │ │ │ ├── Default-736h@3x.png
│ │ │ │ ├── Default-Landscape.png
│ │ │ │ ├── Default-Landscape@2x.png
│ │ │ │ ├── Default-Landscape@3x.png
│ │ │ │ ├── Default-Portrait.png
│ │ │ │ ├── Default-Portrait@2x.png
│ │ │ │ ├── Default.png
│ │ │ │ └── Default@2x.png
│ │ │ ├── LaunchScreen.AspectFill.imageset
│ │ │ │ ├── Contents.json
│ │ │ │ ├── LaunchScreen-AspectFill.png
│ │ │ │ └── LaunchScreen-AspectFill@2x.png
│ │ │ └── LaunchScreen.Center.imageset
│ │ │ │ ├── Contents.json
│ │ │ │ ├── LaunchScreen-Center.png
│ │ │ │ └── LaunchScreen-Center@2x.png
│ │ │ ├── Info.plist
│ │ │ ├── LaunchScreen.storyboard
│ │ │ ├── build.xcconfig
│ │ │ └── nstudio.png
│ ├── app-root.xml
│ ├── app.css
│ ├── app.ts
│ ├── main-page.android.css
│ ├── main-page.ios.css
│ ├── main-page.ts
│ ├── main-page.xml
│ ├── main-view-model.ts
│ ├── package.json
│ └── tests
│ │ └── tests.js
├── karma.conf.js
├── package.json
├── references.d.ts
├── tsconfig.json
├── tsconfig.tns.json
└── webpack.config.js
├── publish
├── pack.sh
├── package.json
└── publish.sh
├── screenshots
├── android
│ ├── 1.png
│ ├── 2.png
│ ├── 3.png
│ └── 4.png
└── ios
│ ├── 1.png
│ ├── 2.png
│ ├── 3.png
│ └── 4.png
├── src
├── .npmignore
├── index.d.ts
├── loading-indicator.android.ts
├── loading-indicator.common.ts
├── loading-indicator.ios.ts
├── package.json
├── platforms
│ ├── android
│ │ ├── AndroidManifest.xml
│ │ ├── nativescript_loading_indicator.aar
│ │ └── res
│ │ │ └── drawable
│ │ │ ├── circle_shape.xml
│ │ │ ├── circular_progress_bar.xml
│ │ │ └── circular_progress_bar_thick.xml
│ └── ios
│ │ └── Podfile
├── references.d.ts
├── scripts
│ └── build-native.js
├── tsconfig.json
└── typings
│ └── objc!MBProgressHUD.d.ts
└── tslint.json
/.github/issue_template.md:
--------------------------------------------------------------------------------
1 | ### Make sure to check the demo app(s) for sample usage
2 |
3 | ### Make sure to check the existing issues in this repository
4 |
5 | ### If the demo apps cannot help and there is no issue for your problem, tell us about it
6 | Please, ensure your title is less than 63 characters long and starts with a capital
7 | letter.
8 |
9 | ### Which platform(s) does your issue occur on?
10 | - iOS/Android/Both
11 | - iOS/Android versions
12 | - emulator or device. What type of device?
13 |
14 | ### Please, provide the following version numbers that your issue occurs with:
15 |
16 | - CLI: (run `tns --version` to fetch it)
17 | - Cross-platform modules: (check the 'version' attribute in the
18 | `node_modules/tns-core-modules/package.json` file in your project)
19 | - Runtime(s): (look for the `"tns-android"` and `"tns-ios"` properties in the `package.json` file of your project)
20 | - Plugin(s): (look for the version numbers in the `package.json` file of your
21 | project and paste your dependencies and devDependencies here)
22 |
23 | ### Please, tell us how to recreate the issue in as much detail as possible.
24 | Describe the steps to reproduce it.
25 |
26 | ### Is there any code involved?
27 | - provide a code example to recreate the problem
28 | - (EVEN BETTER) provide a .zip with application or refer to a repository with application where the problem is reproducible.
29 |
--------------------------------------------------------------------------------
/.github/pull_request_template.md:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 |
10 | ## PR Checklist
11 |
12 | - [ ] The PR title follows our guidelines: https://github.com/NativeScript/NativeScript/blob/master/CONTRIBUTING.md#commit-messages.
13 | - [ ] There is an issue for the bug/feature this PR is for. To avoid wasting your time, it's best to open a suggestion issue first and wait for approval before working on it.
14 | - [ ] All existing tests are passing
15 | - [ ] Tests for the changes are included
16 |
17 | ## What is the current behavior?
18 |
19 |
20 | ## What is the new behavior?
21 |
22 |
23 | Fixes/Implements/Closes #[Issue Number].
24 |
25 |
26 |
27 |
36 |
37 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .vscode
2 | .idea
3 | .DS_Store
4 | *.esm.json
5 | *.js
6 | *.js.map
7 | *.log
8 | src/*.d.ts
9 | !src/index.d.ts
10 | !src/references.d.ts
11 | !src/scripts/*.js
12 | !seed-tests/*.js
13 | seed-tests/seed-copy/**/*.*
14 | seed-tests/seed-copy-new-git-repo/**/*.*
15 | !demo/karma.conf.js
16 | !demo/app/tests/*.js
17 | demo/*.d.ts
18 | !demo/references.d.ts
19 | demo/lib
20 | demo/platforms
21 | node_modules
22 | publish/src
23 | publish/package
24 | demo/report/report.html
25 | demo/report/stats.json
26 | !demo-vue/app/app.js
27 | package-lock.json
28 |
29 | !demo/webpack.config.js
30 |
--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "singleQuote": true,
3 | "semi": true
4 | }
5 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | matrix:
2 | include:
3 | - stage: "Lint"
4 | language: node_js
5 | os: linux
6 | node_js: "8"
7 | script: cd src && npm run ci.tslint && cd ../demo && npm run ci.tslint
8 | - stage: "WebPack, Build and Test"
9 | os: osx
10 | env:
11 | - WebPack="iOS"
12 | osx_image: xcode10.0
13 | language: node_js
14 | node_js: "8"
15 | jdk: oraclejdk8
16 | script: cd demo && npm run build.plugin && npm i && tns build ios --bundle --env.uglify
17 | - language: android
18 | os: linux
19 | env:
20 | - WebPack="Android"
21 | jdk: oraclejdk8
22 | before_install: nvm install 8
23 | script: cd demo && npm run build.plugin && npm i && tns build android --bundle --env.uglify --env.snapshot
24 | - language: android
25 | env:
26 | - BuildAndroid="28"
27 | os: linux
28 | jdk: oraclejdk8
29 | before_install: nvm install stable
30 | script:
31 | - cd src && npm i && npm run tsc && cd ../demo && tns build android
32 | - os: osx
33 | env:
34 | - BuildiOS="12"
35 | - Xcode="10.0"
36 | osx_image: xcode10.0
37 | language: node_js
38 | node_js: "8"
39 | jdk: oraclejdk8
40 | script:
41 | - cd src && npm i && npm run tsc && cd ../demo && tns build ios
42 | - os: linux
43 | language: android
44 | dist: precise
45 | sudo: required
46 | jdk: oraclejdk8
47 | before_script:
48 | - echo no | android create avd --force -n test -t android-21 -b armeabi-v7a
49 | - emulator -avd test -no-audio -no-window &
50 | - android-wait-for-emulator
51 | before_install:
52 | - nvm install 8
53 | script: cd src && npm run test.android
54 | - os: osx
55 | language: node_js
56 | node_js: "8"
57 | jdk: oraclejdk8
58 | osx_image: xcode10.0
59 | script: cd src && npm run test.ios
60 |
61 | android:
62 | components:
63 | - tools
64 | - platform-tools
65 | - build-tools-28.0.3
66 | - android-28
67 | - extra-android-m2repository
68 | - sys-img-armeabi-v7a-android-21
69 |
70 | before_install:
71 | - sudo pip install --upgrade pip
72 | - sudo pip install six
73 |
74 | install:
75 | - echo no | npm install -g nativescript
76 | - tns usage-reporting disable
77 | - tns error-reporting disable
78 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 | ## Run Demo
2 |
3 | ```
4 | git clone https://github.com/NathanWalker/nativescript-loading-indicator.git
5 | cd nativescript-loading-indicator
6 | npm run setup // you will see some TypeScript warnings, this is normal, you can ignore :)
7 |
8 | npm run demo.ios
9 |
10 | // or...
11 |
12 | npm run demo.android
13 | ```
14 |
15 | ## Development Workflow
16 |
17 | - Make changes to plugin
18 | - Make changes in demo to test out those changes
19 | - Run `npm run demo.ios` or `npm run demo.android`
20 |
21 | ## Submitting Pull Requests
22 |
23 | **Please follow these basic steps to simplify pull request reviews - if you don't you'll probably just be asked to anyway.**
24 |
25 | - Please rebase your branch against the current master
26 | - Make reference to possible [issues](https://github.com/NathanWalker/nativescript-loading-indicator/issues) on PR comment
27 |
28 | ## Submitting bug reports
29 |
30 | - Please detail the affected platform and version
31 | - Please be sure to state which version of node, npm, and NativeScript you're using
32 |
--------------------------------------------------------------------------------
/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 (c) 2015-2019 Progress Software Corporation
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.
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ** DEPRECATION NOTICE **
2 |
3 | ## Package has been deprecated as of July 11th, 2019.
4 |
5 | Please use the version published [by nStudio](https://github.com/nstudio/nativescript-loading-indicator).
6 |
7 | ### Installation:
8 |
9 | `tns plugin add @nstudio/nativescript-loading-indicator`
10 |
11 |
14 | NativeScript Loading Indicator
15 |
16 |
17 | NativeScript-Loading-Indicator is a plugin for NativeScript which overlays a loading indicator on the current page. Can be used, for example, to prevent the UI being interacted with while data is being fetched from an API, while informing the user that something is happening.
18 |
19 |
20 | ## Installation
21 |
22 | ```bash
23 | tns plugin add nativescript-loading-indicator
24 | ```
25 |
26 | ## Example
27 |
28 | #### TypeScript
29 |
30 | ```typescript
31 | import {
32 | LoadingIndicator,
33 | Mode,
34 | OptionsCommon
35 | } from 'nativescript-loading-indicator';
36 |
37 | const indicator = new LoadingIndicator();
38 |
39 | const options: OptionsCommon = {
40 | message: 'Loading...',
41 | details: 'Additional detail note!',
42 | progress: 0.65,
43 | margin: 10,
44 | dimBackground: true,
45 | color: '#4B9ED6', // color of indicator and labels
46 | // background box around indicator
47 | // hideBezel will override this if true
48 | backgroundColor: 'yellow',
49 | userInteractionEnabled: false, // default true. Set false so that the touches will fall through it.
50 | hideBezel: true, // default false, can hide the surrounding bezel
51 | mode: Mode.AnnularDeterminate, // see options below
52 | android: {
53 | view: someStackLayout.android, // Target view to show on top of (Defaults to entire window)
54 | cancelable: true,
55 | cancelListener: function(dialog) {
56 | console.log('Loading cancelled');
57 | }
58 | },
59 | ios: {
60 | view: someButton.ios, // Target view to show on top of (Defaults to entire window)
61 | square: false
62 | }
63 | };
64 |
65 | indicator.show(options);
66 |
67 | // after some async event maybe or a timeout hide the indicator
68 | indicator.hide();
69 | ```
70 |
71 | #### javascript
72 |
73 | ```js
74 | const LoadingIndicator = require('nativescript-loading-indicator')
75 | .LoadingIndicator;
76 | const Mode = require('nativescript-loading-indicator').Mode;
77 |
78 | const loader = new LoadingIndicator();
79 |
80 | // optional options
81 | // android and ios have some platform specific options
82 | const options = {
83 | message: 'Loading...',
84 | details: 'Additional detail note!',
85 | progress: 0.65,
86 | margin: 10,
87 | dimBackground: true,
88 | color: '#4B9ED6', // color of indicator and labels
89 | // background box around indicator
90 | // hideBezel will override this if true
91 | backgroundColor: 'yellow',
92 | userInteractionEnabled: false, // default true. Set false so that the touches will fall through it.
93 | hideBezel: true, // default false, can hide the surrounding bezel
94 | mode: Mode.AnnularDeterminate, // see options below
95 | android: {
96 | view: android.view.View, // Target view to show on top of (Defaults to entire window)
97 | cancelable: true,
98 | cancelListener: function(dialog) {
99 | console.log('Loading cancelled');
100 | }
101 | },
102 | ios: {
103 | view: UIView // Target view to show on top of (Defaults to entire window)
104 | }
105 | };
106 |
107 | loader.show(options); // options is optional
108 |
109 | // Do whatever it is you want to do while the loader is showing, then
110 |
111 | loader.hide();
112 | ```
113 |
114 | ### Common Options
115 |
116 | ```typescript
117 | export interface OptionsCommon {
118 | /**
119 | * Message in the loading indicator.
120 | */
121 | message?: string;
122 |
123 | /**
124 | * Details message in the loading indicator.
125 | */
126 | details?: string;
127 |
128 | /**
129 | * Color of the message text.
130 | */
131 | color?: string;
132 |
133 | /**
134 | * Background color of the loading indicator.
135 | */
136 | backgroundColor?: string;
137 |
138 | /**
139 | * Progress of the indicator when not using CustomView or Text Mode.
140 | */
141 | progress?: number;
142 |
143 | /**
144 | * Margin for the message/indicator to the edge of the bezel.
145 | */
146 | margin?: number;
147 |
148 | /**
149 | * Set true to allow user interaction.
150 | */
151 | userInteractionEnabled?: boolean;
152 |
153 | /**
154 | * Dim the background behind the indicator.
155 | */
156 | dimBackground?: boolean;
157 |
158 | /**
159 | * Hide bezel around indicator
160 | */
161 | hideBezel?: boolean;
162 |
163 | /**
164 | * The mode of the loading indicator.
165 | */
166 | mode?: Mode;
167 |
168 | /**
169 | * If `mode` is set to CustomView, then you can pass an image or view to show in the loading indicator.
170 | */
171 | customView?: any;
172 |
173 | /**
174 | * iOS specific configuration options.
175 | */
176 | ios?: OptionsIOS;
177 |
178 | /**
179 | * Android specific configuration options.
180 | */
181 | android?: OptionsAndroid;
182 | }
183 | ```
184 |
185 | #### Android Specific
186 |
187 | ```typescript
188 | export interface OptionsAndroid {
189 | /**
190 | * Native View instance to anchor the loading indicator to.
191 | */
192 | view?: android.view.View;
193 | max?: number;
194 | progressNumberFormat?: string;
195 | progressPercentFormat?: number;
196 | progressStyle?: number;
197 | secondaryProgress?: number;
198 | cancelable?: boolean;
199 | cancelListener?: (dialog: any) => void;
200 | elevation?: number;
201 | }
202 | ```
203 |
204 | #### iOS Specific
205 |
206 | ```typescript
207 | export interface OptionsIOS {
208 | /**
209 | * Native View instance to anchor the loading indicator to.
210 | */
211 | view?: UIView;
212 | square?: boolean;
213 | }
214 | ```
215 |
216 | ### Mode Enum
217 |
218 | ```typescript
219 | export enum Mode {
220 | Indeterminate = 0,
221 | Determinate = 1,
222 | DeterminateHorizontalBar = 2,
223 | AnnularDeterminate = 3,
224 | CustomView = 4,
225 | Text = 5
226 | }
227 | ```
228 |
--------------------------------------------------------------------------------
/demo/.npmrc:
--------------------------------------------------------------------------------
1 | package-lock=false
--------------------------------------------------------------------------------
/demo/app/App_Resources/Android/app.gradle:
--------------------------------------------------------------------------------
1 | // Add your native dependencies here:
2 |
3 | // Uncomment to add recyclerview-v7 dependency
4 | //dependencies {
5 | // compile 'com.android.support:recyclerview-v7:+'
6 | //}
7 |
8 | android {
9 | defaultConfig {
10 | generatedDensities = []
11 | }
12 | aaptOptions {
13 | additionalParameters "--no-version-vectors"
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/demo/app/App_Resources/Android/src/main/AndroidManifest.xml:
--------------------------------------------------------------------------------
1 |
2 |
6 |
7 |
27 |
28 |
33 |
34 |
37 |
40 |
41 |
43 |
44 |
--------------------------------------------------------------------------------
/demo/app/App_Resources/Android/src/main/res/drawable-hdpi/background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/Android/src/main/res/drawable-hdpi/background.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/Android/src/main/res/drawable-hdpi/checkmark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/Android/src/main/res/drawable-hdpi/checkmark.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/Android/src/main/res/drawable-hdpi/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/Android/src/main/res/drawable-hdpi/icon.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/Android/src/main/res/drawable-hdpi/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/Android/src/main/res/drawable-hdpi/logo.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/Android/src/main/res/drawable-hdpi/nstudio.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/Android/src/main/res/drawable-hdpi/nstudio.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/Android/src/main/res/drawable-ldpi/background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/Android/src/main/res/drawable-ldpi/background.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/Android/src/main/res/drawable-ldpi/checkmark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/Android/src/main/res/drawable-ldpi/checkmark.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/Android/src/main/res/drawable-ldpi/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/Android/src/main/res/drawable-ldpi/icon.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/Android/src/main/res/drawable-ldpi/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/Android/src/main/res/drawable-ldpi/logo.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/Android/src/main/res/drawable-mdpi/background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/Android/src/main/res/drawable-mdpi/background.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/Android/src/main/res/drawable-mdpi/checkmark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/Android/src/main/res/drawable-mdpi/checkmark.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/Android/src/main/res/drawable-mdpi/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/Android/src/main/res/drawable-mdpi/icon.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/Android/src/main/res/drawable-mdpi/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/Android/src/main/res/drawable-mdpi/logo.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/Android/src/main/res/drawable-nodpi/splash_screen.xml:
--------------------------------------------------------------------------------
1 |
2 | -
3 |
5 | -
6 |
8 |
--------------------------------------------------------------------------------
/demo/app/App_Resources/Android/src/main/res/drawable-xhdpi/background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/Android/src/main/res/drawable-xhdpi/background.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/Android/src/main/res/drawable-xhdpi/checkmark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/Android/src/main/res/drawable-xhdpi/checkmark.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/Android/src/main/res/drawable-xhdpi/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/Android/src/main/res/drawable-xhdpi/icon.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/Android/src/main/res/drawable-xhdpi/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/Android/src/main/res/drawable-xhdpi/logo.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/Android/src/main/res/drawable-xxhdpi/background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/Android/src/main/res/drawable-xxhdpi/background.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/Android/src/main/res/drawable-xxhdpi/checkmark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/Android/src/main/res/drawable-xxhdpi/checkmark.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/Android/src/main/res/drawable-xxhdpi/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/Android/src/main/res/drawable-xxhdpi/icon.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/Android/src/main/res/drawable-xxhdpi/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/Android/src/main/res/drawable-xxhdpi/logo.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/Android/src/main/res/drawable-xxxhdpi/background.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/Android/src/main/res/drawable-xxxhdpi/background.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/Android/src/main/res/drawable-xxxhdpi/checkmark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/Android/src/main/res/drawable-xxxhdpi/checkmark.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/Android/src/main/res/drawable-xxxhdpi/icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/Android/src/main/res/drawable-xxxhdpi/icon.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/Android/src/main/res/drawable-xxxhdpi/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/Android/src/main/res/drawable-xxxhdpi/logo.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/Android/src/main/res/values-v21/colors.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 | #3d5afe
4 |
--------------------------------------------------------------------------------
/demo/app/App_Resources/Android/src/main/res/values-v21/styles.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
9 |
10 |
11 |
14 |
15 |
16 |
19 |
20 |
23 |
--------------------------------------------------------------------------------
/demo/app/App_Resources/Android/src/main/res/values/colors.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 | #F5F5F5
4 | #757575
5 | #33B5E5
6 | #272734
7 |
--------------------------------------------------------------------------------
/demo/app/App_Resources/Android/src/main/res/values/styles.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
18 |
19 |
21 |
22 |
23 |
31 |
32 |
34 |
35 |
36 |
42 |
43 |
45 |
46 |
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/Contents.json:
--------------------------------------------------------------------------------
1 | {
2 | "images" : [
3 | {
4 | "size" : "29x29",
5 | "idiom" : "iphone",
6 | "filename" : "icon-29.png",
7 | "scale" : "1x"
8 | },
9 | {
10 | "size" : "29x29",
11 | "idiom" : "iphone",
12 | "filename" : "icon-29@2x.png",
13 | "scale" : "2x"
14 | },
15 | {
16 | "size" : "29x29",
17 | "idiom" : "iphone",
18 | "filename" : "icon-29@3x.png",
19 | "scale" : "3x"
20 | },
21 | {
22 | "size" : "40x40",
23 | "idiom" : "iphone",
24 | "filename" : "icon-40@2x.png",
25 | "scale" : "2x"
26 | },
27 | {
28 | "size" : "40x40",
29 | "idiom" : "iphone",
30 | "filename" : "icon-40@3x.png",
31 | "scale" : "3x"
32 | },
33 | {
34 | "size" : "57x57",
35 | "idiom" : "iphone",
36 | "filename" : "icon-57.png",
37 | "scale" : "1x"
38 | },
39 | {
40 | "size" : "57x57",
41 | "idiom" : "iphone",
42 | "filename" : "icon-57@2x.png",
43 | "scale" : "2x"
44 | },
45 | {
46 | "size" : "60x60",
47 | "idiom" : "iphone",
48 | "filename" : "icon-60@2x.png",
49 | "scale" : "2x"
50 | },
51 | {
52 | "size" : "60x60",
53 | "idiom" : "iphone",
54 | "filename" : "icon-60@3x.png",
55 | "scale" : "3x"
56 | },
57 | {
58 | "size" : "29x29",
59 | "idiom" : "ipad",
60 | "filename" : "icon-29.png",
61 | "scale" : "1x"
62 | },
63 | {
64 | "size" : "29x29",
65 | "idiom" : "ipad",
66 | "filename" : "icon-29@2x.png",
67 | "scale" : "2x"
68 | },
69 | {
70 | "size" : "40x40",
71 | "idiom" : "ipad",
72 | "filename" : "icon-40.png",
73 | "scale" : "1x"
74 | },
75 | {
76 | "size" : "40x40",
77 | "idiom" : "ipad",
78 | "filename" : "icon-40@2x.png",
79 | "scale" : "2x"
80 | },
81 | {
82 | "size" : "50x50",
83 | "idiom" : "ipad",
84 | "filename" : "icon-50.png",
85 | "scale" : "1x"
86 | },
87 | {
88 | "size" : "50x50",
89 | "idiom" : "ipad",
90 | "filename" : "icon-50@2x.png",
91 | "scale" : "2x"
92 | },
93 | {
94 | "size" : "72x72",
95 | "idiom" : "ipad",
96 | "filename" : "icon-72.png",
97 | "scale" : "1x"
98 | },
99 | {
100 | "size" : "72x72",
101 | "idiom" : "ipad",
102 | "filename" : "icon-72@2x.png",
103 | "scale" : "2x"
104 | },
105 | {
106 | "size" : "76x76",
107 | "idiom" : "ipad",
108 | "filename" : "icon-76.png",
109 | "scale" : "1x"
110 | },
111 | {
112 | "size" : "76x76",
113 | "idiom" : "ipad",
114 | "filename" : "icon-76@2x.png",
115 | "scale" : "2x"
116 | },
117 | {
118 | "size" : "83.5x83.5",
119 | "idiom" : "ipad",
120 | "filename" : "icon-83.5@2x.png",
121 | "scale" : "2x"
122 | }
123 | ],
124 | "info" : {
125 | "version" : 1,
126 | "author" : "xcode"
127 | }
128 | }
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-29.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-29.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-29@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-29@2x.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-29@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-29@3x.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-40.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-40.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-40@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-40@2x.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-40@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-40@3x.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-50.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-50.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-50@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-50@2x.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-57.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-57.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-57@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-57@2x.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-60@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-60@2x.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-60@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-60@3x.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-72.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-72.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-72@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-72@2x.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-76.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-76.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-76@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-76@2x.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-83.5@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/iOS/Assets.xcassets/AppIcon.appiconset/icon-83.5@2x.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/Checkmark.imageset/Checkmark.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/iOS/Assets.xcassets/Checkmark.imageset/Checkmark.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/Checkmark.imageset/Checkmark@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/iOS/Assets.xcassets/Checkmark.imageset/Checkmark@2x.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/Checkmark.imageset/Checkmark@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/iOS/Assets.xcassets/Checkmark.imageset/Checkmark@3x.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/Checkmark.imageset/Contents.json:
--------------------------------------------------------------------------------
1 | {
2 | "images": [
3 | {
4 | "idiom": "universal",
5 | "filename": "checkmark.png",
6 | "scale": "1x"
7 | },
8 | {
9 | "idiom": "universal",
10 | "filename": "checkmark@2x.png",
11 | "scale": "2x"
12 | },
13 | {
14 | "idiom": "universal",
15 | "filename": "checkmark@3x.png",
16 | "scale": "3x"
17 | }
18 | ],
19 | "info": {
20 | "version": 1,
21 | "author": "xcode"
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/Contents.json:
--------------------------------------------------------------------------------
1 | {
2 | "info" : {
3 | "version" : 1,
4 | "author" : "xcode"
5 | }
6 | }
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Contents.json:
--------------------------------------------------------------------------------
1 | {
2 | "images" : [
3 | {
4 | "extent" : "full-screen",
5 | "idiom" : "iphone",
6 | "subtype" : "736h",
7 | "filename" : "Default-736h@3x.png",
8 | "minimum-system-version" : "8.0",
9 | "orientation" : "portrait",
10 | "scale" : "3x"
11 | },
12 | {
13 | "extent" : "full-screen",
14 | "idiom" : "iphone",
15 | "subtype" : "736h",
16 | "filename" : "Default-Landscape@3x.png",
17 | "minimum-system-version" : "8.0",
18 | "orientation" : "landscape",
19 | "scale" : "3x"
20 | },
21 | {
22 | "extent" : "full-screen",
23 | "idiom" : "iphone",
24 | "subtype" : "667h",
25 | "filename" : "Default-667h@2x.png",
26 | "minimum-system-version" : "8.0",
27 | "orientation" : "portrait",
28 | "scale" : "2x"
29 | },
30 | {
31 | "orientation" : "portrait",
32 | "idiom" : "iphone",
33 | "filename" : "Default@2x.png",
34 | "extent" : "full-screen",
35 | "minimum-system-version" : "7.0",
36 | "scale" : "2x"
37 | },
38 | {
39 | "extent" : "full-screen",
40 | "idiom" : "iphone",
41 | "subtype" : "retina4",
42 | "filename" : "Default-568h@2x.png",
43 | "minimum-system-version" : "7.0",
44 | "orientation" : "portrait",
45 | "scale" : "2x"
46 | },
47 | {
48 | "orientation" : "portrait",
49 | "idiom" : "ipad",
50 | "filename" : "Default-Portrait.png",
51 | "extent" : "full-screen",
52 | "minimum-system-version" : "7.0",
53 | "scale" : "1x"
54 | },
55 | {
56 | "orientation" : "landscape",
57 | "idiom" : "ipad",
58 | "filename" : "Default-Landscape.png",
59 | "extent" : "full-screen",
60 | "minimum-system-version" : "7.0",
61 | "scale" : "1x"
62 | },
63 | {
64 | "orientation" : "portrait",
65 | "idiom" : "ipad",
66 | "filename" : "Default-Portrait@2x.png",
67 | "extent" : "full-screen",
68 | "minimum-system-version" : "7.0",
69 | "scale" : "2x"
70 | },
71 | {
72 | "orientation" : "landscape",
73 | "idiom" : "ipad",
74 | "filename" : "Default-Landscape@2x.png",
75 | "extent" : "full-screen",
76 | "minimum-system-version" : "7.0",
77 | "scale" : "2x"
78 | },
79 | {
80 | "orientation" : "portrait",
81 | "idiom" : "iphone",
82 | "filename" : "Default.png",
83 | "extent" : "full-screen",
84 | "scale" : "1x"
85 | },
86 | {
87 | "orientation" : "portrait",
88 | "idiom" : "iphone",
89 | "filename" : "Default@2x.png",
90 | "extent" : "full-screen",
91 | "scale" : "2x"
92 | },
93 | {
94 | "orientation" : "portrait",
95 | "idiom" : "iphone",
96 | "filename" : "Default-568h@2x.png",
97 | "extent" : "full-screen",
98 | "subtype" : "retina4",
99 | "scale" : "2x"
100 | },
101 | {
102 | "orientation" : "portrait",
103 | "idiom" : "ipad",
104 | "extent" : "to-status-bar",
105 | "scale" : "1x"
106 | },
107 | {
108 | "orientation" : "portrait",
109 | "idiom" : "ipad",
110 | "filename" : "Default-Portrait.png",
111 | "extent" : "full-screen",
112 | "scale" : "1x"
113 | },
114 | {
115 | "orientation" : "landscape",
116 | "idiom" : "ipad",
117 | "extent" : "to-status-bar",
118 | "scale" : "1x"
119 | },
120 | {
121 | "orientation" : "landscape",
122 | "idiom" : "ipad",
123 | "filename" : "Default-Landscape.png",
124 | "extent" : "full-screen",
125 | "scale" : "1x"
126 | },
127 | {
128 | "orientation" : "portrait",
129 | "idiom" : "ipad",
130 | "extent" : "to-status-bar",
131 | "scale" : "2x"
132 | },
133 | {
134 | "orientation" : "portrait",
135 | "idiom" : "ipad",
136 | "filename" : "Default-Portrait@2x.png",
137 | "extent" : "full-screen",
138 | "scale" : "2x"
139 | },
140 | {
141 | "orientation" : "landscape",
142 | "idiom" : "ipad",
143 | "extent" : "to-status-bar",
144 | "scale" : "2x"
145 | },
146 | {
147 | "orientation" : "landscape",
148 | "idiom" : "ipad",
149 | "filename" : "Default-Landscape@2x.png",
150 | "extent" : "full-screen",
151 | "scale" : "2x"
152 | }
153 | ],
154 | "info" : {
155 | "version" : 1,
156 | "author" : "xcode"
157 | }
158 | }
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-568h@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-568h@2x.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-667h@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-667h@2x.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-736h@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-736h@3x.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-Landscape.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-Landscape.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-Landscape@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-Landscape@2x.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-Landscape@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-Landscape@3x.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-Portrait.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-Portrait.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-Portrait@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default-Portrait@2x.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/iOS/Assets.xcassets/LaunchImage.launchimage/Default@2x.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/Contents.json:
--------------------------------------------------------------------------------
1 | {
2 | "images" : [
3 | {
4 | "idiom" : "universal",
5 | "filename" : "LaunchScreen-AspectFill.png",
6 | "scale" : "1x"
7 | },
8 | {
9 | "idiom" : "universal",
10 | "filename" : "LaunchScreen-AspectFill@2x.png",
11 | "scale" : "2x"
12 | },
13 | {
14 | "idiom" : "universal",
15 | "scale" : "3x"
16 | }
17 | ],
18 | "info" : {
19 | "version" : 1,
20 | "author" : "xcode"
21 | }
22 | }
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/LaunchScreen-AspectFill.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/LaunchScreen-AspectFill.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/LaunchScreen-AspectFill@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/iOS/Assets.xcassets/LaunchScreen.AspectFill.imageset/LaunchScreen-AspectFill@2x.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/Contents.json:
--------------------------------------------------------------------------------
1 | {
2 | "images" : [
3 | {
4 | "idiom" : "universal",
5 | "filename" : "LaunchScreen-Center.png",
6 | "scale" : "1x"
7 | },
8 | {
9 | "idiom" : "universal",
10 | "filename" : "LaunchScreen-Center@2x.png",
11 | "scale" : "2x"
12 | },
13 | {
14 | "idiom" : "universal",
15 | "scale" : "3x"
16 | }
17 | ],
18 | "info" : {
19 | "version" : 1,
20 | "author" : "xcode"
21 | }
22 | }
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/LaunchScreen-Center.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/LaunchScreen-Center.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/LaunchScreen-Center@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/iOS/Assets.xcassets/LaunchScreen.Center.imageset/LaunchScreen-Center@2x.png
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/Info.plist:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | CFBundleDevelopmentRegion
6 | en
7 | CFBundleDisplayName
8 | ${PRODUCT_NAME}
9 | CFBundleExecutable
10 | ${EXECUTABLE_NAME}
11 | CFBundleInfoDictionaryVersion
12 | 6.0
13 | CFBundleName
14 | ${PRODUCT_NAME}
15 | CFBundlePackageType
16 | APPL
17 | CFBundleShortVersionString
18 | 1.0
19 | CFBundleSignature
20 | ????
21 | CFBundleVersion
22 | 1.0
23 | LSRequiresIPhoneOS
24 | UILaunchStoryboardName
26 | LaunchScreen
27 | UIRequiresFullScreen
28 | UIRequiredDeviceCapabilities
30 |
31 | armv7
32 |
33 | UISupportedInterfaceOrientations
34 |
35 | UIInterfaceOrientationPortrait
36 | UIInterfaceOrientationLandscapeLeft
37 | UIInterfaceOrientationLandscapeRight
38 |
39 | UISupportedInterfaceOrientations~ipad
40 |
41 | UIInterfaceOrientationPortrait
42 | UIInterfaceOrientationPortraitUpsideDown
43 | UIInterfaceOrientationLandscapeLeft
44 | UIInterfaceOrientationLandscapeRight
45 |
46 |
47 |
48 |
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/LaunchScreen.storyboard:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
16 |
17 |
20 |
21 |
23 |
24 |
26 |
27 |
29 |
38 |
39 |
40 |
42 |
44 |
45 |
46 |
49 |
50 |
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/build.xcconfig:
--------------------------------------------------------------------------------
1 | // You can add custom settings here
2 | // for example you can uncomment the following line to force distribution code signing
3 | // CODE_SIGN_IDENTITY = iPhone Distribution
4 | ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
5 | ASSETCATALOG_COMPILER_LAUNCHIMAGE_NAME = LaunchImage;
6 |
--------------------------------------------------------------------------------
/demo/app/App_Resources/iOS/nstudio.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/demo/app/App_Resources/iOS/nstudio.png
--------------------------------------------------------------------------------
/demo/app/app-root.xml:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
6 |
8 |
9 |
10 |
11 |
12 |
13 |
24 |
26 |
30 |
32 |
39 |
40 |
41 |
42 |
--------------------------------------------------------------------------------
/demo/app/main-view-model.ts:
--------------------------------------------------------------------------------
1 | import { LoadingIndicator, Mode } from 'nativescript-loading-indicator';
2 | import { Observable } from 'tns-core-modules/data/observable';
3 | import { confirm } from 'tns-core-modules/ui/dialogs';
4 | import { Page } from 'tns-core-modules/ui/page';
5 | import { openUrl } from 'tns-core-modules/utils/utils';
6 |
7 | export class LoadingTest extends Observable {
8 | private indicator: LoadingIndicator;
9 | private stackView: any;
10 | private _testTarget: boolean;
11 |
12 | constructor(page: Page) {
13 | super();
14 | // uncomment - test target view
15 | // this.stackView = page.getViewById('stackView');
16 | this.indicator = new LoadingIndicator();
17 | }
18 |
19 | nStudioIconTap() {
20 | confirm({
21 | message:
22 | 'nStudio, LLC. specializes in custom software applications ranging from mobile, web, desktop, server and more. Would you like to visit nstudio.io?',
23 | okButtonText: 'Yes',
24 | cancelButtonText: 'Close'
25 | }).then(result => {
26 | if (result) {
27 | openUrl('https://nstudio.io');
28 | }
29 | });
30 | }
31 |
32 | public showLoader() {
33 | this.indicator.show({
34 | message: 'Loading test...'
35 | });
36 |
37 | setTimeout(() => {
38 | this.indicator.show({
39 | message: 'TextMode',
40 | mode: Mode.Text
41 | });
42 | }, 2000);
43 |
44 | setTimeout(() => {
45 | this.indicator.show({
46 | message: 'Updating',
47 | mode: Mode.Indeterminate
48 | });
49 | this.demoProgress('red');
50 | }, 3000);
51 |
52 | // to test target view
53 | // uncomment - then can toggle this method to show/hide in target
54 | // if (!this._testTarget) {
55 | // this._testTarget = true;
56 | // this.indicator.show({
57 | // message: 'Loading test...',
58 | // ios: {
59 | // view: this.stackView.ios
60 | // }
61 | // });
62 | // } else {
63 | // this._testTarget = false;
64 | // this.indicator.hide();
65 | // }
66 | }
67 |
68 | public showLoaderNoBezel() {
69 | this.indicator.show({
70 | message: 'Loading, no bezel!',
71 | color: '#38ef7d',
72 | hideBezel: true
73 | });
74 | this.demoLoader();
75 | }
76 |
77 | public showLoaderMsgAndDetails() {
78 | this.indicator.show({
79 | message: 'One moment',
80 | details: 'Updating data...'
81 | });
82 | setTimeout(() => {
83 | this.indicator.show({
84 | details: 'Transferring secret codes...'
85 | });
86 | this.demoLoader();
87 | }, 1000);
88 | }
89 |
90 | public showLoaderSquare() {
91 | this.indicator.show({ ios: { square: true } });
92 | this.demoLoader();
93 | }
94 |
95 | public showLoaderMargin() {
96 | this.indicator.show({
97 | message: 'Message offset margin...',
98 | margin: 30
99 | });
100 | this.demoLoader();
101 | }
102 |
103 | public showLoaderDimBg() {
104 | this.indicator.show({
105 | dimBackground: true,
106 | message: 'Dimmed the background.',
107 | color: '#3F5EFB'
108 | });
109 | this.demoLoader();
110 | }
111 |
112 | public showLoaderColor() {
113 | this.indicator.show({
114 | color: '#8A2BE2',
115 | backgroundColor: '#4B9ED6'
116 | });
117 | this.demoLoader();
118 | }
119 |
120 | public showLoaderIndeterminate() {
121 | this.indicator.show({
122 | message: 'Indeterminate Mode',
123 | backgroundColor: '#3F5EFB',
124 | color: '#fff000',
125 | mode: Mode.Indeterminate
126 | });
127 |
128 | setTimeout(() => {
129 | this.indicator.hide();
130 | }, 3500);
131 | }
132 |
133 | public showLoaderDeterminate() {
134 | this.indicator.show({
135 | message: 'Determinate Mode',
136 | backgroundColor: '#3F5EFB',
137 | color: '#fff000',
138 | mode: Mode.Determinate
139 | });
140 | this.demoProgress('#fff000');
141 | }
142 |
143 | public showLoaderAnnularDeterminate() {
144 | this.indicator.show({
145 | message: 'Annular Determinate Mode',
146 | color: '#38ef7d',
147 | backgroundColor: '#000',
148 | mode: Mode.AnnularDeterminate
149 | });
150 | this.demoProgress('#38ef7d');
151 | }
152 |
153 | public showLoaderDeterminateHorizontalBar() {
154 | this.indicator.show({
155 | message: 'Determinate Horizontal Bar Mode',
156 | color: '#FF0099',
157 | backgroundColor: '#240b36',
158 | mode: Mode.DeterminateHorizontalBar
159 | });
160 | this.demoProgress('#FF0099');
161 | }
162 |
163 | public showLoaderModeText() {
164 | this.indicator.show({
165 | message: 'Text only',
166 | mode: Mode.Text
167 | });
168 | this.demoLoader();
169 | }
170 |
171 | public showLoaderModeCustom() {
172 | this.indicator.show({
173 | message: 'Completed',
174 | details: 'Go wild!',
175 | customView: 'checkmark.png',
176 | mode: Mode.CustomView
177 | });
178 | this.demoLoader();
179 | }
180 |
181 | public showLoaderCancel() {
182 | let interval;
183 | this.indicator.show({
184 | mode: Mode.Determinate,
185 | android: {
186 | cancelable: true,
187 | cancelListener: dialog => {
188 | console.log('cancelled');
189 | clearInterval(interval);
190 | }
191 | }
192 | });
193 |
194 | let count = 0;
195 |
196 | interval = setInterval(() => {
197 | count += 1;
198 | this.indicator.show({ progress: count / 100 });
199 | if (count === 100) {
200 | clearInterval(interval);
201 | this.indicator.hide();
202 | }
203 | }, 500);
204 | }
205 |
206 | private demoLoader() {
207 | setTimeout(() => {
208 | this.indicator.hide();
209 | }, 3000);
210 | }
211 |
212 | private demoProgress(color = '#333') {
213 | setTimeout(() => {
214 | this.indicator.show({ progress: 0.15, color });
215 | }, 500);
216 | setTimeout(() => {
217 | this.indicator.show({ progress: 0.35, color });
218 | }, 1500);
219 | setTimeout(() => {
220 | this.indicator.show({ progress: 0.65, color });
221 | }, 2500);
222 | setTimeout(() => {
223 | this.indicator.show({ progress: 0.85, color });
224 | }, 4000);
225 | setTimeout(() => {
226 | this.indicator.show({ progress: 0.99, color });
227 | }, 4500);
228 | setTimeout(() => {
229 | this.indicator.show({ progress: 1, color });
230 | this.indicator.hide();
231 | }, 5000);
232 | }
233 | }
234 |
--------------------------------------------------------------------------------
/demo/app/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "tns-template-hello-world-ts",
3 | "main": "app.js",
4 | "version": "1.6.0"
5 | }
6 |
--------------------------------------------------------------------------------
/demo/app/tests/tests.js:
--------------------------------------------------------------------------------
1 | var LoadingIndicator = require("nativescript-loading-indicator").LoadingIndicator;
2 | var loadingIndicator = new LoadingIndicator();
3 |
4 | describe("greet function", function() {
5 | it("exists", function() {
6 | expect(loadingIndicator.greet).toBeDefined();
7 | });
8 |
9 | it("returns a string", function() {
10 | expect(loadingIndicator.greet()).toEqual("Hello, NS");
11 | });
12 | });
--------------------------------------------------------------------------------
/demo/karma.conf.js:
--------------------------------------------------------------------------------
1 | module.exports = function(config) {
2 | const options = {
3 | // base path that will be used to resolve all patterns (eg. files, exclude)
4 | basePath: "",
5 |
6 | // frameworks to use
7 | // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
8 | frameworks: ["jasmine"],
9 |
10 | // list of files / patterns to load in the browser
11 | files: ["app/tests/**/*.*"],
12 |
13 | // list of files to exclude
14 | exclude: [],
15 |
16 | // preprocess matching files before serving them to the browser
17 | // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
18 | preprocessors: {},
19 |
20 | // test results reporter to use
21 | // possible values: 'dots', 'progress'
22 | // available reporters: https://npmjs.org/browse/keyword/karma-reporter
23 | reporters: ["progress"],
24 |
25 | // web server port
26 | port: 9876,
27 |
28 | // enable / disable colors in the output (reporters and logs)
29 | colors: true,
30 |
31 | // level of logging
32 | // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
33 | logLevel: config.LOG_INFO,
34 |
35 | // enable / disable watching file and executing tests whenever any file changes
36 | autoWatch: true,
37 |
38 | // start these browsers
39 | // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
40 | browsers: [],
41 |
42 | customLaunchers: {
43 | android: {
44 | base: "NS",
45 | platform: "android"
46 | },
47 | ios: {
48 | base: "NS",
49 | platform: "ios"
50 | },
51 | ios_simulator: {
52 | base: "NS",
53 | platform: "ios",
54 | arguments: ["--emulator"]
55 | }
56 | },
57 |
58 | // Continuous Integration mode
59 | // if true, Karma captures browsers, runs the tests and exits
60 | singleRun: false
61 | };
62 |
63 | setWebpackPreprocessor(config, options);
64 | setWebpack(config, options);
65 |
66 | config.set(options);
67 | };
68 |
69 | function setWebpackPreprocessor(config, options) {
70 | if (config && config.bundle) {
71 | if (!options.preprocessors) {
72 | options.preprocessors = {};
73 | }
74 |
75 | options.files.forEach(file => {
76 | if (!options.preprocessors[file]) {
77 | options.preprocessors[file] = [];
78 | }
79 | options.preprocessors[file].push("webpack");
80 | });
81 | }
82 | }
83 |
84 | function setWebpack(config, options) {
85 | if (config && config.bundle) {
86 | const env = {};
87 | env[config.platform] = true;
88 | env.sourceMap = config.debugBrk;
89 | options.webpack = require("./webpack.config")(env);
90 | delete options.webpack.entry;
91 | delete options.webpack.output.libraryTarget;
92 | const invalidPluginsForUnitTesting = [
93 | "GenerateBundleStarterPlugin",
94 | "GenerateNativeScriptEntryPointsPlugin"
95 | ];
96 | options.webpack.plugins = options.webpack.plugins.filter(
97 | p => !invalidPluginsForUnitTesting.includes(p.constructor.name)
98 | );
99 | }
100 | }
101 |
--------------------------------------------------------------------------------
/demo/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "nativescript": {
3 | "id": "org.nativescript.demo",
4 | "tns-ios": {
5 | "version": "6.0.0-rc-2019-06-28-105002-01"
6 | },
7 | "tns-android": {
8 | "version": "6.0.0-rc-2019-06-27-172817-03"
9 | }
10 | },
11 | "dependencies": {
12 | "nativescript-theme-core": "^1.0.4",
13 | "nativescript-unit-test-runner": "0.6.4",
14 | "nativescript-loading-indicator": "file:../src",
15 | "tns-core-modules": "6.0.0-rc-2019-07-08-111131-01"
16 | },
17 | "devDependencies": {
18 | "jasmine-core": "^2.5.2",
19 | "karma": "4.1.0",
20 | "karma-jasmine": "2.0.1",
21 | "karma-nativescript-launcher": "^0.4.0",
22 | "nativescript-css-loader": "~0.26.1",
23 | "nativescript-dev-webpack": "1.0.0-rc-2019-07-08-135456-03",
24 | "tns-platform-declarations": "6.0.0-rc-2019-06-28-175837-02",
25 | "tslint": "~5.12.1",
26 | "typescript": "3.4.1",
27 | "karma-webpack": "3.0.5"
28 | },
29 | "scripts": {
30 | "build.plugin": "cd ../src && npm run build",
31 | "ci.tslint": "npm i && tslint --config '../tslint.json' 'app/**/*.ts' --exclude '**/node_modules/**' --exclude '**/platforms/**'"
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/demo/references.d.ts:
--------------------------------------------------------------------------------
1 | /// /...
32 | const dist = resolve(
33 | projectRoot,
34 | nsWebpack.getAppPath(platform, projectRoot)
35 | );
36 |
37 | const {
38 | // The 'appPath' and 'appResourcesPath' values are fetched from
39 | // the nsconfig.json configuration file
40 | // when bundling with `tns run android|ios --bundle`.
41 | appPath = 'app',
42 | appResourcesPath = 'app/App_Resources',
43 |
44 | // You can provide the following flags when running 'tns run android|ios'
45 | snapshot, // --env.snapshot
46 | production, // --env.production
47 | uglify, // --env.uglify
48 | report, // --env.report
49 | sourceMap, // --env.sourceMap
50 | hiddenSourceMap, // --env.hiddenSourceMap
51 | hmr, // --env.hmr,
52 | unitTesting, // --env.unitTesting,
53 | verbose // --env.verbose
54 | } = env;
55 | const isAnySourceMapEnabled = !!sourceMap || !!hiddenSourceMap;
56 | const externals = nsWebpack.getConvertedExternals(env.externals);
57 |
58 | const appFullPath = resolve(projectRoot, appPath);
59 | const appResourcesFullPath = resolve(projectRoot, appResourcesPath);
60 |
61 | const entryModule = nsWebpack.getEntryModule(appFullPath, platform);
62 | const entryPath = `.${sep}${entryModule}.ts`;
63 | const entries = { bundle: entryPath };
64 |
65 | const tsConfigPath = resolve(projectRoot, 'tsconfig.tns.json');
66 |
67 | const areCoreModulesExternal =
68 | Array.isArray(env.externals) &&
69 | env.externals.some(e => e.indexOf('tns-core-modules') > -1);
70 | if (platform === 'ios' && !areCoreModulesExternal) {
71 | entries['tns_modules/tns-core-modules/inspector_modules'] =
72 | 'inspector_modules';
73 | }
74 |
75 | let sourceMapFilename = nsWebpack.getSourceMapFilename(
76 | hiddenSourceMap,
77 | __dirname,
78 | dist
79 | );
80 |
81 | const itemsToClean = [`${dist}/**/*`];
82 | if (platform === 'android') {
83 | itemsToClean.push(
84 | `${join(
85 | projectRoot,
86 | 'platforms',
87 | 'android',
88 | 'app',
89 | 'src',
90 | 'main',
91 | 'assets',
92 | 'snapshots'
93 | )}`
94 | );
95 | itemsToClean.push(
96 | `${join(
97 | projectRoot,
98 | 'platforms',
99 | 'android',
100 | 'app',
101 | 'build',
102 | 'configurations',
103 | 'nativescript-android-snapshot'
104 | )}`
105 | );
106 | }
107 |
108 | const config = {
109 | mode: production ? 'production' : 'development',
110 | context: appFullPath,
111 | externals,
112 | watchOptions: {
113 | ignored: [
114 | appResourcesFullPath,
115 | // Don't watch hidden files
116 | '**/.*'
117 | ]
118 | },
119 | target: nativescriptTarget,
120 | entry: entries,
121 | output: {
122 | pathinfo: false,
123 | path: dist,
124 | sourceMapFilename,
125 | libraryTarget: 'commonjs2',
126 | filename: '[name].js',
127 | globalObject: 'global',
128 | hashSalt
129 | },
130 | resolve: {
131 | extensions: ['.ts', '.js', '.scss', '.css'],
132 | // Resolve {N} system modules from tns-core-modules
133 | modules: [
134 | resolve(__dirname, 'node_modules/tns-core-modules'),
135 | resolve(__dirname, 'node_modules'),
136 | 'node_modules/tns-core-modules',
137 | 'node_modules'
138 | ],
139 | alias: {
140 | '~': appFullPath
141 | },
142 | // resolve symlinks to symlinked modules
143 | symlinks: true
144 | },
145 | resolveLoader: {
146 | // don't resolve symlinks to symlinked loaders
147 | symlinks: false
148 | },
149 | node: {
150 | // Disable node shims that conflict with NativeScript
151 | http: false,
152 | timers: false,
153 | setImmediate: false,
154 | fs: 'empty',
155 | __dirname: false
156 | },
157 | devtool: hiddenSourceMap
158 | ? 'hidden-source-map'
159 | : sourceMap
160 | ? 'inline-source-map'
161 | : 'none',
162 | optimization: {
163 | runtimeChunk: 'single',
164 | splitChunks: {
165 | cacheGroups: {
166 | vendor: {
167 | name: 'vendor',
168 | chunks: 'all',
169 | test: (module, chunks) => {
170 | const moduleName = module.nameForCondition
171 | ? module.nameForCondition()
172 | : '';
173 | return (
174 | /[\\/]node_modules[\\/]/.test(moduleName) ||
175 | appComponents.some(comp => comp === moduleName)
176 | );
177 | },
178 | enforce: true
179 | }
180 | }
181 | },
182 | minimize: !!uglify,
183 | minimizer: [
184 | new TerserPlugin({
185 | parallel: true,
186 | cache: true,
187 | sourceMap: isAnySourceMapEnabled,
188 | terserOptions: {
189 | output: {
190 | comments: false,
191 | semicolons: !isAnySourceMapEnabled
192 | },
193 | compress: {
194 | // The Android SBG has problems parsing the output
195 | // when these options are enabled
196 | collapse_vars: platform !== 'android',
197 | sequences: platform !== 'android'
198 | }
199 | }
200 | })
201 | ]
202 | },
203 | module: {
204 | rules: [
205 | {
206 | test: nsWebpack.getEntryPathRegExp(appFullPath, entryPath),
207 | use: [
208 | // Require all Android app components
209 | platform === 'android' && {
210 | loader: 'nativescript-dev-webpack/android-app-components-loader',
211 | options: { modules: appComponents }
212 | },
213 |
214 | {
215 | loader: 'nativescript-dev-webpack/bundle-config-loader',
216 | options: {
217 | loadCss: !snapshot, // load the application css if in debug mode
218 | unitTesting,
219 | appFullPath,
220 | projectRoot
221 | }
222 | }
223 | ].filter(loader => !!loader)
224 | },
225 |
226 | {
227 | test: /\.(ts|css|scss|html|xml)$/,
228 | use: 'nativescript-dev-webpack/hmr/hot-loader'
229 | },
230 |
231 | {
232 | test: /\.(html|xml)$/,
233 | use: 'nativescript-dev-webpack/xml-namespace-loader'
234 | },
235 |
236 | {
237 | test: /\.css$/,
238 | use: { loader: 'css-loader', options: { url: false } }
239 | },
240 |
241 | {
242 | test: /\.scss$/,
243 | use: [
244 | { loader: 'css-loader', options: { url: false } },
245 | 'sass-loader'
246 | ]
247 | },
248 |
249 | {
250 | test: /\.ts$/,
251 | use: {
252 | loader: 'ts-loader',
253 | options: {
254 | configFile: tsConfigPath,
255 | // https://github.com/TypeStrong/ts-loader/blob/ea2fcf925ec158d0a536d1e766adfec6567f5fb4/README.md#faster-builds
256 | // https://github.com/TypeStrong/ts-loader/blob/ea2fcf925ec158d0a536d1e766adfec6567f5fb4/README.md#hot-module-replacement
257 | transpileOnly: true,
258 | allowTsInNodeModules: true,
259 | compilerOptions: {
260 | sourceMap: isAnySourceMapEnabled,
261 | declaration: false
262 | }
263 | }
264 | }
265 | }
266 | ]
267 | },
268 | plugins: [
269 | // Define useful constants like TNS_WEBPACK
270 | new webpack.DefinePlugin({
271 | 'global.TNS_WEBPACK': 'true',
272 | process: 'global.process'
273 | }),
274 | // Remove all files from the out dir.
275 | new CleanWebpackPlugin(itemsToClean, { verbose: !!verbose }),
276 | // Copy assets to out dir. Add your own globs as needed.
277 | new CopyWebpackPlugin(
278 | [
279 | { from: { glob: 'fonts/**' } },
280 | { from: { glob: '**/*.jpg' } },
281 | { from: { glob: '**/*.png' } }
282 | ],
283 | { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }
284 | ),
285 | new nsWebpack.GenerateNativeScriptEntryPointsPlugin('bundle'),
286 | // For instructions on how to set up workers with webpack
287 | // check out https://github.com/nativescript/worker-loader
288 | new NativeScriptWorkerPlugin(),
289 | new nsWebpack.PlatformFSPlugin({
290 | platform,
291 | platforms
292 | }),
293 | // Does IPC communication with the {N} CLI to notify events when running in watch mode.
294 | new nsWebpack.WatchStateLoggerPlugin(),
295 | // https://github.com/TypeStrong/ts-loader/blob/ea2fcf925ec158d0a536d1e766adfec6567f5fb4/README.md#faster-builds
296 | // https://github.com/TypeStrong/ts-loader/blob/ea2fcf925ec158d0a536d1e766adfec6567f5fb4/README.md#hot-module-replacement
297 | new ForkTsCheckerWebpackPlugin({
298 | tsconfig: tsConfigPath,
299 | async: false,
300 | useTypescriptIncrementalApi: true,
301 | memoryLimit: 4096
302 | })
303 | ]
304 | };
305 |
306 | if (report) {
307 | // Generate report files for bundles content
308 | config.plugins.push(
309 | new BundleAnalyzerPlugin({
310 | analyzerMode: 'static',
311 | openAnalyzer: false,
312 | generateStatsFile: true,
313 | reportFilename: resolve(projectRoot, 'report', `report.html`),
314 | statsFilename: resolve(projectRoot, 'report', `stats.json`)
315 | })
316 | );
317 | }
318 |
319 | if (snapshot) {
320 | config.plugins.push(
321 | new nsWebpack.NativeScriptSnapshotPlugin({
322 | chunk: 'vendor',
323 | requireModules: ['tns-core-modules/bundle-entry-points'],
324 | projectRoot,
325 | webpackConfig: config
326 | })
327 | );
328 | }
329 |
330 | if (hmr) {
331 | config.plugins.push(new webpack.HotModuleReplacementPlugin());
332 | }
333 |
334 | return config;
335 | };
336 |
--------------------------------------------------------------------------------
/publish/pack.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 |
3 | SOURCE_DIR=../src;
4 | TO_SOURCE_DIR=src;
5 | PACK_DIR=package;
6 | ROOT_DIR=..;
7 | PUBLISH=--publish
8 |
9 | install(){
10 | npm i
11 | }
12 |
13 | pack() {
14 |
15 | echo 'Clearing /src and /package...'
16 | node_modules/.bin/rimraf "$TO_SOURCE_DIR"
17 | node_modules/.bin/rimraf "$PACK_DIR"
18 |
19 | # copy src
20 | echo 'Copying src...'
21 | node_modules/.bin/ncp "$SOURCE_DIR" "$TO_SOURCE_DIR"
22 |
23 | # copy README & LICENSE to src
24 | echo 'Copying README and LICENSE to /src...'
25 | node_modules/.bin/ncp "$ROOT_DIR"/LICENSE "$TO_SOURCE_DIR"/LICENSE
26 | node_modules/.bin/ncp "$ROOT_DIR"/README.md "$TO_SOURCE_DIR"/README.md
27 |
28 | # compile package and copy files required by npm
29 | echo 'Building /src...'
30 | cd "$TO_SOURCE_DIR"
31 | node_modules/.bin/tsc
32 | cd ..
33 |
34 | echo 'Creating package...'
35 | # create package dir
36 | mkdir "$PACK_DIR"
37 |
38 | # create the package
39 | cd "$PACK_DIR"
40 | npm pack ../"$TO_SOURCE_DIR"
41 |
42 | # delete source directory used to create the package
43 | cd ..
44 | node_modules/.bin/rimraf "$TO_SOURCE_DIR"
45 | }
46 |
47 | install && pack
--------------------------------------------------------------------------------
/publish/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "nativescript-publish",
3 | "version": "1.0.0",
4 | "description": "Publish helper",
5 | "devDependencies": {
6 | "ncp": "^2.0.0",
7 | "rimraf": "^2.5.0"
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/publish/publish.sh:
--------------------------------------------------------------------------------
1 | #!/bin/bash
2 |
3 | PACK_DIR=package;
4 |
5 | publish() {
6 | cd $PACK_DIR
7 | echo 'Publishing to npm...'
8 | npm publish *.tgz
9 | }
10 |
11 | pack.sh && publish
12 |
--------------------------------------------------------------------------------
/screenshots/android/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/screenshots/android/1.png
--------------------------------------------------------------------------------
/screenshots/android/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/screenshots/android/2.png
--------------------------------------------------------------------------------
/screenshots/android/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/screenshots/android/3.png
--------------------------------------------------------------------------------
/screenshots/android/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/screenshots/android/4.png
--------------------------------------------------------------------------------
/screenshots/ios/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/screenshots/ios/1.png
--------------------------------------------------------------------------------
/screenshots/ios/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/screenshots/ios/2.png
--------------------------------------------------------------------------------
/screenshots/ios/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/screenshots/ios/3.png
--------------------------------------------------------------------------------
/screenshots/ios/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/NathanWalker/nativescript-loading-indicator/7846641ec3f8fca94c0914281d9fe368ae71674f/screenshots/ios/4.png
--------------------------------------------------------------------------------
/src/.npmignore:
--------------------------------------------------------------------------------
1 | *.map
2 | *.ts
3 | !*.d.ts
4 | tsconfig.json
5 | scripts/*
6 | platforms/android/*
7 | !platforms/android/include.gradle
8 | !platforms/android/*.aar
9 | !platforms/android/*.jar
--------------------------------------------------------------------------------
/src/index.d.ts:
--------------------------------------------------------------------------------
1 | export class LoadingIndicator {
2 | show(options?: OptionsCommon): any;
3 | hide(): void;
4 | }
5 |
6 | export interface OptionsCommon {
7 | /**
8 | * Message in the loading indicator.
9 | */
10 | message?: string;
11 |
12 | /**
13 | * Details message in the loading indicator.
14 | */
15 | details?: string;
16 |
17 | /**
18 | * Color of the message text.
19 | */
20 | color?: string;
21 |
22 | /**
23 | * Background color of the loading indicator.
24 | */
25 | backgroundColor?: string;
26 |
27 | /**
28 | * Progress of the indicator when not using CustomView or Text Mode.
29 | */
30 | progress?: number;
31 |
32 | /**
33 | * Margin for the message/indicator to the edge of the bezel.
34 | */
35 | margin?: number;
36 |
37 | /**
38 | * Set true to allow user interaction.
39 | */
40 | userInteractionEnabled?: boolean;
41 |
42 | /**
43 | * Dim the background behind the indicator.
44 | */
45 | dimBackground?: boolean;
46 |
47 | /**
48 | * Hide bezel around indicator
49 | */
50 | hideBezel?: boolean;
51 |
52 | /**
53 | * The mode of the loading indicator.
54 | */
55 | mode?: Mode;
56 |
57 | /**
58 | * If `mode` is set to CustomView, then you can pass an image or view to show in the loading indicator.
59 | */
60 | customView?: any;
61 |
62 | /**
63 | * iOS specific configuration options.
64 | */
65 | ios?: OptionsIOS;
66 |
67 | /**
68 | * Android specific configuration options.
69 | */
70 | android?: OptionsAndroid;
71 | }
72 |
73 | export interface OptionsIOS {
74 | /**
75 | * Native View instance to anchor the loading indicator to.
76 | */
77 | view?: UIView;
78 | square?: boolean;
79 | }
80 |
81 | export interface OptionsAndroid {
82 | /**
83 | * Native View instance to anchor the loading indicator to.
84 | */
85 | view?: android.view.View;
86 | max?: number;
87 | progressNumberFormat?: string;
88 | progressPercentFormat?: number;
89 | progressStyle?: number;
90 | secondaryProgress?: number;
91 | cancelable?: boolean;
92 | cancelListener?: (dialog: any) => void;
93 | elevation?: number;
94 | }
95 |
96 | export enum Mode {
97 | Indeterminate = 0,
98 | Determinate = 1,
99 | DeterminateHorizontalBar = 2,
100 | AnnularDeterminate = 3,
101 | CustomView = 4,
102 | Text = 5
103 | }
104 |
--------------------------------------------------------------------------------
/src/loading-indicator.android.ts:
--------------------------------------------------------------------------------
1 | import * as application from 'tns-core-modules/application';
2 | import { Color } from 'tns-core-modules/color';
3 | import { fromFileOrResource } from 'tns-core-modules/image-source';
4 | import { screen } from 'tns-core-modules/platform';
5 | import { topmost } from 'tns-core-modules/ui/frame';
6 | import { ad as androidUtils } from 'tns-core-modules/utils/utils';
7 | import { Mode, OptionsCommon } from './loading-indicator.common';
8 |
9 | export * from './loading-indicator.common';
10 |
11 | declare let com: any, global: any;
12 |
13 | const R_ATTR_PROGRESS_BAR_STYLE_HORIZONTAL = 0x01010078;
14 | const PACKAGE = 'com.github.triniwiz.ns.loading.indicator';
15 |
16 | const ViewCompatNamespace = useAndroidX()
17 | ? androidx.core.view
18 | : (android.support.v4 as any).view;
19 |
20 | function useAndroidX() {
21 | return global.androidx && global.androidx.core.view;
22 | }
23 |
24 | export class LoadingIndicator {
25 | private _popOver: android.widget.PopupWindow;
26 | private _currentProgressColor: Color;
27 | private _defaultProgressColor: Color;
28 | private _progressId: number;
29 | private _messageId: number;
30 | private _detailsId: number;
31 | private _customViewId: number;
32 |
33 | constructor() {
34 | this._defaultProgressColor = new Color('#007DD6');
35 | this._progressId = android.view.View.generateViewId();
36 | this._messageId = android.view.View.generateViewId();
37 | this._detailsId = android.view.View.generateViewId();
38 | this._customViewId = android.view.View.generateViewId();
39 | }
40 |
41 | show(options?: OptionsCommon) {
42 | const context = androidUtils.getApplicationContext();
43 | if (context) {
44 | options = options || {};
45 | options.android = options.android || {};
46 | options.userInteractionEnabled =
47 | options.userInteractionEnabled !== undefined || true;
48 | if (!this._popOver) {
49 | this._createPopOver(context, options);
50 | } else {
51 | this._updatePopOver(context, options);
52 | }
53 | }
54 | }
55 |
56 | hide() {
57 | if (this._popOver) {
58 | this._popOver.dismiss();
59 | this._popOver = null;
60 | this._currentProgressColor = null;
61 | }
62 | }
63 |
64 | private _createPopOver(context, options?: OptionsCommon) {
65 | this._popOver = new android.widget.PopupWindow();
66 | const ref = new WeakRef(this);
67 | this._popOver.setTouchable(options.userInteractionEnabled);
68 | const contentView = new android.widget.LinearLayout(context);
69 | const defaultTextColor = new Color(options.color || '#000');
70 | const defaultTextNativeColor = defaultTextColor.android
71 | ? defaultTextColor.android
72 | : android.graphics.Color.BLACK;
73 | const defaultDetailsNativeColor = new Color(
74 | 255 * 0.8,
75 | defaultTextColor.r,
76 | defaultTextColor.g,
77 | defaultTextColor.b
78 | ).android;
79 |
80 | contentView.setOnTouchListener(
81 | new android.view.View.OnTouchListener({
82 | onTouch(
83 | view: android.view.View,
84 | event: android.view.MotionEvent
85 | ): boolean {
86 | const cancelListener = options.android.cancelListener;
87 | const cancelable = options.android.cancelable;
88 | const owner = ref.get();
89 | if (cancelListener && typeof cancelListener === 'function') {
90 | if (owner && cancelable) {
91 | owner._popOver.dismiss();
92 | cancelListener(owner._popOver);
93 | owner._popOver = null;
94 | }
95 | }
96 | return true;
97 | }
98 | })
99 | );
100 | const defaultBackgroundColor = android.graphics.Color.WHITE;
101 |
102 | // handle dimming background option
103 | contentView.setBackgroundColor(
104 | options.dimBackground
105 | ? new Color(255 * 0.6, 0, 0, 0).android
106 | : android.graphics.Color.TRANSPARENT
107 | );
108 |
109 | contentView.setGravity(android.view.Gravity.CENTER);
110 | contentView.setLayoutParams(
111 | new android.view.ViewGroup.LayoutParams(
112 | android.view.ViewGroup.LayoutParams.FILL_PARENT,
113 | android.view.ViewGroup.LayoutParams.FILL_PARENT
114 | )
115 | );
116 | const parentView = new android.widget.LinearLayout(context);
117 | parentView.setOnTouchListener(
118 | new android.view.View.OnTouchListener({
119 | onTouch(
120 | view: android.view.View,
121 | event: android.view.MotionEvent
122 | ): boolean {
123 | return true;
124 | }
125 | })
126 | );
127 |
128 | // Use the ViewCompatNamespace to properly map to `ViewCompat` for AndroidX and support lib versions to avoid breaking change
129 | ViewCompatNamespace.ViewCompat.setElevation(parentView, 9.0);
130 | const params = parentView.getLayoutParams() as android.widget.LinearLayout.LayoutParams;
131 | const parentViewParams = params
132 | ? params
133 | : new android.widget.LinearLayout.LayoutParams(
134 | android.view.ViewGroup.LayoutParams.WRAP_CONTENT,
135 | android.view.ViewGroup.LayoutParams.WRAP_CONTENT
136 | );
137 |
138 | const defaultPadding = 10 * screen.mainScreen.scale;
139 | parentView.setPadding(
140 | defaultPadding,
141 | defaultPadding,
142 | defaultPadding,
143 | defaultPadding
144 | );
145 |
146 | // handle margin option
147 | if (options.margin !== undefined) {
148 | const margin = options.margin * screen.mainScreen.scale;
149 | parentViewParams.setMargins(margin, margin, margin, margin);
150 | }
151 |
152 | parentView.setLayoutParams(parentViewParams);
153 | const backgroundColor = options.backgroundColor
154 | ? new Color(options.backgroundColor).android
155 | : defaultBackgroundColor;
156 |
157 | // handle hideBezel option
158 | if (options.hideBezel) {
159 | parentView.setBackgroundColor(android.graphics.Color.TRANSPARENT);
160 | } else {
161 | const border = new android.graphics.drawable.ShapeDrawable();
162 | border.getPaint().setColor(backgroundColor);
163 | const cornerRadiusValue = 8;
164 | const cornerRadius = Array.create('float', 8);
165 | cornerRadius[0] = cornerRadiusValue;
166 | cornerRadius[1] = cornerRadiusValue;
167 | cornerRadius[2] = cornerRadiusValue;
168 | cornerRadius[3] = cornerRadiusValue;
169 | cornerRadius[4] = cornerRadiusValue;
170 | cornerRadius[5] = cornerRadiusValue;
171 | cornerRadius[6] = cornerRadiusValue;
172 | cornerRadius[7] = cornerRadiusValue;
173 | const shape = new android.graphics.drawable.shapes.RoundRectShape(
174 | cornerRadius,
175 | null,
176 | null
177 | );
178 | border.setShape(shape);
179 | parentView.setBackgroundDrawable(border);
180 | }
181 |
182 | parentView.setGravity(android.view.Gravity.CENTER);
183 | parentView.setOrientation(android.widget.LinearLayout.VERTICAL);
184 |
185 | let progressView: android.widget.ProgressBar;
186 | const customOrText =
187 | options.mode === Mode.CustomView || options.mode === Mode.Text;
188 | if (!customOrText) {
189 | const determinate =
190 | options.progress !== undefined ||
191 | options.mode === Mode.Determinate ||
192 | options.mode === Mode.DeterminateHorizontalBar ||
193 | options.mode === Mode.AnnularDeterminate;
194 |
195 | if (determinate) {
196 | progressView = new android.widget.ProgressBar(
197 | context,
198 | null,
199 | R_ATTR_PROGRESS_BAR_STYLE_HORIZONTAL
200 | );
201 | } else {
202 | progressView = new android.widget.ProgressBar(context);
203 | }
204 |
205 | progressView.setId(this._progressId);
206 |
207 | parentView.addView(progressView);
208 | }
209 |
210 | // handle customView option
211 | if (options.mode === Mode.CustomView) {
212 | if (options.customView) {
213 | const customView = this._createCustomView(context, options);
214 | if (customView) {
215 | parentView.addView(customView);
216 | }
217 | }
218 | }
219 |
220 | if (options.message) {
221 | const messageView = new android.widget.TextView(context);
222 | messageView.setText(options.message);
223 | messageView.setId(this._messageId);
224 | if (options.color) {
225 | messageView.setTextColor(defaultTextNativeColor);
226 | }
227 | messageView.setLayoutParams(
228 | new android.widget.LinearLayout.LayoutParams(
229 | android.widget.LinearLayout.LayoutParams.WRAP_CONTENT,
230 | android.widget.LinearLayout.LayoutParams.WRAP_CONTENT
231 | )
232 | );
233 | parentView.addView(messageView);
234 | }
235 |
236 | // handle details message text
237 | if (options.details) {
238 | const detailsView = new android.widget.TextView(context);
239 | detailsView.setText(options.details);
240 | detailsView.setId(this._detailsId);
241 | detailsView.setTextColor(defaultDetailsNativeColor);
242 | detailsView.setLayoutParams(
243 | new android.widget.LinearLayout.LayoutParams(
244 | android.widget.LinearLayout.LayoutParams.WRAP_CONTENT,
245 | android.widget.LinearLayout.LayoutParams.WRAP_CONTENT
246 | )
247 | );
248 | parentView.addView(detailsView);
249 | }
250 |
251 | switch (options.mode) {
252 | case Mode.CustomView:
253 | break;
254 | case Mode.AnnularDeterminate:
255 | progressView.setIndeterminate(false);
256 | progressView.setMax(100);
257 | progressView.setProgress(0);
258 | progressView.setProgressDrawable(this._getProgressDrawable());
259 | progressView.setBackgroundDrawable(this._getBackgroundDrawable());
260 | progressView.setLayoutParams(
261 | new android.widget.LinearLayout.LayoutParams(
262 | 60 * screen.mainScreen.scale,
263 | 60 * screen.mainScreen.scale
264 | )
265 | );
266 | break;
267 | case Mode.Determinate:
268 | progressView.setIndeterminate(false);
269 | progressView.setMax(100);
270 | progressView.setProgress(0);
271 | progressView.setProgressDrawable(this._getProgressDrawableThick());
272 | progressView.setBackgroundDrawable(this._getBackgroundDrawable());
273 | progressView.setLayoutParams(
274 | new android.widget.LinearLayout.LayoutParams(
275 | 60 * screen.mainScreen.scale,
276 | 60 * screen.mainScreen.scale
277 | )
278 | );
279 | break;
280 | case Mode.DeterminateHorizontalBar:
281 | progressView.setIndeterminate(false);
282 | progressView.setMax(100);
283 | progressView.setProgress(0);
284 | break;
285 | case Mode.Text:
286 | break;
287 | case Mode.Indeterminate:
288 | progressView.setIndeterminate(true);
289 | break;
290 | default:
291 | progressView.setIndeterminate(
292 | options.progress !== undefined ? false : true
293 | );
294 | break;
295 | }
296 |
297 | if (
298 | options.progress !== undefined ||
299 | options.mode === Mode.Determinate ||
300 | options.mode === Mode.AnnularDeterminate ||
301 | options.mode === Mode.DeterminateHorizontalBar ||
302 | options.mode === Mode.Indeterminate ||
303 | !options.mode
304 | ) {
305 | if (options.color) {
306 | this._setColor(options.color, progressView);
307 | this._currentProgressColor = new Color(options.color);
308 | }
309 | // handle background color
310 | if (options.backgroundColor) {
311 | this._setBackgroundColor(options.backgroundColor, progressView);
312 | }
313 | }
314 |
315 | contentView.addView(parentView);
316 | this._popOver.setContentView(contentView);
317 | const view =
318 | topmost().android.rootViewGroup || topmost().currentPage.android;
319 |
320 | // handle anchoring target view
321 | if (options.android.view) {
322 | const nativeView = options.android.view as android.view.View;
323 | this._popOver.setWidth(nativeView.getWidth());
324 | this._popOver.setHeight(nativeView.getHeight());
325 | this._popOver.showAtLocation(
326 | nativeView,
327 | android.view.Gravity.CENTER,
328 | 0,
329 | 0
330 | );
331 | } else {
332 | this._popOver.setWidth(screen.mainScreen.widthPixels);
333 | this._popOver.setHeight(screen.mainScreen.heightPixels);
334 | this._popOver.showAtLocation(view, android.view.Gravity.CENTER, 0, 0);
335 | }
336 | }
337 |
338 | private _updatePopOver(context, options?: OptionsCommon) {
339 | const contentView = this._popOver.getContentView() as android.widget.LinearLayout;
340 | const parentView = contentView.getChildAt(0) as android.widget.LinearLayout;
341 | let count = parentView.getChildCount();
342 | const defaultTextColor = new Color(options.color || 'black');
343 | const defaultTextNativeColor = defaultTextColor.android
344 | ? defaultTextColor.android
345 | : android.graphics.Color.BLACK;
346 |
347 | const defaultDetailsNativeColor = new Color(
348 | 255 * 0.8,
349 | defaultTextColor.r,
350 | defaultTextColor.g,
351 | defaultTextColor.b
352 | ).android;
353 |
354 | if (options.mode === Mode.Text) {
355 | const progressView = parentView.getChildAt(0) as any;
356 | if (progressView) {
357 | const progressViewId = progressView.getId();
358 | if (progressViewId === this._progressId) {
359 | parentView.removeView(progressView);
360 | count = parentView.getChildCount();
361 | }
362 | }
363 | }
364 |
365 | if (options.mode === Mode.CustomView) {
366 | for (let i = 0; i < count; i++) {
367 | const view = parentView.getChildAt(i);
368 | parentView.removeView(view);
369 | }
370 | const customView = this._createCustomView(context, options);
371 |
372 | if (customView) {
373 | parentView.addView(customView);
374 | }
375 | count = parentView.getChildCount();
376 | }
377 |
378 | if (
379 | options.progress &&
380 | options.mode !== Mode.Text &&
381 | options.mode !== Mode.CustomView
382 | ) {
383 | let progressView = parentView.getChildAt(0) as any;
384 | const progressViewId = progressView.getId();
385 |
386 | if (
387 | progressView instanceof android.widget.ProgressBar &&
388 | progressViewId === this._progressId &&
389 | progressView.isIndeterminate()
390 | ) {
391 | parentView.removeView(progressView);
392 | progressView = this._createDeterminateProgressView(context);
393 | parentView.addView(progressView, 0);
394 | }
395 |
396 | if (!(progressView instanceof android.widget.ProgressBar)) {
397 | progressView = this._createDeterminateProgressView(context);
398 | parentView.addView(progressView, 0);
399 | }
400 | count = parentView.getChildCount();
401 |
402 | if (options.color) {
403 | this._setColor(options.color, progressView);
404 | this._currentProgressColor = new Color(options.color);
405 | }
406 |
407 | // handle background color
408 | if (options.backgroundColor) {
409 | this._setBackgroundColor(options.backgroundColor, progressView);
410 | }
411 |
412 | progressView.setProgress(options.progress * 100);
413 | }
414 |
415 | if (
416 | !options.progress &&
417 | options.mode !== Mode.Text &&
418 | options.mode !== Mode.CustomView &&
419 | options.mode === Mode.Indeterminate
420 | ) {
421 | const progressView = new android.widget.ProgressBar(context);
422 | progressView.setId(this._progressId);
423 | parentView.addView(progressView, 0);
424 | if (options.color) {
425 | this._setColor(options.color, progressView);
426 | this._currentProgressColor = new Color(options.color);
427 | }
428 | // handle background color
429 | if (options.backgroundColor) {
430 | this._setBackgroundColor(options.backgroundColor, progressView);
431 | }
432 | count = parentView.getChildCount();
433 | }
434 |
435 | if (options.message) {
436 | let messageView;
437 | let view;
438 | const firstView = parentView.getChildAt(0) as any;
439 | switch (count) {
440 | case 1:
441 | if (firstView.getId() === this._messageId) {
442 | firstView.setTextColor(defaultTextNativeColor);
443 | firstView.setText(options.message);
444 | } else {
445 | messageView = new android.widget.TextView(context);
446 | messageView.setId(this._messageId);
447 | messageView.setText(options.message);
448 | messageView.setTextColor(defaultTextNativeColor);
449 | messageView.setLayoutParams(
450 | new android.widget.LinearLayout.LayoutParams(
451 | android.widget.LinearLayout.LayoutParams.WRAP_CONTENT,
452 | android.widget.LinearLayout.LayoutParams.WRAP_CONTENT
453 | )
454 | );
455 | parentView.addView(messageView);
456 | }
457 |
458 | break;
459 | case 2:
460 | view = parentView.getChildAt(1) as any;
461 | const viewId = view.getId();
462 | if (viewId === this._messageId) {
463 | view.setText(options.message);
464 | view.setTextColor(defaultTextNativeColor);
465 | } else if (viewId === this._detailsId) {
466 | messageView = new android.widget.TextView(context);
467 | messageView.setId(this._messageId);
468 | messageView.setText(options.message);
469 | messageView.setTextColor(defaultTextNativeColor);
470 | messageView.setLayoutParams(
471 | new android.widget.LinearLayout.LayoutParams(
472 | android.widget.LinearLayout.LayoutParams.WRAP_CONTENT,
473 | android.widget.LinearLayout.LayoutParams.WRAP_CONTENT
474 | )
475 | );
476 | parentView.addView(messageView, 1);
477 | }
478 | break;
479 | case 3:
480 | view = parentView.getChildAt(2) as any;
481 | view.setTextColor(defaultTextNativeColor);
482 | view.setText(options.message);
483 | break;
484 | default:
485 | break;
486 | }
487 | count = parentView.getChildCount();
488 | }
489 |
490 | // handle details message text
491 | if (options.details) {
492 | let detailsView;
493 | switch (count) {
494 | case 1:
495 | const firstView = parentView.getChildAt(0) as any;
496 | if (firstView === this._detailsId) {
497 | firstView.setTextColor(defaultDetailsNativeColor);
498 | firstView.setText(options.details);
499 | } else {
500 | detailsView = new android.widget.TextView(context);
501 | detailsView.setId(this._detailsId);
502 | detailsView.setTextColor(defaultDetailsNativeColor);
503 | detailsView.setText(options.details);
504 | detailsView.setLayoutParams(
505 | new android.widget.LinearLayout.LayoutParams(
506 | android.widget.LinearLayout.LayoutParams.WRAP_CONTENT,
507 | android.widget.LinearLayout.LayoutParams.WRAP_CONTENT
508 | )
509 | );
510 | parentView.addView(detailsView);
511 | }
512 |
513 | break;
514 | case 2:
515 | detailsView = parentView.getChildAt(1) as android.widget.TextView;
516 | const detailsViewId = detailsView.getId();
517 | if (detailsViewId === this._detailsId) {
518 | detailsView.setTextColor(defaultDetailsNativeColor);
519 | detailsView.setText(options.details);
520 | } else if (detailsViewId === this._messageId) {
521 | detailsView = new android.widget.TextView(context);
522 | detailsView.setId(this._detailsId);
523 | detailsView.setTextColor(defaultDetailsNativeColor);
524 | detailsView.setText(options.details);
525 | detailsView.setLayoutParams(
526 | new android.widget.LinearLayout.LayoutParams(
527 | android.widget.LinearLayout.LayoutParams.WRAP_CONTENT,
528 | android.widget.LinearLayout.LayoutParams.WRAP_CONTENT
529 | )
530 | );
531 | parentView.addView(detailsView, 2);
532 | }
533 | break;
534 | case 3:
535 | detailsView = parentView.getChildAt(2) as android.widget.TextView;
536 | detailsView.setTextColor(defaultDetailsNativeColor);
537 | detailsView.setText(options.details);
538 | break;
539 | default:
540 | break;
541 | }
542 | }
543 | this._popOver.update();
544 | }
545 |
546 | private _createCustomView(context, options) {
547 | let customView;
548 | if (options.customView instanceof android.graphics.Bitmap) {
549 | customView = new android.widget.ImageView(context);
550 | customView.setImageBitmap(options.customView);
551 | } else if (options.customView instanceof android.view.View) {
552 | customView = options.customView;
553 | } else if (typeof options.customView === 'string') {
554 | customView = new android.widget.ImageView(context);
555 | const fileName = options.customView
556 | .replace('.jpg', '')
557 | .replace('.png', '')
558 | .replace('.jpeg', '');
559 | const image = fromFileOrResource('res://' + fileName);
560 | if (image && image.android) {
561 | customView.setImageBitmap(image.android);
562 | }
563 | }
564 | customView.setId(this._customViewId);
565 | return customView;
566 | }
567 |
568 | private _createDeterminateProgressView(context) {
569 | const progressView = new android.widget.ProgressBar(
570 | context,
571 | null,
572 | R_ATTR_PROGRESS_BAR_STYLE_HORIZONTAL
573 | );
574 | progressView.setId(this._progressId);
575 | progressView.setMax(100);
576 | progressView.setProgress(0);
577 | progressView.setProgressDrawable(this._getProgressDrawable());
578 | progressView.setBackgroundDrawable(this._getBackgroundDrawable());
579 | progressView.setLayoutParams(
580 | new android.widget.LinearLayout.LayoutParams(
581 | 60 * screen.mainScreen.scale,
582 | 60 * screen.mainScreen.scale
583 | )
584 | );
585 | return progressView;
586 | }
587 |
588 | private _setBackgroundColor(color: string, view: any) {
589 | const progressDrawable = view.getProgressDrawable() as any;
590 | const indeterminateDrawable = view.getIndeterminateDrawable() as any;
591 | if (
592 | progressDrawable instanceof android.graphics.drawable.LayerDrawable &&
593 | progressDrawable.getNumberOfLayers() > 0
594 | ) {
595 | const backgroundDrawable = progressDrawable.getDrawable(0);
596 | if (backgroundDrawable) {
597 | backgroundDrawable.setColorFilter(
598 | new Color(color).android,
599 | android.graphics.PorterDuff.Mode.SRC_IN
600 | );
601 | }
602 | }
603 |
604 | if (
605 | indeterminateDrawable instanceof
606 | android.graphics.drawable.LayerDrawable &&
607 | indeterminateDrawable.getNumberOfLayers() > 0
608 | ) {
609 | const backgroundDrawable = indeterminateDrawable.getDrawable(0);
610 | if (backgroundDrawable) {
611 | backgroundDrawable.setColorFilter(
612 | new Color(color).android,
613 | android.graphics.PorterDuff.Mode.SRC_IN
614 | );
615 | }
616 | }
617 | }
618 |
619 | private _setColor(color: string, view: any) {
620 | const progressDrawable = view.getProgressDrawable();
621 | const indeterminateDrawable = view.getIndeterminateDrawable();
622 | if (progressDrawable) {
623 | progressDrawable.setColorFilter(
624 | new Color(color).android,
625 | android.graphics.PorterDuff.Mode.SRC_IN
626 | );
627 | }
628 | if (indeterminateDrawable) {
629 | indeterminateDrawable.setColorFilter(
630 | new Color(color).android,
631 | android.graphics.PorterDuff.Mode.SRC_IN
632 | );
633 | }
634 | }
635 |
636 | private _getResources() {
637 | const ctx = application.android.foregroundActivity as android.app.Activity;
638 | return ctx.getResources();
639 | }
640 |
641 | private _getBackgroundDrawable() {
642 | return this._getResources().getDrawable(
643 | com.github.triniwiz.ns.loading.indicator.R.drawable.circle_shape
644 | );
645 | }
646 |
647 | private _getProgressDrawable() {
648 | return this._getResources().getDrawable(
649 | com.github.triniwiz.ns.loading.indicator.R.drawable.circular_progress_bar
650 | );
651 | }
652 |
653 | private _getProgressDrawableThick() {
654 | return this._getResources().getDrawable(
655 | com.github.triniwiz.ns.loading.indicator.R.drawable
656 | .circular_progress_bar_thick
657 | );
658 | }
659 | }
660 |
--------------------------------------------------------------------------------
/src/loading-indicator.common.ts:
--------------------------------------------------------------------------------
1 | export interface OptionsCommon {
2 | /**
3 | * Message in the loading indicator.
4 | */
5 | message?: string;
6 |
7 | /**
8 | * Details message in the loading indicator.
9 | */
10 | details?: string;
11 |
12 | /**
13 | * Color of the message text.
14 | */
15 | color?: string;
16 |
17 | /**
18 | * Background color of the loading indicator.
19 | */
20 | backgroundColor?: string;
21 |
22 | /**
23 | * Progress of the indicator when not using CustomView or Text Mode.
24 | */
25 | progress?: number;
26 |
27 | /**
28 | * Margin for the message/indicator to the edge of the bezel.
29 | */
30 | margin?: number;
31 |
32 | /**
33 | * Set true to allow user interaction.
34 | */
35 | userInteractionEnabled?: boolean;
36 |
37 | /**
38 | * Dim the background behind the indicator.
39 | */
40 | dimBackground?: boolean;
41 |
42 | /**
43 | * Hide bezel around indicator
44 | */
45 | hideBezel?: boolean;
46 |
47 | /**
48 | * The mode of the loading indicator.
49 | */
50 | mode?: Mode;
51 |
52 | /**
53 | * If `mode` is set to CustomView, then you can pass an image or view to show in the loading indicator.
54 | */
55 | customView?: any;
56 |
57 | /**
58 | * iOS specific configuration options.
59 | */
60 | ios?: OptionsIOS;
61 |
62 | /**
63 | * Android specific configuration options.
64 | */
65 | android?: OptionsAndroid;
66 | }
67 |
68 | export interface OptionsIOS {
69 | /**
70 | * Native View instance to anchor the loading indicator to.
71 | */
72 | view?: UIView;
73 | square?: boolean;
74 | }
75 |
76 | export interface OptionsAndroid {
77 | /**
78 | * Native View instance to anchor the loading indicator to.
79 | */
80 | view?: android.view.View;
81 | max?: number;
82 | progressNumberFormat?: string;
83 | progressPercentFormat?: number;
84 | progressStyle?: number;
85 | secondaryProgress?: number;
86 | cancelable?: boolean;
87 | cancelListener?: (dialog: any) => void;
88 | elevation?: number;
89 | }
90 |
91 | export enum Mode {
92 | Indeterminate = 0,
93 | Determinate = 1,
94 | DeterminateHorizontalBar = 2,
95 | AnnularDeterminate = 3,
96 | CustomView = 4,
97 | Text = 5
98 | }
99 |
--------------------------------------------------------------------------------
/src/loading-indicator.ios.ts:
--------------------------------------------------------------------------------
1 | import { Color } from 'tns-core-modules/color';
2 | import { Mode, OptionsCommon } from './loading-indicator.common';
3 |
4 | export * from './loading-indicator.common';
5 |
6 | export class LoadingIndicator {
7 | private _hud: MBProgressHUD;
8 | // iOS allows indicator to be shown on specific views if desired
9 | // fallback to entire window
10 | private _targetView: any; // UIView
11 |
12 | show(options?: OptionsCommon) {
13 | if (typeof options === 'undefined') options = {};
14 |
15 | if (typeof this._hud === 'undefined') {
16 | // use specific target, fallback to entire window
17 | this._targetView =
18 | options.ios && options.ios.view
19 | ? options.ios.view
20 | : this._getRootWindow();
21 | this._hud = MBProgressHUD.showHUDAddedToAnimated(this._targetView, true);
22 | }
23 | // ios specific
24 | if (options.ios && options.ios.square) this._hud.square = true;
25 |
26 | // options
27 | if (options.message) {
28 | this._hud.labelText = options.message;
29 | }
30 |
31 | if (options.progress) {
32 | this._hud.progress = options.progress;
33 | }
34 |
35 | if (options.mode) {
36 | (this._hud as any).mode = options.mode; // casting bc we use a custom enum and not MBProgessHUD enum for mode
37 | } else {
38 | (this._hud as any).mode = Mode.Indeterminate;
39 | }
40 |
41 | if (options.dimBackground) this._hud.dimBackground = options.dimBackground;
42 |
43 | if (options.margin) this._hud.margin = options.margin;
44 |
45 | if (options.userInteractionEnabled)
46 | this._hud.userInteractionEnabled = options.userInteractionEnabled;
47 |
48 | if (options.backgroundColor) {
49 | this._hud.color = new Color(options.backgroundColor).ios;
50 | }
51 |
52 | if (options.color) {
53 | // make activity and main label same color
54 | this._hud.activityIndicatorColor = new Color(options.color).ios;
55 | this._hud.contentColor = new Color(options.color).ios; // setting this seems to enforce coloring the activity indicator correctly
56 | this._hud.labelColor = new Color(options.color).ios;
57 | }
58 |
59 | if (options.details) {
60 | this._hud.detailsLabelText = options.details;
61 | // detail label same color with 80% opacity of that color
62 | // TODO: allow specific control
63 | this._hud.detailsLabelColor =
64 | options && options.color
65 | ? new Color(options.color).ios
66 | : new Color('#333').ios;
67 | this._hud.detailsLabel.alpha = 0.8;
68 | }
69 |
70 | if (options.hideBezel) {
71 | this._hud.backgroundColor = UIColor.clearColor;
72 | this._hud.bezelView.style = MBProgressHUDBackgroundStyle.SolidColor;
73 | this._hud.bezelView.backgroundColor = UIColor.clearColor;
74 | }
75 |
76 | // handle mode setting for custom view Mode
77 | if (
78 | this._hud.mode &&
79 | (this._hud as any).mode === Mode.CustomView && // casting to any for custom enum we map to
80 | options.customView
81 | ) {
82 | if (options.customView instanceof UIImage) {
83 | this._hud.customView = UIImageView.alloc().initWithImage(
84 | options.customView
85 | );
86 | } else if (options.customView instanceof UIView) {
87 | this._hud.customView = options.customView;
88 | } else if (typeof options.customView === 'string') {
89 | this._hud.customView = UIImageView.alloc().initWithImage(
90 | UIImage.imageNamed(options.customView)
91 | );
92 | }
93 | }
94 |
95 | return this._hud;
96 | }
97 |
98 | hide(targetView?: any) {
99 | targetView = targetView || this._targetView || this._getRootWindow();
100 | MBProgressHUD.hideHUDForViewAnimated(targetView, true);
101 | this._hud = undefined;
102 | }
103 |
104 | private _getRootWindow() {
105 | return UIApplication.sharedApplication.windows[0];
106 | }
107 | }
108 |
--------------------------------------------------------------------------------
/src/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "nativescript-loading-indicator",
3 | "version": "3.0.0",
4 | "description": "A NativeScript plugin for showing an overlayed loading indicator.",
5 | "main": "loading-indicator",
6 | "typings": "index.d.ts",
7 | "nativescript": {
8 | "platforms": {
9 | "android": "2.5.0",
10 | "ios": "2.5.0"
11 | }
12 | },
13 | "repository": {
14 | "type": "git",
15 | "url": "https://github.com/NathanWalker/nativescript-loading-indicator.git"
16 | },
17 | "scripts": {
18 | "tsc": "tsc -skipLibCheck",
19 | "build": "npm run tsc && npm run build.native",
20 | "build.native": "node scripts/build-native.js",
21 | "postclone": "npm i && node scripts/postclone.js && cd ../demo && npm i && npx rimraf -- package-lock.json && cd ../src",
22 | "test.android": "npm run tsc && npm run tslint && cd ../demo && tns build android && tns test android --justlaunch",
23 | "test.ios": "npm run tsc && npm run tslint && cd ../demo && tns build ios && tns test ios --justlaunch",
24 | "tslint": "cd .. && tslint \"**/*.ts\" --config tslint.json --exclude \"**/node_modules/**\"",
25 | "plugin.tscwatch": "npm run tsc -- -w",
26 | "demo.ios": "npm run tsc && cd ../demo && tns run ios --syncAllFiles --emulator",
27 | "demo.android": "npm run tsc && cd ../demo && tns run android --syncAllFiles --emulator",
28 | "demo.reset": "cd ../demo && npx rimraf -- hooks node_modules platforms package-lock.json",
29 | "plugin.prepare": "npm run build && cd ../demo && tns plugin remove nativescript-loading-indicator && tns plugin add ../src",
30 | "clean": "npm run demo.reset && npx rimraf -- node_modules package-lock.json && npm i",
31 | "ci.tslint": "npm i && tslint '**/*.ts' --config '../tslint.json' --exclude '**/node_modules/**' --exclude '**/platforms/**'",
32 | "prepack": "npm run build.native"
33 | },
34 | "lint-staged": {
35 | "**/*.{js, css, ts, json, scss, html, xml, md}": [
36 | "prettier --write",
37 | "git add"
38 | ]
39 | },
40 | "husky": {
41 | "hooks": {
42 | "pre-commit": "lint-staged"
43 | }
44 | },
45 | "keywords": [
46 | "NativeScript",
47 | "JavaScript",
48 | "Android",
49 | "iOS",
50 | "loading-indicator",
51 | "Loading",
52 | "Progress",
53 | "MBProgressHUD",
54 | "ProgressDialog"
55 | ],
56 | "author": {
57 | "name": "Nathan Walker",
58 | "email": "walkerrunpdx@gmail.com"
59 | },
60 | "contributors": [
61 | {
62 | "name": "Osei Fortune",
63 | "email": "fortune.osei@yahoo.com"
64 | },
65 | {
66 | "name": "Brad Martin",
67 | "email": "bradwaynemartin@gmail.com"
68 | }
69 | ],
70 | "bugs": {
71 | "url": "https://github.com/NathanWalker/nativescript-loading-indicator/issues"
72 | },
73 | "license": "Apache-2.0",
74 | "homepage": "https://github.com/NathanWalker/nativescript-loading-indicator",
75 | "readmeFilename": "README.md",
76 | "devDependencies": {
77 | "husky": "^3.0.0",
78 | "lint-staged": "^9.1.0",
79 | "prettier": "^1.18.2",
80 | "tns-core-modules": "^5.0.0",
81 | "tns-platform-declarations": "6.0.0-rc-2019-06-28-175837-02",
82 | "typescript": "~3.3.3",
83 | "prompt": "^1.0.0",
84 | "rimraf": "^2.6.3",
85 | "tslint": "^5.12.1",
86 | "semver": "^5.6.0"
87 | },
88 | "dependencies": {},
89 | "bootstrapper": "nativescript-plugin-seed"
90 | }
91 |
--------------------------------------------------------------------------------
/src/platforms/android/AndroidManifest.xml:
--------------------------------------------------------------------------------
1 |
8 |
9 |
12 |
--------------------------------------------------------------------------------
/src/platforms/android/res/drawable/circular_progress_bar.xml:
--------------------------------------------------------------------------------
1 |
2 |
5 |
10 |
11 |
18 |
19 |
--------------------------------------------------------------------------------
/src/platforms/android/res/drawable/circular_progress_bar_thick.xml:
--------------------------------------------------------------------------------
1 |
2 |
5 |
10 |
11 |
18 |
19 |
--------------------------------------------------------------------------------
/src/platforms/ios/Podfile:
--------------------------------------------------------------------------------
1 | pod 'MBProgressHUD'
2 |
--------------------------------------------------------------------------------
/src/references.d.ts:
--------------------------------------------------------------------------------
1 | /// | typeof NSObject[]): MBBackgroundView; // inherited from UIAppearance
13 |
14 | static appearanceWhenContainedIn(ContainerClass: typeof NSObject): MBBackgroundView; // inherited from UIAppearance
15 |
16 | static appearanceWhenContainedInInstancesOfClasses(containerTypes: NSArray | typeof NSObject[]): MBBackgroundView; // inherited from UIAppearance
17 |
18 | static new(): MBBackgroundView; // inherited from NSObject
19 |
20 | blurEffectStyle: UIBlurEffectStyle;
21 |
22 | color: UIColor;
23 |
24 | style: MBProgressHUDBackgroundStyle;
25 | }
26 |
27 | declare class MBBarProgressView extends UIView {
28 |
29 | static alloc(): MBBarProgressView; // inherited from NSObject
30 |
31 | static appearance(): MBBarProgressView; // inherited from UIAppearance
32 |
33 | static appearanceForTraitCollection(trait: UITraitCollection): MBBarProgressView; // inherited from UIAppearance
34 |
35 | static appearanceForTraitCollectionWhenContainedIn(trait: UITraitCollection, ContainerClass: typeof NSObject): MBBarProgressView; // inherited from UIAppearance
36 |
37 | static appearanceForTraitCollectionWhenContainedInInstancesOfClasses(trait: UITraitCollection, containerTypes: NSArray | typeof NSObject[]): MBBarProgressView; // inherited from UIAppearance
38 |
39 | static appearanceWhenContainedIn(ContainerClass: typeof NSObject): MBBarProgressView; // inherited from UIAppearance
40 |
41 | static appearanceWhenContainedInInstancesOfClasses(containerTypes: NSArray | typeof NSObject[]): MBBarProgressView; // inherited from UIAppearance
42 |
43 | static new(): MBBarProgressView; // inherited from NSObject
44 |
45 | lineColor: UIColor;
46 |
47 | progress: number;
48 |
49 | progressColor: UIColor;
50 |
51 | progressRemainingColor: UIColor;
52 | }
53 |
54 | declare class MBProgressHUD extends UIView {
55 |
56 | static HUDForView(view: UIView): MBProgressHUD;
57 |
58 | static allHUDsForView(view: UIView): NSArray;
59 |
60 | static alloc(): MBProgressHUD; // inherited from NSObject
61 |
62 | static appearance(): MBProgressHUD; // inherited from UIAppearance
63 |
64 | static appearanceForTraitCollection(trait: UITraitCollection): MBProgressHUD; // inherited from UIAppearance
65 |
66 | static appearanceForTraitCollectionWhenContainedIn(trait: UITraitCollection, ContainerClass: typeof NSObject): MBProgressHUD; // inherited from UIAppearance
67 |
68 | static appearanceForTraitCollectionWhenContainedInInstancesOfClasses(trait: UITraitCollection, containerTypes: NSArray | typeof NSObject[]): MBProgressHUD; // inherited from UIAppearance
69 |
70 | static appearanceWhenContainedIn(ContainerClass: typeof NSObject): MBProgressHUD; // inherited from UIAppearance
71 |
72 | static appearanceWhenContainedInInstancesOfClasses(containerTypes: NSArray | typeof NSObject[]): MBProgressHUD; // inherited from UIAppearance
73 |
74 | static hideAllHUDsForViewAnimated(view: UIView, animated: boolean): number;
75 |
76 | static hideHUDForViewAnimated(view: UIView, animated: boolean): boolean;
77 |
78 | static new(): MBProgressHUD; // inherited from NSObject
79 |
80 | static showHUDAddedToAnimated(view: UIView, animated: boolean): MBProgressHUD;
81 |
82 | activityIndicatorColor: UIColor;
83 |
84 | animationType: MBProgressHUDAnimation;
85 |
86 | readonly backgroundView: MBBackgroundView;
87 |
88 | readonly bezelView: MBBackgroundView;
89 |
90 | readonly button: UIButton;
91 |
92 | color: UIColor;
93 |
94 | completionBlock: () => void;
95 |
96 | contentColor: UIColor;
97 |
98 | cornerRadius: number;
99 |
100 | customView: UIView;
101 |
102 | defaultMotionEffectsEnabled: boolean;
103 |
104 | delegate: MBProgressHUDDelegate;
105 |
106 | readonly detailsLabel: UILabel;
107 |
108 | detailsLabelColor: UIColor;
109 |
110 | detailsLabelFont: UIFont;
111 |
112 | detailsLabelText: string;
113 |
114 | dimBackground: boolean;
115 |
116 | graceTime: number;
117 |
118 | readonly label: UILabel;
119 |
120 | labelColor: UIColor;
121 |
122 | labelFont: UIFont;
123 |
124 | labelText: string;
125 |
126 | margin: number;
127 |
128 | minShowTime: number;
129 |
130 | minSize: CGSize;
131 |
132 | mode: MBProgressHUDMode;
133 |
134 | offset: CGPoint;
135 |
136 | opacity: number;
137 |
138 | progress: number;
139 |
140 | progressObject: NSProgress;
141 |
142 | removeFromSuperViewOnHide: boolean;
143 |
144 | readonly size: CGSize;
145 |
146 | square: boolean;
147 |
148 | taskInProgress: boolean;
149 |
150 | xOffset: number;
151 |
152 | yOffset: number;
153 |
154 | constructor(o: { view: UIView; });
155 |
156 | constructor(o: { window: UIWindow; });
157 |
158 | hide(animated: boolean): void;
159 |
160 | hideAfterDelay(animated: boolean, delay: number): void;
161 |
162 | hideAnimated(animated: boolean): void;
163 |
164 | hideAnimatedAfterDelay(animated: boolean, delay: number): void;
165 |
166 | initWithView(view: UIView): this;
167 |
168 | initWithWindow(window: UIWindow): this;
169 |
170 | show(animated: boolean): void;
171 |
172 | showAnimated(animated: boolean): void;
173 |
174 | showAnimatedWhileExecutingBlock(animated: boolean, block: () => void): void;
175 |
176 | showAnimatedWhileExecutingBlockCompletionBlock(animated: boolean, block: () => void, completion: () => void): void;
177 |
178 | showAnimatedWhileExecutingBlockOnQueue(animated: boolean, block: () => void, queue: NSObject): void;
179 |
180 | showAnimatedWhileExecutingBlockOnQueueCompletionBlock(animated: boolean, block: () => void, queue: NSObject, completion: () => void): void;
181 |
182 | showWhileExecutingOnTargetWithObjectAnimated(method: string, target: any, object: any, animated: boolean): void;
183 | }
184 |
185 | declare const enum MBProgressHUDAnimation {
186 |
187 | Fade = 0,
188 |
189 | Zoom = 1,
190 |
191 | ZoomOut = 2,
192 |
193 | ZoomIn = 3
194 | }
195 |
196 | declare const enum MBProgressHUDBackgroundStyle {
197 |
198 | SolidColor = 0,
199 |
200 | Blur = 1
201 | }
202 |
203 | interface MBProgressHUDDelegate extends NSObjectProtocol {
204 |
205 | hudWasHidden?(hud: MBProgressHUD): void;
206 | }
207 | declare var MBProgressHUDDelegate: {
208 |
209 | prototype: MBProgressHUDDelegate;
210 | };
211 |
212 | declare const enum MBProgressHUDMode {
213 |
214 | Indeterminate = 0,
215 |
216 | Determinate = 1,
217 |
218 | DeterminateHorizontalBar = 2,
219 |
220 | AnnularDeterminate = 3,
221 |
222 | CustomView = 4,
223 |
224 | Text = 5
225 | }
226 |
227 | declare var MBProgressHUDVersionNumber: number;
228 |
229 | declare var MBProgressHUDVersionString: interop.Reference;
230 |
231 | declare var MBProgressMaxOffset: number;
232 |
233 | declare class MBRoundProgressView extends UIView {
234 |
235 | static alloc(): MBRoundProgressView; // inherited from NSObject
236 |
237 | static appearance(): MBRoundProgressView; // inherited from UIAppearance
238 |
239 | static appearanceForTraitCollection(trait: UITraitCollection): MBRoundProgressView; // inherited from UIAppearance
240 |
241 | static appearanceForTraitCollectionWhenContainedIn(trait: UITraitCollection, ContainerClass: typeof NSObject): MBRoundProgressView; // inherited from UIAppearance
242 |
243 | static appearanceForTraitCollectionWhenContainedInInstancesOfClasses(trait: UITraitCollection, containerTypes: NSArray | typeof NSObject[]): MBRoundProgressView; // inherited from UIAppearance
244 |
245 | static appearanceWhenContainedIn(ContainerClass: typeof NSObject): MBRoundProgressView; // inherited from UIAppearance
246 |
247 | static appearanceWhenContainedInInstancesOfClasses(containerTypes: NSArray | typeof NSObject[]): MBRoundProgressView; // inherited from UIAppearance
248 |
249 | static new(): MBRoundProgressView; // inherited from NSObject
250 |
251 | annular: boolean;
252 |
253 | backgroundTintColor: UIColor;
254 |
255 | progress: number;
256 |
257 | progressTintColor: UIColor;
258 | }
259 |
--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "rules": {
3 | "class-name": true,
4 | "prefer-const": true,
5 | "comment-format": [true, "check-space"],
6 | "indent": [true, "spaces"],
7 | "no-duplicate-variable": true,
8 | "no-eval": true,
9 | "no-internal-module": true,
10 | "no-trailing-whitespace": true,
11 | "no-var-keyword": true,
12 | "one-line": [true, "check-open-brace", "check-whitespace"],
13 | "quotemark": [false, "double"],
14 | "semicolon": [true, "always"],
15 | "triple-equals": [true, "allow-null-check"],
16 | "typedef-whitespace": [
17 | true,
18 | {
19 | "call-signature": "nospace",
20 | "index-signature": "nospace",
21 | "parameter": "nospace",
22 | "property-declaration": "nospace",
23 | "variable-declaration": "nospace"
24 | }
25 | ],
26 | "variable-name": [true, "ban-keywords"],
27 | "whitespace": [
28 | true,
29 | "check-branch",
30 | "check-decl",
31 | "check-operator",
32 | "check-separator",
33 | "check-type"
34 | ]
35 | }
36 | }
37 |
--------------------------------------------------------------------------------