All Projects → tienpham94 → React Awesome Spinners

tienpham94 / React Awesome Spinners

Licence: mit
Awesome spinners for React 👋 ⚛ Built with styled-components 💅

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to React Awesome Spinners

Spinners React
Lightweight SVG/CSS spinners for React
Stars: ✭ 254 (+7.17%)
Mutual labels:  loading, spinners
spinnies
Node.js module to create and manage multiple spinners in command-line interface programs
Stars: ✭ 111 (-53.16%)
Mutual labels:  loading, spinners
ZXLoadingView
🍕ZXLoadingView is an iOS progress-activity
Stars: ✭ 14 (-94.09%)
Mutual labels:  loading, spinners
Whirl
CSS loading animations with minimal effort!
Stars: ✭ 774 (+226.58%)
Mutual labels:  loading, spinners
spinners-angular
Lightweight SVG/CSS spinners for Angular
Stars: ✭ 21 (-91.14%)
Mutual labels:  loading, spinners
React Native Animated Spinkit
A collection of loading indicators for React Native
Stars: ✭ 186 (-21.52%)
Mutual labels:  loading, spinners
Styled Loaders
Loaders Built with Preact and Styled Components
Stars: ✭ 212 (-10.55%)
Mutual labels:  styled-components
React World
✨🌌 A different web experience in 8 bit React.js World
Stars: ✭ 230 (-2.95%)
Mutual labels:  styled-components
Uigradients
Gradients-as-a-react-component™
Stars: ✭ 211 (-10.97%)
Mutual labels:  styled-components
Styled Components Vs Emotion
a short doc comparing the popular CSS-in-JS libraries styled-components and emotion
Stars: ✭ 204 (-13.92%)
Mutual labels:  styled-components
React Loading
Build a smooth and lightweight react component loading with css 🎉 .
Stars: ✭ 234 (-1.27%)
Mutual labels:  styled-components
Is Loading
Simple library to show visual feedback when loading data or any action that would take time
Stars: ✭ 232 (-2.11%)
Mutual labels:  loading
Govuk React
An implementation of the GOV.UK Design System in React using CSSinJS
Stars: ✭ 219 (-7.59%)
Mutual labels:  styled-components
Bancointer
Redesign of Banco Inter's Internet Banking
Stars: ✭ 216 (-8.86%)
Mutual labels:  styled-components
Styled Email Components
💌 styled-components for emails
Stars: ✭ 231 (-2.53%)
Mutual labels:  styled-components
Music163 React
🔥基于React全家桶开发:「网易云音乐PC端项目」实战
Stars: ✭ 209 (-11.81%)
Mutual labels:  styled-components
Vue Content Loader
SVG component to create placeholder loading, like Facebook cards loading.
Stars: ✭ 2,790 (+1077.22%)
Mutual labels:  loading
Styled Components Spacing
Responsive margin and padding components for styled-components 💅.
Stars: ✭ 209 (-11.81%)
Mutual labels:  styled-components
Next Blog Firestore
Example of blog built with React, Next.js, Firebase Firestore, Styled-Component, Mobx State Tree and other cool technologies
Stars: ✭ 219 (-7.59%)
Mutual labels:  styled-components
React Spinners Css
Amazing collection of React spinners components with pure css
Stars: ✭ 232 (-2.11%)
Mutual labels:  spinners

react-awesome-spinners

NPM version Build Status Coverage Status minified-size js-standard-style MIT License

Loading spinners for React, built with styled-components.

Demo

react-awesome-spinners

Installation

npm

npm i react-awesome-spinners

yarn

yarn add react-awesome-spinners

Usage

  1. Import any spinner
import { Ring } from 'react-awesome-spinners'
  1. Use it as usual
import React, { useState } from "react";
import ReactDOM from "react-dom";
import { Ring } from "react-awesome-spinners";

const App = () => {
  const [loading, setLoading] = useState(true)
    
  return (
      loading && <Ring />
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

Default Props

Common default props for all loaders:

size: 64,
color: '#00bfff',
sizeUnit: 'px'

Peer dependencies

  • React (of course ⛵️)
  • styled-components

Examples

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].