Téléchargement ng spinners - ng spinners Source Code Download

ng spinners

Composants tiers

Size property in circle and ring loaders

Télécharger

Chargeurs CSS à filateurs angulaires (Vue, React)

Incroyable collection de composants de filateurs angulaires avec du CSS pur.
Les filateurs angulaires sont basés sur le chargement.io et de partout sur le Web.

? Pas d'importations CSS supplémentaires
✂️Zero dépendances
? Les filateurs peuvent être installés séparément

Démo en direct

Parcourez les composants et explorez leurs accessoires avec Bit.
Installez le composant de spinner angulaire spécifique avec du NPM, du fil ou du bit sans avoir à installer l'ensemble du projet.
Installer des composants et une démo en direct

Liste des filateurs - Input et propriété par défaut

Chaque composant accepte un accessoire color , et quelques-uns acceptent également une taille size .
L'hélice color par défaut est #7f58af .
Composant qui accepte size Prop a une taille par défaut en pixel.

Fileur	couleur: corde	Taille: numéro
`<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

Utilisation de NPM pour installer Ng-Spinners

 npm i --save ng-spinners

Jouez et installez des filateurs pour Angular avec Bit

Installez le composant / module de spinner angulaire spécifique avec le bit, le NPM ou le fil sans avoir à installer l'intégralité du projet en utilisant le bit pour jouer avec une démo en direct, et essayez les filateurs avant d'installer.

Définir la configuration de la régité NPM (une action unique):

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

Et utilisez votre gestionnaire de packages préféré:

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

Exemples d'utilisation

Exemple de fichier de module:

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

Exemple de fichier HTML du composant:

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

Un exemple complet de ce composant peut être trouvé ici.

? Développement

Vous pouvez voir les composants localement en clonant ce dépôt et en faisant les étapes suivantes:

Installez les dépendances de package.json , exécutez: npm install .
Exécutez l'application dans le mode de développement, exécutez: npm run start .