Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details

All Projects → adexin → Spinners React

adexin / Spinners React

Licence: mit

Lightweight SVG/CSS spinners for React

Programming Languages

typescript

32286 projects

Labels

css react reactjs svg react-components loader loading progress spinner spinners loading-spinner

Projects that are alternatives of or similar to Spinners React

Whirl

CSS loading animations with minimal effort!

Stars: ✭ 774 (+204.72%)

Mutual labels: loader, loading, progress, spinner, spinners, loading-spinner

spinners-angular

Lightweight SVG/CSS spinners for Angular

Stars: ✭ 21 (-91.73%)

Mutual labels: progress, loader, spinner, loading, spinners

react-awesome-loaders

🚀 High quality, super responsive and completely customisable Loading Animations to insert into your website with single line of code.

Stars: ✭ 146 (-42.52%)

Mutual labels: progress, loader, react-components, spinner, spinners

spinnies

Node.js module to create and manage multiple spinners in command-line interface programs

Stars: ✭ 111 (-56.3%)

Mutual labels: progress, spinner, loading, spinners, loading-spinner

React Circle

Renders a svg circle + progress, it just works 💘

Stars: ✭ 925 (+264.17%)

Mutual labels: svg, loading, progress, spinner

Vue Loaders

Vue + loaders.css

Stars: ✭ 127 (-50%)

Mutual labels: loader, loading, progress, spinner

Vue Wait

Complex Loader and Progress Management for Vue/Vuex and Nuxt Applications

Stars: ✭ 1,869 (+635.83%)

Mutual labels: loader, loading, progress, spinner

busy-load

A flexible loading-mask jQuery-plugin

Stars: ✭ 76 (-70.08%)

Mutual labels: loader, spinner, loading, loading-spinner

Vue Loading Overlay

Vue.js component for full screen loading indicator 🌀

Stars: ✭ 784 (+208.66%)

Mutual labels: loader, loading, spinner

Create Content Loader

✏️ Tool to create your own react-content-loader easily.

Stars: ✭ 937 (+268.9%)

Mutual labels: svg, loader, loading

React Nprogress

⌛️ A React primitive for building slim progress bars.

Stars: ✭ 173 (-31.89%)

Mutual labels: loading, progress, spinner

Ng Block Ui

Block UI Loader/Spinner for Angular

Stars: ✭ 135 (-46.85%)

Mutual labels: loader, loading, spinner

Ngx Ui Loader

Multiple Loaders / spinners and Progress bar for Angular 5, 6, 7 and 8+

Stars: ✭ 368 (+44.88%)

Mutual labels: loader, loading, spinner

Respin

React SVG loading spinner based on jxnblk.com/loading

Stars: ✭ 21 (-91.73%)

Mutual labels: svg, spinner, loading-spinner

Alive Progress

A new kind of Progress Bar, with real-time throughput, ETA, and very cool animations!

Stars: ✭ 2,940 (+1057.48%)

Mutual labels: progress, spinner, spinners

Awloader

AWLoader is a UI Component that allows you to integrate loader that fits your needs within your app.

Stars: ✭ 11 (-95.67%)

Mutual labels: loader, loading, progress

Aframe Preloader Component

A preloading bar that automatically displays while scene assets load.

Stars: ✭ 27 (-89.37%)

Mutual labels: loader, spinner, spinners

Iprogresshud

An elegant, lightweight and responsive progress HUD for iOS app with very simple usage. Available 32 indicators by NVActivityIndicatorView.

Stars: ✭ 66 (-74.02%)

Mutual labels: loading, progress, loading-spinner

Swiftloader

A simple and beautiful activity indicator written in Swift

Stars: ✭ 116 (-54.33%)

Mutual labels: loader, progress, spinner

Vue Element Loading

⏳ Loading inside a container or full screen for Vue.js

Stars: ✭ 234 (-7.87%)

Mutual labels: loader, loading, spinner

View All Similar Projects ➔

