A Simple Spinner and Loader Library for React

Last update: Apr 12, 2022

React-Spinner

A Simple Spinner and Loader Library

Have a look

How to use?

The NPM package is not released yet. You can clone the project and try out the component for now. Each Spinner/ Loader has its own Component Name. You can find the available Spinner components below.

Circular Spinner - <Spinner/>
Bubble Spinner (Dual Layers) = <DoubbleBoubble/>
Bar Loader = <BarLoader/>

Customization

Each spinner or loader component has its own style sheet. You can do whatever changes you want.

Props

Use the below Props to customize the spinner or loader

speed - Animation speed
customText - Custom text to display under the spinner or loader

<Spinner speed={5} customText={"Loading..."}/>

This repo is just released. NPM package will be available very soon with more icons. Stay tuned. Feel free to contribute.

GitHub

https://github.com/venushadilshan/react-spinner
You might also like...

React visual primitives with first-class TypeScript support and a tiny footprint.

tsstyled React visual primitives with first-class TypeScript support and a tiny footprint. TL;DR: This library is a styled-components rewrite that is

Apr 7, 2022

Imersão React.js 3º edição. Project using ReactJS, Next JS, and Styled Components for the week challenge by Alura. We created a social network inspired by Orkut.

Example app with styled-components This example features how you use a different styling solution than styled-jsx that also supports universal styles.

Jul 19, 2021

Dynamic Styles for React Native and Expo Web

Dynamic Styles for React Native and Expo Web

react-native-swag-styles Dynamic Styles for React Native and Expo Web Highlights Dynamic. Based on React Hook. It automatically re-renders when necess

May 17, 2022

CSS Maid 🧹 A tool made for React.js to clean up CSS default styling! Give your CSS a nice reset and style with less hassle!

CSS Maid 🧹 A tool made for React.js to clean up CSS default styling! Give your CSS a nice reset and style with less hassle!

CSS Maid 🧹 What is it? CSS Maid is a tool for React.js that helps clean up & reset default css! It resets default padding, remove text-decoration on

Sep 1, 2021

🏠 Airbnb website using React, Next.js and Tailwind CSS

🏠 Airbnb website using React, Next.js and Tailwind CSS

This example shows how to use Tailwind CSS (v2.2) with Next.js. It follows the steps outlined in the official Tailwind docs.

May 2, 2022

This repository allows you to create a React template component folder. It optionally includes scss and css files

Generate-React-Components - grc grc let you generate react components in typescript in a folder you specify and it will include .tsx, .scss, .css file

Nov 26, 2021

The simplest solution for content loading in React and styled-components.

styled-content-loader The simplest solution for content loading in React and styled-components. Getting Started npm install styled-components styled-c

Jul 13, 2021

Typograpy components for react and styled-components

Typograpy components for react and styled-components

styled-typography Typograpy components for react and styled-components styled-typography is a small set of components, using styled-components, to bet

May 1, 2022

A styled switch for React built using Emotion CSS and Framer motion

A styled switch for React built using Emotion CSS and Framer motion

A styled switch for React built using Emotion CSS and Framer motion

Aug 27, 2021
Minimal and performant React component library built on styled-components

Minimal and performant React component library built on styled-components

Jan 3, 2022
The UI design language and React library for Conversational UI
The UI design language and React library for Conversational UI

The UI design language and React library for Conversational UI Website:https://chatui.io English | 简体中文 Features ?? Best Practices: The best practice

Apr 1, 2022
Material-tailwind - An easy-to-use components library for Tailwind CSS and Material Design
Material-tailwind - An easy-to-use components library for Tailwind CSS and Material Design

Material-tailwind - An easy-to-use components library for Tailwind CSS and Material Design

May 10, 2022
👩‍🎤 CSS-in-JS library designed for high performance style composition
👩‍🎤 CSS-in-JS library designed for high performance style composition

emotion The Next Generation of CSS-in-JS Emotion 11 has been released ?? See the blog post Emotion is a performant and flexible CSS-in-JS library. Bui

May 14, 2022
Compile-time atomic CSS library.

pieces-js Compile-time atomic CSS library. Heavily inspired by stylex and linaria. Install Usage Dynamic styles Setup with bundler with Next.js with V

Mar 9, 2022
Simple Portfolio Using React Hooks & Styled Components
Simple Portfolio Using React Hooks & Styled Components

Said MOUNAIM To view a live example, click here. Getting Started These instructi

Mar 20, 2022
A simple javascript utility for conditionally joining classNames together

Classnames A simple JavaScript utility for conditionally joining classNames together. Install with npm, Bower, or Yarn: # via npm npm install classnam

May 15, 2022
A react component available on npm to easily link to your project on github and is made using React, TypeScript and styled-components.

fork-me-corner is a react component available on npm to easily link to your project on github and is made using React, TypeScript and styled-components.

Feb 27, 2022
Whirlwind is a utility-first styling framework specifically designed for React Native. It is heavily inspired by Tachyons and Tailwind CSS and uses low-level building blocks for rapidly building custom designs.

React Native Whirlwind ??️ A utility-first CSS framework designed for React Native. Whirlwind is a utility-first CSS framework specifically designed f

May 6, 2022
CSS media queries in react - for responsive design, and more.

react-responsive Information Package react-responsive Description Media queries in react for responsive design Browser Version >= IE6* Demo The best s

May 12, 2022