Material Design spinner components for React.js.
Live example: https://tsuyoshiwada.github.io/react-md-spinner/
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.
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 = () => (
<div>
<MDSpinner />
</div>
);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.
Client-Side:
import React from "react";
import { render } from "react-dom";
import App from "./App";
render(<App />, document.getElementById("app"));Server-Side:
import { ssrBehavior } from "react-md-spinner";
// ...
const html = (root: JSX.Element) => `<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
${ssrBehavior.getStylesheetString()}
</head>
<body>
<div id="app">${renderToString(root)}</div>
<script defer src="/client.js"></script>
</body>
</html>`;
app.get("/", (_req, res) => {
res.status(200).send(`<!doctype html>${renderer(<App />)}`);
});App:
import React from "react";
import MDSpinner from "react-md-spinner";
export const App: React.FC = () => (
<div>
<MDSpinner />
</div>
);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(): stringssrBehavior.getStylesheetComponent(): React.ReactNode
import { ssrBehavior } from "react-md-spinner";
const html = () => `<!doctype html>
<head>
${ssrBehavior.getStylesheetString()}
</head>
<body>
<div id="app">
// React stuff here
</div>
</body>
</html>`;import React from "react";
import { ssrBehavior } from "react-md-spinner";
const Html: React.FC = () => (
<html>
<head>{ssrBehavior.getStylesheetComponent()}</head>
<body>
<div id="app">{/* React stuff here */}</div>
</body>
</html>
);See CHANGELOG.md
We are always welcoming your contribution 👏
- Fork (https://github.com/tsuyoshiwada/react-md-spinner) 🎉
- Create a feature branch ☕
- Run test suite with the
$ yarn testcommand and confirm that it passes ⚡ - Commit your changes 📝
- Rebase your local changes against the
masterbranch 💡 - Create new Pull Request 💌
Run unit test using Jest.
Run Lint of source code using ESLint.
Run formatting using Prettier and ESLint's Fixer.
Run build of TypeScript code.
Run Storybook.