ng spinners herunterladen - ng spinners Quellcode Download

ng spinners

Komponenten von Drittanbietern

Size property in circle and ring loaders

Herunterladen

Winkelspinner CSS -Lader (Vue, React)

Erstaunliche Sammlung von Winkelspinnernkomponenten mit reinem CSS.
Die Winkelspinner basieren auf Loading.io und aus dem gesamten Web.

Keine zusätzlichen CSS -Importe
✂️ Zero Abhängigkeiten
"Spinner können separat installieren

Live -Demo

Durchsuchen Sie die Komponenten und erkunden Sie ihre Requisiten mit Bit.
Installieren Sie die spezifische Winkelspinnerkomponente mit NPM, Garn oder Bit, ohne das gesamte Projekt installieren zu müssen.
Installieren Sie Komponenten und Live -Demo

Liste der Spinner - Eingabe- und Standardeigenschaft

Jede Komponente akzeptiert eine color , und nur wenige akzeptieren auch size .
Die Standard color ist #7f58af .
Komponente, die size akzeptiert, haben eine Standardgröße in Pixel.

Spinner	Farbe: Zeichenfolge	Größe: Zahl
`<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`	- -

? Installation

Verwenden von NPM zur Installation von NG-Spinnern

 npm i --save ng-spinners

Spielen und installieren Sie Spinner für Angular mit Bit

Installieren Sie eine bestimmte Winkelspinnerkomponente/-modul mit Bit, NPM oder Garn, ohne das gesamte Projekt mit Bit zu installieren, um mit Live -Demo zu spielen, und probieren Sie die Spinner vor der Installation aus.

Setzen Sie die NPM -Regisetry -Konfiguration (einmalige Aktion):

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

und verwenden Sie Ihren bevorzugten Paketmanager:

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

Nutzungsbeispiele

Beispiel für Moduldatei:

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

Beispiel für Komponenten HTML -Datei Beispiel:

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