Material Design spinner components for React.js

by React

react-md-spinner

Material Design spinner components for React.js.

Live Demo

https://tsuyoshiwada.github.io/react-md-spinner/

Install

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

$ npm install react-md-spinner

Features

  • You can start using with zero configuration!
  • Support to change of color and size 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, { Component } from "react";
import MDSpinner from "react-md-spinner";

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

Server-Side Rendering

The following is an example of Server-Side Rendering.

Please checkout examples directory for details.

The point is to use ssrBehavior and specify userAgent.

Note: It is a different code from the actual example.

Examples

Client-Side:

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

render(
  <App userAgent={window.navigator.userAgent} />,
  document.getElementById("app")
);

Server-Side:

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

// ...

const html = (root, userAgent) => `<!DOCTYPE html>
  <html lang="en">
  <head>
    ${ssrBehavior.getStylesheetString(userAgent)}
  </head>
  <body>
    <div id="app">${renderToString(root)}</div>
    <script src="./bundle.js"></script>
  </body>
</html>`;

app.get("/", (req, res) => {
  const userAgent = req.headers["user-agent"];

  res.status(200).send(html(
    <App userAgent={userAgent} />,
    userAgent
  ));
});

App:

class App extends Component {
  render() {
    return <MDSpinner
      userAgent={this.props.userAgent}
    />;
  }
}

GitHub