@angular/common/http
requests.# if you use `@angular/common/http`
npm install @ngx-loading-bar/core @ngx-loading-bar/http-client --save
# if you use `@angular/router`
npm install @ngx-loading-bar/core @ngx-loading-bar/router --save
# to manage loading-bar manually
npm install @ngx-loading-bar/core --save
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// for HttpClient import:
import { LoadingBarHttpClientModule } from '@ngx-loading-bar/http-client';
// for Router import:
import { LoadingBarRouterModule } from '@ngx-loading-bar/router';
// for Core import:
import { LoadingBarModule } from '@ngx-loading-bar/core';
import { AppComponent } from './app';
@NgModule({
...
imports: [
...
// for HttpClient use:
LoadingBarHttpClientModule,
// for Router use:
LoadingBarRouterModule,
// for Core use:
LoadingBarModule
],
})
export class AppModule {}
ngx-loading-bar
in your app component:import { Component } from '@angular/core';
@Component({
selector: 'app',
template: `
...
<ngx-loading-bar></ngx-loading-bar>
`,
})
export class AppComponent {}
ngx-loading-bar
You can pass the following inputs to customize the view:
Input | Description |
---|---|
color | The color of loading bar. Default value is #29d . |
includeSpinner | Hide or show the Spinner. Default value is true . |
includeBar | Hide or show the Bar. Default value is true . |
height | The height of loading bar. Default value is 2px . |
diameter | The diameter of the progress spinner. Default value is 14px . |
fixed | set loading bar on the top of the screen or inside a container. Default value is true . |
value | Set the value of the progress bar. |
ref | Select the ref of a loading bar instance to display (http , router , ...) |
The global config can be adjusted by providing a value for LOADING_BAR_CONFIG
in your application's root module.
import { LOADING_BAR_CONFIG } from '@ngx-loading-bar/core';
@NgModule({
providers: [
providers: [{ provide: LOADING_BAR_CONFIG, useValue: { latencyThreshold: 100 } }],
]
})
Option | Description |
---|---|
latencyThreshold | The initial delay time to wait before displaying the loading bar. Default value is 0 . |
The loading bar can also be forced to ignore certain requests, for example, when long-polling or periodically sending debugging information back to the server.
Http client doesn't allow passing custom option, in order to achieve that we made a temporary solution (by passing the option throught the header) that will be removed once http-client come with a proper solution.
// ignore a particular $http GET:
httpClient.get('/status', {
headers: { ignoreLoadingBar: '' },
});
router.navigateByUrl()
method:this.router.navigateByUrl('/custom-path', {
state: { ignoreLoadingBar: true },
});
routerLink
directive:<a routerLink="/custom-path" [state]="{ ignoreLoadingBar: true }">Go</a>
In some case you may want to differentiate the reason why the loading bar is showing for example show the loading bar when an HttpClient request is being made, and a full page darkening overlay with a spinner when the router is routing to a new page in that case either use ref
input or LoadingBarService
to control a specific loading bar instance:
ref
input:<!-- loading bar for router -->
<ngx-loading-bar ref="router"></ngx-loading-bar>
<!-- loading bar for http -->
<ngx-loading-bar ref="http"></ngx-loading-bar>
LoadingBarService
service:// select the router loader instance
const state = this.loader.useRef('router');
// control state
state.start();
state.complete();
// get the progress value
const value$ = state.value$;
LoadingBarModule
import { NgModule } from '@angular/core';
import { LoadingBarModule } from '@ngx-loading-bar/core';
@NgModule({
...
imports: [
...
LoadingBarModule,
],
})
export class AppModule {}
import { Component } from '@angular/core';
import { LoadingBarService } from '@ngx-loading-bar/core';
@Component({
selector: 'app',
template: `
...
<ngx-loading-bar></ngx-loading-bar>
<button (click)="loader.start()">start</button>
<button (click)="loader.complete()">Complete</button>
`,
})
export class App {
loader = this.loadingBar.useRef();
constructor(private loadingBar: LoadingBarService) {}
}
import { Component } from '@angular/core';
import { LoadingBarService } from '@ngx-loading-bar/core';
@Component({
selector: 'app',
template: `
...
<mat-progress-bar mode="determinate" [value]="loader.value$ | async"></mat-progress-bar>
`,
})
export class App {
constructor(public loader: LoadingBarService) {}
}
If you're using Lazy Loaded Modules in your app, please use LoadingBarRouterModule, because although a request is being fired in the nework console to fetch your lazy load module.js file, it won't trigger the LoadingBarHttpClientModule.
安装 首先去官网找到安装命令 yarn add ngx-vant or npm i ngx-vant 使用 单独创建一个ts文件,把ngx-vant的标签放到里面,这样就可以全局导入了 import { NgModule } from '@angular/core'; import { ButtonModule } from 'ngx-vant/button'; import { CellMod
【本想把英文翻译过来,发现有人已经翻译了,杯具。我就不做无用功了。】 附中文wiki链接: 点击打开链接 lua_use_default_type 语法: lua_use_default_type on | off 默认值: lua_use_default_type on 配置段: http, server, location, location if 是否使用 MIME type( MIME
加载提示的过渡效果。 支持 安装 $ npm install universal-loading --save 方法 show(options) 显示 loading 提示框。 参数 属性 类型 默认值 必选 描述 支持 content String √ 提示中的文字内容 delay Number 0 x 延迟显示,单位 ms mask Boolean false x 是否显示透明蒙层,防止触摸穿
简介 <loading> 为容器提供上拉加载功能。 注意 <loading> 是 <scroller>、<list>、<waterfall> 的子组件,只能在被它们包含时才能被正确渲染。 <scroller> <div v-for="num in lists"> <text>{{num}}</text> </div> <loading> <text>Loading<
加载,提供了可自定义大小的加载动画。 示例 图标大小 默认大小为24px,可通过size属性配置 <cube-loading></cube-loading> <cube-loading :size="28"></cube-loading> <cube-loading :size="40"></cube-loading> Props 配置 参数 说明 类型 默认值 size 加载图标的大小,单位p
Weex 加载提示组件 规则 让用户知道页面正在加载 在某些特定场景下,提供有意义的文案,帮助用户明白哪个任务正在进行中 局部 Loading 不建议设置太大 Demo 使用方法 <template> <div> <wxc-loading :show="isShow" type="trip"></wxc-loading> <wxc-part-loading
描述 (Description) 在延迟加载中,即使未声明变量,也可以使用变量。 例子 (Example) 以下示例演示了在LESS文件中使用lazy loading of variable - <html> <head> <link rel = "stylesheet" href = "style.css" type = "text/css" /> <title>L
描述 (Description) 延迟加载,当用于大尺寸多媒体文件时,需要花费时间来加载诸如图片,视频等。 例子 (Example) 以下示例演示了延迟加载的使用,它通过触发Framework7中的“lazy”事件来加载图像 - <!DOCTYPE html> <html> <head> <meta name = "viewport" content = "width = dev