ดาวน์โหลด ng spinners

ng spinners

ส่วนประกอบของบุคคลที่สาม

Size property in circle and ring loaders

ดาวน์โหลด

Angular Spinners CSS Loaders (Vue, React)

คอลเลกชันที่น่าตื่นตาตื่นใจของส่วนประกอบสปินเนอร์เชิงมุมด้วย CSS บริสุทธิ์
สปินเนอร์เชิงมุมจะขึ้นอยู่กับการโหลดและจากทั่วเว็บ

? ไม่มีการนำเข้า CSS พิเศษ
✂การพึ่งพาเป็นศูนย์
? สปินเนอร์สามารถติดตั้งแยกกันได้

การสาธิตสด

เรียกดูส่วนประกอบและสำรวจอุปกรณ์ประกอบฉากด้วยบิต
ติดตั้งส่วนประกอบสปินเนอร์เชิงมุมเฉพาะด้วย NPM, เส้นด้ายหรือบิตโดยไม่ต้องติดตั้งโครงการทั้งหมด
ติดตั้งส่วนประกอบและการสาธิตสด

รายการของสปินเนอร์ - อินพุตและคุณสมบัติเริ่มต้น

แต่ละองค์ประกอบยอมรับเสา 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-Spinners

 npm i --save ng-spinners

เล่นและติดตั้งสปินเนอร์สำหรับ Angular ด้วยบิต

ติดตั้งส่วนประกอบ/โมดูลสปินเนอร์เชิงมุมเฉพาะด้วยบิต, NPM หรือเส้นด้ายโดยไม่ต้องติดตั้งโครงการทั้งหมดโดยใช้บิตเพื่อเล่นกับการสาธิตสดและลองใช้สปินเนอร์ก่อนที่จะติดตั้ง

ตั้งค่าการตั้งค่าการลงทะเบียน NPM (การดำเนินการครั้งเดียว):

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 >