{"id":15141939,"url":"https://github.com/nstudio/nativescript-loading-indicator","last_synced_at":"2025-09-29T10:31:35.523Z","repository":{"id":45349344,"uuid":"196430868","full_name":"nstudio/nativescript-loading-indicator","owner":"nstudio","description":"NativeScript Loading Indicator plugin","archived":true,"fork":false,"pushed_at":"2021-12-19T04:52:45.000Z","size":3391,"stargazers_count":48,"open_issues_count":15,"forks_count":14,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-04-13T17:13:21.363Z","etag":null,"topics":["android","ios","loading-indicator","loading-spinner","nativescript","nstudio"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nstudio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-07-11T16:34:52.000Z","updated_at":"2023-11-07T12:51:57.000Z","dependencies_parsed_at":"2022-08-20T20:50:18.026Z","dependency_job_id":null,"html_url":"https://github.com/nstudio/nativescript-loading-indicator","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nstudio%2Fnativescript-loading-indicator","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nstudio%2Fnativescript-loading-indicator/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nstudio%2Fnativescript-loading-indicator/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nstudio%2Fnativescript-loading-indicator/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nstudio","download_url":"https://codeload.github.com/nstudio/nativescript-loading-indicator/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219874509,"owners_count":16554585,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","ios","loading-indicator","loading-spinner","nativescript","nstudio"],"created_at":"2024-09-26T09:20:47.844Z","updated_at":"2025-09-29T10:31:28.346Z","avatar_url":"https://github.com/nstudio.png","language":"TypeScript","readme":"## Source management moved to [nstudio/nativescript-plugins](https://github.com/nstudio/nativescript-plugins/tree/main/packages/nativescript-loading-indicator)\n---\n\u003ca align=\"center\" href=\"https://www.npmjs.com/package/@nstudio/nativescript-loading-indicator\"\u003e\n    \u003ch3 align=\"center\"\u003eNativeScript Loading Indicator\u003c/h3\u003e\n\u003c/a\u003e\n\u003ch4 align=\"center\"\u003e\nNativeScript-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.\n\u003c/h4\u003e\n\n\u003cp align=\"center\"\u003e\n    \u003ca href=\"https://www.npmjs.com/package/@nstudio/nativescript-loading-indicator\"\u003e\n        \u003cimg src=\"https://img.shields.io/npm/v/@nstudio/nativescript-loading-indicator.svg\" alt=\"npm\"\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.npmjs.com/package/@nstudio/nativescript-loading-indicator\"\u003e\n        \u003cimg src=\"https://img.shields.io/npm/dt/@nstudio/nativescript-loading-indicator.svg?label=npm%20downloads\" alt=\"npm\"\u003e\n    \u003c/a\u003e\n\u003c/p\u003e\n\n---\n\n## Installation\n\n## NativeScript 7+:\n\n```bash\nns plugin add @nstudio/nativescript-loading-indicator\n```\n\n## NativeScript lower than 7:\n\n```bash\ntns plugin add @nstudio/nativescript-loading-indicator@3.0.x\n```\n\n## Screenshots\n\n### iOS\n\n\u003cp align=\"center\"\u003e\n\n|                                                                       |                                                                       |                                                                       |                                                                       |\n| --------------------------------------------------------------------- | --------------------------------------------------------------------- | --------------------------------------------------------------------- | --------------------------------------------------------------------- |\n| \u003cimg src=\"./screenshots/ios/1.png\" style=\"max-width:200px\" alt=\"iOS\"\u003e | \u003cimg src=\"./screenshots/ios/2.png\" style=\"max-width:200px\" alt=\"iOS\"\u003e | \u003cimg src=\"./screenshots/ios/3.png\" style=\"max-width:200px\" alt=\"iOS\"\u003e | \u003cimg src=\"./screenshots/ios/4.png\" style=\"max-width:200px\" alt=\"iOS\"\u003e |\n\n  \u003c!-- \u003cimg src=\"./screenshots/ios/1.png\" style=\"max-width:200px\" alt=\"iOS Example 1\"\u003e\n  \u003cimg src=\"./screenshots/ios/2.png\" style=\"max-width:200px\" alt=\"iOS Example 2\"\u003e\n  \u003cimg src=\"./screenshots/ios/3.png\" style=\"max-width:200px\" alt=\"iOS Example 3\"\u003e\n  \u003cimg src=\"./screenshots/ios/4.png\" style=\"max-width:200px\" alt=\"iOS Example 4\"\u003e --\u003e\n\n\u003c/p\u003e\n\n### Android\n\n\u003cp align=\"center\"\u003e\n\n|                                                                               |                                                                               |                                                                               |                                                                               |\n| ----------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | ----------------------------------------------------------------------------- |\n| \u003cimg src=\"./screenshots/android/1.png\" style=\"max-width:200px\" alt=\"Android\"\u003e | \u003cimg src=\"./screenshots/android/2.png\" style=\"max-width:200px\" alt=\"Android\"\u003e | \u003cimg src=\"./screenshots/android/3.png\" style=\"max-width:200px\" alt=\"Android\"\u003e | \u003cimg src=\"./screenshots/android/4.png\" style=\"max-width:200px\" alt=\"Android\"\u003e |\n\n\u003c/p\u003e\n\n## Example\n\n#### TypeScript\n\n```typescript\nimport {\n  LoadingIndicator,\n  Mode,\n  OptionsCommon,\n} from '@nstudio/nativescript-loading-indicator';\n\nconst indicator = new LoadingIndicator();\n\nconst options: OptionsCommon = {\n  message: 'Loading...',\n  details: 'Additional detail note!',\n  progress: 0.65,\n  margin: 10,\n  dimBackground: true,\n  color: '#4B9ED6', // color of indicator and labels\n  // background box around indicator\n  // hideBezel will override this if true\n  backgroundColor: 'yellow',\n  userInteractionEnabled: false, // default true. Set false so that the touches will fall through it.\n  hideBezel: true, // default false, can hide the surrounding bezel\n  mode: Mode.AnnularDeterminate, // see options below\n  android: {\n    view: someStackLayout.android, // Target view to show on top of (Defaults to entire window)\n    cancelable: true,\n    cancelListener: function (dialog) {\n      console.log('Loading cancelled');\n    },\n  },\n  ios: {\n    view: someButton.ios, // Target view to show on top of (Defaults to entire window)\n    square: false,\n  },\n};\n\nindicator.show(options);\n\n// after some async event maybe or a timeout hide the indicator\nindicator.hide();\n```\n\n#### javascript\n\n```js\nconst LoadingIndicator = require('@nstudio/nativescript-loading-indicator')\n  .LoadingIndicator;\nconst Mode = require('@nstudio/nativescript-loading-indicator').Mode;\n\nconst loader = new LoadingIndicator();\n\n// optional options\n// android and ios have some platform specific options\nconst options = {\n  message: 'Loading...',\n  details: 'Additional detail note!',\n  progress: 0.65,\n  margin: 10,\n  dimBackground: true,\n  color: '#4B9ED6', // color of indicator and labels\n  // background box around indicator\n  // hideBezel will override this if true\n  backgroundColor: 'yellow',\n  userInteractionEnabled: false, // default true. Set false so that the touches will fall through it.\n  hideBezel: true, // default false, can hide the surrounding bezel\n  mode: Mode.AnnularDeterminate, // see options below\n  android: {\n    view: android.view.View, // Target view to show on top of (Defaults to entire window)\n    cancelable: true,\n    cancelListener: function (dialog) {\n      console.log('Loading cancelled');\n    },\n  },\n  ios: {\n    view: UIView, // Target view to show on top of (Defaults to entire window)\n  },\n};\n\nloader.show(options); // options is optional\n\n// Do whatever it is you want to do while the loader is showing, then\n\nloader.hide();\n```\n\n### Common Options\n\n```typescript\nexport interface OptionsCommon {\n  /**\n   * Message in the loading indicator.\n   */\n  message?: string;\n\n  /**\n   * Details message in the loading indicator.\n   */\n  details?: string;\n\n  /**\n   * Color of the message text.\n   */\n  color?: string;\n\n  /**\n   * Background color of the loading indicator.\n   */\n  backgroundColor?: string;\n\n  /**\n   * Progress of the indicator when not using CustomView or Text Mode.\n   */\n  progress?: number;\n\n  /**\n   * Margin for the message/indicator to the edge of the bezel.\n   */\n  margin?: number;\n\n  /**\n   * Set true to allow user interaction.\n   */\n  userInteractionEnabled?: boolean;\n\n  /**\n   * Dim the background behind the indicator.\n   */\n  dimBackground?: boolean;\n\n  /**\n   * Hide bezel around indicator\n   */\n  hideBezel?: boolean;\n\n  /**\n   * The mode of the loading indicator.\n   */\n  mode?: Mode;\n\n  /**\n   * If `mode` is set to CustomView, then you can pass an image or view to show in the loading indicator.\n   */\n  customView?: any;\n\n  /**\n   * iOS specific configuration options.\n   */\n  ios?: OptionsIOS;\n\n  /**\n   * Android specific configuration options.\n   */\n  android?: OptionsAndroid;\n}\n```\n\n#### Android Specific\n\n```typescript\nexport interface OptionsAndroid {\n  /**\n   * Native View instance to anchor the loading indicator to.\n   */\n  view?: android.view.View;\n  max?: number;\n  progressNumberFormat?: string;\n  progressPercentFormat?: number;\n  progressStyle?: number;\n  secondaryProgress?: number;\n  cancelable?: boolean;\n  cancelListener?: (dialog: any) =\u003e void;\n  elevation?: number;\n}\n```\n\n#### iOS Specific\n\n```typescript\nexport interface OptionsIOS {\n  /**\n   * Native View instance to anchor the loading indicator to.\n   */\n  view?: UIView;\n  square?: boolean;\n}\n```\n\n### Mode Enum\n\n```typescript\nexport enum Mode {\n  Indeterminate = 0,\n  Determinate = 1,\n  DeterminateHorizontalBar = 2,\n  AnnularDeterminate = 3,\n  CustomView = 4,\n  Text = 5,\n}\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnstudio%2Fnativescript-loading-indicator","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnstudio%2Fnativescript-loading-indicator","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnstudio%2Fnativescript-loading-indicator/lists"}