React.js spinners-react Example to Display SVG & CSS Loading Spinners in Browser Using Javascript

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

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'))

import React, { Component } from 'react'

import { render } from 'react-dom'

import { SpinnerCircular } from 'spinners-react';

class App extends Component {

render() {

return (

<div>

</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