Material Design spinner components for React.js.
JavaScript Other
Latest commit cd8456d Sep 23, 2016 @tsuyoshiwada Release 0.1.0

Build Status npm version David David - dev License

Material Design spinner components for React.js.

DEMO Screen Shot

See demo page:


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

$ npm install react-md-spinner


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

import React, { Component } from "react";
import MDSpinner from "react-md-spinner";

export default class SpinnerExample extends Component {
  render() {
    return (
        <MDSpinner />


You can set the following properties.

Property Type Default Description
className string undefined Set the className for the component.
style object undefined Set the root element style in the component.
size number, string 28 Set the spinner size of.
duration number 1333 Set the spinner of the animation duration.
color1 string color1 rgb(66, 165, 245) The color of spinner to set the CSS valid string.
color2 string color2 rgb(239, 83, 80) Same as above
color3 string color3 rgb(253, 216, 53) Same as adove
color4 string color4 rgb(76, 175, 80) Same as adove
singleColor string undefined Same as adove. Designation of color1 ~ 4 by setting the singleColor property is ignored.
userAgent string undefined Set the value of the current User Agent when generating inline styles, so that server-rendered markup is identical to client-rendered markup


Released under the MIT Licence




Initialization of the project.

$ cd /your/project/dir
$ git clone

Install some dependencies.

$ npm install

Start the development and can you see demo page (access to the http://localhost:3000/).

$ npm start

Run lint and testing.

$ npm test

Generates build file.

$ npm run build


Thank you for your interest in react-md-spinner.js.
Bugs, feature requests and comments are more than welcome in the issues.

Before you open a PR:

Be careful to follow the code style of the project. Run npm test after your changes and ensure you do not introduce any new errors or warnings. All new features and changes need documentation.