React.js Blueprint Spinner Component Props

Last Updated : 22 Jul, 2022

React.js Blueprint is a front-end UI toolkit. It is very optimized and popular for building interfaces that are complex data-dense for desktop applications.

React.js Blueprint Spinner Component displays progress in a circular way.

Blueprint Spinner Component Props:

className: It is a space-delimited list of class names to pass along to a child element.
intent: It defines the visual intent color to apply to the element.
size: It denotes the size of the spinner in pixels.
tagName: It denotes the HTML tag for the two wrapper elements.
value: It denotes a value between 0 and 1 (inclusive) representing how far along the operation is.

Syntax:

<Spinner />

Prerequisite:

Introduction and installation ReactJS

Creating React Application and Module installation:

Step 1: Create the react project folder, for that open the terminal, and write the command npm create-react-app folder name, if you have already installed create-react-app globally. If you haven’t, install create-react-app globally using the command npm -g create-react-app or install locally by npm i create-react-app.

npm create-react-app project

Step 2: After creating your project folder(i.e. project), move to it by using the following command.

cd project

Step 3: now install the dependency by using the following command:

npm install @blueprintjs/core

Project Structure: It will look like this:

Example 1: We are importing the Spinner Component from "@blueprintjs/core". To apply the default styles of the components we are importing "@blueprintjs/core/lib/css/blueprint.css".

We are adding three <Spinner/> components, the first one we are keeping as it is. For the second one, we are passing the props size and intent. For the next one, passed the props size, value, and intent.

App.js

import "@blueprintjs/core/lib/css/blueprint.css";
import { Spinner } from "@blueprintjs/core";

function App() {
    return (
        <div className="App">
            <h4>ReactJS Blueprint Spinner Component</h4>
            <Spinner /> <br />
            <Spinner size={50} intent="warning" /> <br />
            <Spinner size={80} value={0.8} intent="danger" /> 
            <br />
        </div>
    );
}

export default App;

Step to Run Application: Run the application using the following command from the project's root directory.

npm start

Output:

Example 2: We are adding three <Spinner/> components, the first one we passed tagName as 'button' and className as 'bp4-intent-primary'. For the second one, tagName as 'a', size equals 80 and className as 'bp4-intent-success'. For the next one, passed the props tagName as 'span' and className as 'bp4-intent-danger'.

App.js

import "@blueprintjs/core/lib/css/blueprint.css";
import { Spinner } from "@blueprintjs/core";

function App() {
    return (
        <div className="App">
            <h4>ReactJS Blueprint Spinner Component</h4>
            <Spinner tagName="button" 
                className="bp4-intent-primary" /> <br />
            <Spinner tagName="a" size={80} 
                className="bp4-intent-success" /> <br />
            <Spinner tagName="span" 
                className="bp4-intent-danger" /> <br />
        </div>
    );
}

export default App;