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 >