Skip to content
Material Design spinner components for React.js.
TypeScript JavaScript
Branch: master
Clone or download
wadackel Merge pull request #76 from tsuyoshiwada/dependabot/npm_and_yarn/stor…

Bump @storybook/addon-storyshots from 5.1.4 to 5.1.10
Latest commit 1242f3f Jul 31, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github docs: Add Issue & Pull Request templates Jun 8, 2019
.storybook feat: Upgrade v2 Jun 8, 2019
examples feat: Upgrade v2 Jun 8, 2019
src feat: Upgrade v2 Jun 8, 2019
test feat: Upgrade v2 Jun 8, 2019
.editorconfig Initial commit Jun 30, 2016
.gitignore feat: Upgrade v2 Jun 8, 2019
LICENSE Initial commit Jun 30, 2016
babel.config.js feat: Upgrade v2 Jun 8, 2019
package.json v1.0.0 Jun 8, 2019
rollup.config.js feat: Upgrade v2 Jun 8, 2019
tsconfig.json feat: Upgrade v2 Jun 8, 2019
yarn.lock Bump @storybook/addon-storyshots from 5.1.4 to 5.1.10 Jul 31, 2019



Build Status npm version

Material Design spinner components for React.js.

Live example:

Table of Contents


You can install the react-md-spinner from npm.

$ npm i -S react-md-spinner
# or
$ yarn add react-md-spinner


  • 🚀 You can start using with zero configuration!
  • 🔧 Support to change of color, size, border and animation speed.
  • 💖 It can also be used in single color.
  • 🌐 Support Server-Side Rendering.

Getting Started

Basic Usage

Because it is made of 100% inline styles, you can start using it right away without setting.

import React from "react";
import MDSpinner from "react-md-spinner";

export const SpinnerExample: React.FC = () => (
    <MDSpinner />

Server-Side Rendering

The following is an example of Server-Side Rendering.
Please checkout examples directory for details.

The point is to use ssrBehavior.


Note: The following is pseudo code.


import React from "react";
import { render } from "react-dom";
import App from "./App";

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


import { ssrBehavior } from "react-md-spinner";

// ...

const html = (root: JSX.Element) => `<html lang="en">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <div id="app">${renderToString(root)}</div>
    <script defer src="/client.js"></script>

app.get("/", (_req, res) => {
  res.status(200).send(`<!doctype html>${renderer(<App />)}`);


import React from "react";
import MDSpinner from "react-md-spinner";

export const App: React.FC = () => (
    <MDSpinner />


You can use the following Props. All Props are Optional!


type: number
default: 28

Set the size (diameter) of the spinner circle.


type: number
default: undefined

Set the spinner border size of. By default, the appropriate size is calculated according to the value of size.


type: number
default: 1333

Set the animation duration (ms) of the spinner.


type: string
default: !rgb(66, 165, 245)

The color of the spinner. Can be set to any valid CSS string (hex, rgb, rgba).


type: string
default: rgb(239, 83, 80)

Same as above.


type: string
default: rgb(253, 216, 53)

Same as above.


type: string
default: rgb(76, 175, 80)

Same as above.


type: string
default: undefined

Same as above. Use this if the spinner should be in only one single color. The settings (props) for color1 ~ 4 will be ignored by setting this singleColor property.



In Server-Side Rendering you need to inject @keyframes inside the <head>.
react-md-spinner provides utilities to handle them.

  • ssrBehavior.getStylesheetString(): string
  • ssrBehavior.getStylesheetComponent(): React.ReactNode

As string output

import { ssrBehavior } from "react-md-spinner";

const html = () => `<!doctype html>
    <div id="app">
      // React stuff here

As React Components

import React from "react";
import { ssrBehavior } from "react-md-spinner";

const Html: React.FC = () => (
      <div id="app">{/* React stuff here */}</div>




We are always welcoming your contribution 👏

  1. Fork ( 🎉
  2. Create a feature branch ☕️
  3. Run test suite with the $ yarn test command and confirm that it passes ⚡️
  4. Commit your changes 📝
  5. Rebase your local changes against the master branch 💡
  6. Create new Pull Request 💌

Available Scripts

yarn test

Run unit test using Jest.

yarn lint

Run Lint of source code using ESLint.

yarn format

Run formatting using Prettier and ESLint's Fixer.

yarn build

Run build of TypeScript code.

yarn storybook

Run Storybook.


MIT © tsuyoshiwada

You can’t perform that action at this time.