ng spinnersダウンロード - ng spinnersソースコードのダウンロード

ng spinners

サードパーティ製コンポーネント

Size property in circle and ring loaders

ダウンロード

Angular Spinners CSSローダー（Vue、React）

純粋なCSSを備えた角度スピナーコンポーネントの素晴らしいコレクション。
Angular Spinnersは、Loading.ioに基づいており、Web全体からです。

？追加のCSSインポートはありません
Zero依存関係
？スピナーは個別にインストールできます

ライブデモ

コンポーネントを閲覧し、ビットで小道具を探索します。
プロジェクト全体をインストールすることなく、NPM、YARN、またはBITで特定のAngular Spinnerコンポーネントをインストールします。
コンポーネントとライブデモをインストールします

スピナーのリスト - 入力およびデフォルトのプロパティ

各コンポーネントはcolorプロップを受け入れ、 size小道具も受け入れません。
デフォルトのcolor小道具は#7f58afです。
size Propを受け入れるコンポーネントは、ピクセルでデフォルトのサイズを持っています。

スピナー	色：文字列	サイズ：番号
`<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スピナーをインストールします

 npm i --save ng-spinners

BITでAngular用のスピナーを再生およびインストールします

ライブデモで再生するためにBITを使用してプロジェクト全体をインストールすることなく、BIT、NPM、またはYARNを備えた特定のAngular Spinnerコンポーネント/モジュールをインストールし、インストールする前にスピナーを試してください。

NPMレジシトリー構成（1回のアクション）を設定します。

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 >