1. First, we need fresh reactjs setup, and for that, we need to run below commands into out terminal, and also we should have latest node version installed on our system:
npx create-react-app my-awesome-project
cd my-awesome-project
npm start
2. Now we need to run below commands into our project terminal to get bootstrap and related modules into our reactjs application:
npm install [email protected] --save
npm start //For start project again
3. Finally for the main output, we need to add below code into our my-awesome-project/src/App.js file or if you have fresh setup then you can replace my-awesome-project/src/App.js file code with below code:
import React from 'react';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<div>
<div class="pageloader gray-bg">
<div class="loader">
<span>Bootdey</span>
<div class="sp-hydrogen"></div>
</div>
</div>
<div class="container bootstrap snippets bootdeys">
<div class="jumbotron">
<h1 id="loading-text">Loading...</h1>
</div>
</div>
</div>
);
}
export default App;
4. Now we need to add below code into our my-awesome-project/src/App.css file :
body{
margin-top:20px;
}
.gray-bg{
background:#eee;
}
.pageloader {
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
z-index: 1000000;
opacity:1;
overflow: hidden;
display: table;
}
.loader {
text-align: center;
display: table-cell;
vertical-align: middle;
}
.loader span{
color: #1ABC9C;
font-weight: 300;
font-size: 60px;
display: block;
margin-top: 40px;
}
.sp-hydrogen {
width: 96px;
height: 96px;
clear: both;
margin: 60px auto;
position: relative;
border: 3px #1ABC9C solid;
border-radius: 50%;
-webkit-animation: spHydro 0.7s infinite linear;
animation: spHydro 0.7s infinite linear;
}
.sp-hydrogen:before, .sp-hydrogen:after {
content: '';
position: absolute;
width: 30px;
height: 30px;
background-color: #252830;
border-radius: 50%;
}
.sp-hydrogen:before {
top: calc( 50% - 15px );
left: calc( 50% - 15px );
}
.sp-hydrogen:after {
top: -3px;
left: -3px;
}
@-webkit-keyframes spHydro {
from {
-webkit-transform: rotate(0deg);
}
to {
-webkit-transform: rotate(359deg);
}
}
@keyframes spHydro {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
@-webkit-keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut;
}