How To Use Semantic UI Loader And Stepper In ReactJS

Introduction

In this article we will learn about semantic UI Loader and stepper. Semantic UI is a UI component framework for building resposive user interfaces. In previous articles we learned how to install semantic UI in React and basic components of Semantic UI.

You can check my previous articles from the below links,

Prerequisites

We should have a basic knowledge of HTML and ReactJS.
Visual Studio Code installed
Node and NPM installed

Step 1

Let's create a new React project by using the following command:

npx create-react-app reduxapp

Open this project in Visual Studio Code and install semantic UI using the following command.

npm install semantic-ui-react

Now open index.js file and import semantic UI css.

import 'semantic-ui-css/semantic.min.css'

Now go to src folder and create a new component 'Loaderdemo.js'. Add the following code in this component:

import React, { Component } from 'react'
import { Dimmer, Loader, Image, Segment } from 'semantic-ui-react'
export class Loaderdemo extends Component {
render() {
return (
<div>
<div class="ui blue inverted three item menu">
<a class="item">Semantic UI Loader</a>
</div>
<Segment>
<Dimmer active>
<Loader />
</Dimmer>
<Image src='https://react.semantic-ui.com/images/wireframe/short-paragraph.png' />
</Segment>
</div>
)
}
}
export default Loaderdemo

Add a reference of this component in app.js file

import React from 'react';
import './App.css';
import Loaderdemo from './Loaderdemo'
function App() {
return (
<div className="App">
<Loaderdemo/>
</div>
);
}
export default App;

Now, run the project by using 'npm start' command and check the result.

How To Use Semantic UI Loader And Stepper In ReactJS

Now go to src folder and create another component 'Stepdemo.js'. Add the following code in this component:

import React, { Component } from 'react'
import { Icon, Step } from 'semantic-ui-react'
import { Button,Divider,Grid,Header,Search,
} from 'semantic-ui-react'
export class Stepdemo extends Component {
render() {
return (
<div>
<div class="ui blue inverted three item menu">
<a class="item">Semantic UI Step</a>
</div>
<Step.Group size='small'>
<Step>
<Icon name='truck' />
<Step.Content>
<Step.Title>Shipping</Step.Title>
<Step.Description>Choose your shipping options</Step.Description>
</Step.Content>
</Step>
<Step active>
<Icon name='payment' />
<Step.Content>
<Step.Title>Billing</Step.Title>
<Step.Description>Enter billing information</Step.Description>
</Step.Content>
</Step>
<Step disabled>
<Icon name='info' />
<Step.Content>
<Step.Title>Confirm Order</Step.Title>
<Step.Description>Verify order details</Step.Description>
</Step.Content>
</Step>
</Step.Group>
</div>
)
}
}
export default Stepdemo

Add a reference of this component in app.js file

import React from 'react';
import './App.css';
import Stepdemo from './Stepdemo'
function App() {
return (
<div className="App">
<Stepdemo/>
</div>
);
}
export default App;

Now, run the project by using 'npm start' command and check the result.

Summary

In this article, you learned semantic UI Loader and stepper components of semantic UI in a ReactJs application.