当前位置: 首页 > 软件库 > Web应用开发 > Web框架 >

ngx-loading-bar

Automatic page loading / progress bar for Angular
授权协议 MIT License
开发语言 JavaScript
所属分类 Web应用开发、 Web框架
软件类型 开源软件
地区 不详
投 递 者 林蕴藉
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

@ngx-loading-bar


A fully automatic loading bar with zero configuration for Angular app (http, http-client and router).


Packages

Demo

Table of contents

Getting started

1. Install @ngx-loading-bar:

# 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

2. Import the installed libraries:

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 {}

3. Include 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 {}
Customize 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, ...)

Global config

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.

Ignoring particular requests

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:

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:

  • using the router.navigateByUrl() method:
this.router.navigateByUrl('/custom-path', {
  state: { ignoreLoadingBar: true },
});
  • using the routerLink directive:
<a routerLink="/custom-path" [state]="{ ignoreLoadingBar: true }">Go</a>

Manage multi loading bars separately

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:

  • using 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>
  • using 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$;

Manually manage loading service

1. Import the LoadingBarModule

import { NgModule } from '@angular/core';

import { LoadingBarModule } from '@ngx-loading-bar/core';

@NgModule({
  ...
  imports: [
    ...

    LoadingBarModule,
  ],
})
export class AppModule {}

2. Inject/Use LoadingBarService

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) {}
}

Integration with Material Progress bar

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) {}
}

Lazy Loading modules

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.

Credits

  • 安装 首先去官网找到安装命令 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