[React] 무료로 사용할 수 있는 스피너 라이브러리 Loaders

• 사용자에게 api 호출 등 액션이 발생하면 데이터를 내려받고 있다는 것을 알려주기 위해 스피너를 사용하여 로딩 중인 것을 알려줄 수 있다.
• mui progress 로 해당 기능을 구현해 보았지만 한정적인 디자인이라서 새로운 스피너 ui가 필요했다.

https://uiball.com/loaders

https://www.npmjs.com/package/@uiball/loaders

@uiball/loaders

👩🏻‍💻 Loaders

• 리액트 프로젝트에서 사용할 수 있는 가벼운 loaders.
• 특징
  • 24개의 타입. 실제 프로젝트에서 사용하기에 간단하다.
  • 사용자 정의 가능. 디자인에 맞게 크기, 색상, 선 두께 및 애니메이션 속도 설정가능.
  • 1KB의 작은 크기.
  • GIF가 아닌 HTML 및 CSS로 제작. 몇 개의 로더는 SVG로도 사용가능.
  • 종속성 제로. 걱정 제로.

📢 사용방법

NPM
npm install @uiball/loaders

Yarn
yarn add @uiball/loaders

• 사용방법은 매우 간단하다.
• react에서 사용할 경우에는 설치 후, 홈페이지에 있는 예제코드를 사용할 곳에 컴포넌트로 가져가면 된다.
• 그 외 html, css 코드도 함께 제공한다.
• 사이즈나 속도는 속성 값을 변경해주기만 하면 된다.
• mui에서 제공하는 ui들은 mui에서 제공하는 일정한 틀 안에서 특정 요소를 변경할 수가 있었는데, 그에 비해 loaders는 커스텀을 자유롭게 할 수 있다는 점에서 매우 좋은 라이브러리라고 생각된다.