Spinners React

9 awesome typescript-aware lightweight spinners built as react.js components.

Demo

View demo with examples of react.js component usage.

Getting started

Installation

$ npm install spinners-react

or add it directly to HTML page

Usage

import { SpinnerCircular } from 'spinners-react';

<SpinnerCircular />

Hide spinner

<SpinnerCircular enabled={false} />

List of components

Component	Component	Component
`SpinnerCircular`	`SpinnerCircularFixed`	`SpinnerCircularSplit`
`SpinnerRound`	`SpinnerRoundOutlined`	`SpinnerRoundFilled`
`SpinnerDotted`	`SpinnerInfinity`	`SpinnerDiamond`

Properties

The following optional properties are available. All extra props will be passed to the component's root SVG element.

Property	Default value	Type	Description
size	`50`	number or string	Set the size as number of pixels or any valid CSS string (e.g. `size="100%"`).
thickness	`100`	number	Set lines width as a percentage of default thickness.
сolor	`'#38ad48'`	string	Set the color. Can be set to any valid CSS string (hex, rgb, rgba).
secondaryColor	`'rgba(0,0,0,0.44)'`	string	Set the secondary color. Can be set to any valid CSS string (hex, rgb, rgba).
speed	`100`	number	Set the animation speed as a percentage of default speed.
enabled	`true`	boolean	Show/Hide the spinner.
still	`false`	boolean	Disable/Enable spinner animation.
style	undefined	object	Pass CSS styles to the root SVG element

Server Side Rendering

While the library works with SSR, the spinner's animation CSS will be attached to the head only on the hydrate phase, which means the spinners will start animating only after the page is fully loaded. To work around this, include the needed css in your bundle.css manually:

/* App.css */

/* to load animation for a specific spinner */
@import "~spinners-react/lib/SpinnerCircular.css";

/* to load animations for all spinners at once */
@import "~spinners-react/lib/index.css";

Minimizing Bundle Size

The library is thin and do not rely on any style library / runtime to be used. To reduce the bundle size even more load only the used components. If you're using ES6 modules and a bundler that supports tree-shaking you can safely use named imports:

import { SpinnerCircular } from 'spinners-react';

It that's not the case you're able to use path imports to avoid pulling in unused spinners:

// ESM
import { SpinnerCircular } from 'spinners-react/lib/esm/SpinnerCircular';
// or CJS
import { SpinnerCircular } from 'spinners-react/lib/cjs/SpinnerCircular';
// or UMD
import { SpinnerCircular } from 'spinners-react/lib/umd/SpinnerCircular';

UMD bundle usage

<!doctype html>
<html>
  <head>
    <script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
    <!-- to load a specific spinner -->
    <script src="https://unpkg.com/spinners-react/lib/umd/SpinnerCircular.min.js"></script>
    <!-- to load all spinners at once -->
    <script src="https://unpkg.com/spinners-react/lib/umd/index.min.js"></script>
  </head>

  <body>
    <div id="root"></div>
    <script>
      ReactDOM.render(
        React.createElement(SpinnersReact.SpinnerCircular),
        document.getElementById('root')
      );
    </script>
  </body>
</html>

Browsers support

Firefox	Chrome	Safari	Opera	Edge
last 2 versions	last 2 versions	last 2 versions	last 2 versions	last 2 versions*

* - Legacy EdgeHTML Edge (i.e. 42-44) is also supported except for SpinnerRound and SpinnerRoundOutlined.

Issues and Bugs

Let us know if you found a bug!

Spinners for other frameworks

spinners-angular

Support and Contact

Have a quick question or need some help? Please do not hesitate to contact us via email at [email protected].

Credits

This component is developed by consulting agency Adexin.

License

Spinners React is released under MIT license. You are free to use, modify and distribute this software, as long as the copyright header is left intact.

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].

Stars: ✭ 254

Visit Git Page 🔗Visit User Page 🔗Visit Issues Page (0) 🔗