Welcome folks today in this blog post we will be showing the svg and css loading spinners
in browser using the spinners-react
library in javascript. All the full source code of the application is shown below.
Get Started
In order to get started you need to make a new react.js
project using the below command as shown below
npx create-react-app sampleapp
cd sampleapp
And after that you need to install the below library using the below command as shown below
npm i spinners-react
And after that you need to modify the App.js
file and copy paste the following code
App.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import React, { Component } from 'react' import { render } from 'react-dom' import { SpinnerCircular } from 'spinners-react'; class App extends Component { render() { return ( <div> <SpinnerCircular size={50} thickness={100} speed={110} color="#fff" secondaryColor="#000" /> </div> ) } } render(<App />, document.getElementById('root')) |
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 |