Скачать ng spinners - Скачать исходный код ng spinners

ng spinners

Сторонние компоненты

Size property in circle and ring loaders

Скачать

Angular Spinners CSS Погрузчики (Vue, React)

Удивительная коллекция компонентов Angular Spinners с чистыми CSS.
Угловые прядильщики основаны на загрузке .IO и со всего Интернета.

? Нет дополнительного импорта CSS
✂ Наблюдающие зависимости
? Спиннеры могут установить отдельно

Живая демонстрация

Просмотрите компоненты и изучите их реквизит.
Установите определенный угловой компонент спиннера с помощью NPM, пряжи или бита без необходимости установить весь проект.
Установите компоненты и живую демонстрацию

Список спиннеров - свойство ввода и по умолчанию

Каждый компонент принимает color опору, и лишь немногие принимают также size .
color опора по умолчанию #7f58af .
Компонент, который принимает size Prop, имеет размер по умолчанию в Pixel.

Спиннер	Цвет: строка	Размер: номер
`<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-Spinners

 npm i --save ng-spinners

Играть и установить спиннеры для угловых с битом

Установите определенный компонент/модуль Spinner с помощью BIT, NPM или пряжи, не устанавливая весь проект, используя бит для игры с Live Demo, и попробуйте Spinners перед установкой.

Установите 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 >