ng spinners下载 - ng spinners源代码下载

ng spinners

三方组件

Size property in circle and ring loaders

下载

角旋转器CSS装载机（VUE，反应）

具有纯CSS的Angular Spinner组件的惊人集合。
Angular Spinner基于Loading.io和Web的整个网络。

没有额外的CSS进口
✂️Zero依赖性
旋转器可以单独安装

现场演示

浏览组件并点点探索他们的道具。
使用NPM，纱线或位安装特定的Angular Spinner组件，而不必安装整个项目。
安装组件和现场演示

旋转器列表 - 输入和默认属性

每个组件都接受color道具，很少有人接受size道具。
默认的color道具为#7f58af 。
接受size道具的组件在像素中具有默认尺寸。

旋转器	颜色：字符串	尺寸：数字
`<circle-loader></circle-loader>`	`#7f58af`	`64`
`<default-loader></default-loader>`	`#7f58af`	-
`<dualring-loader></dualring-loader>`	`#7f58af`	-
`<ellipsis-loader></ellipsis-loader>`	`#7f58af`	-
`<facebook-loader></facebook-loader>`	`#7f58af`	-
`<grid-loader></grid-loader>`	`#7f58af`	-
`<heart-loader></heart-loader>`	`#7f58af`	-
`<hourglass-loader></hourglass-loader>`	`#7f58af`	-
`<ring-loader></ring-loader>`	`#7f58af`	`80`
`<ripple-loader></ripple-loader>`	`#7f58af`	-
`<roller-loader></roller-loader>`	`#7f58af`	-
`<spinner-loader></spinner-loader>`	`#7f58af`	-
`<orbitals-loader></orbitals-loader>`	`#7f58af`	-

？安装

使用NPM安装NG-Spinner

 npm i --save ng-spinners

稍微播放和安装旋转器

使用BIT，NPM或纱线安装特定的Angular Spinner组件/模块，而无需使用BIT安装整个项目即可使用LIVE演示，然后在安装之前尝试使用旋转器。

设置NPM Regisetry Config（一次性操作）：

npm config set ' @bit:registry ' https://node.bit.dev

并使用您喜欢的软件包管理器：

npm i @bit/joshk.ng-spinners.facebook-loader
yarn add @bit/joshk.ng-spinners.facebook-loader
bit import joshk.ng-spinners/facebook-loader

用法示例

模块文件示例：

 import { BrowserModule } from '@angular/platform-browser' ;
import { NgModule } from '@angular/core' ;

import { AppComponent } from './app.component' ;
//using npm or yarn
import { FacebookLoaderModule } from 'ng-spinners' ;
//using bit
import { FacebookLoaderModule } from '@bit/joshk.ng-spinners.facebook-loader' ;

@ NgModule ( {
	declarations : [
		AppComponent ,
	] ,
	imports : [
		BrowserModule ,
		FacebookLoaderModule
	] ,
	providers : [ ] ,
	bootstrap : [ AppComponent ]
} )
export class AppModule { }

组件HTML文件示例：

 < facebook-loader color =" black " > </ facebook-loader >
< facebook-loader color =" #de3541 " > </ facebook-loader >
< facebook-loader > </ facebook-loader >