Step Indicator

Developer
Tim Cheng
Size
3,840 Kb
Views
16,192
  1. Step Indicator Previews
  2. Step Indicator HTML Codes
  3. Step Indicator CSS Codes
  4. Step Indicator JS Codes

How do I make an step indicator?

What is a step indicator? How do you make a step indicator? This script and codes were developed by Tim Cheng on 17 November 2022, Thursday.

Step Indicator Previews
IQ Test

Step Indicator - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Step Indicator</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="app"></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Step Indicator - Script Codes CSS Codes

html,
body,
#app { height: 100%; width: 100%;
}
body { background: #181c20; color: #edeff6;
}
.cb-table { display: table; height: 100%; width: 100%;
}
.cb-table-cell { display: table-cell; vertical-align: middle; text-align: center;
}
.cb-content { display: inline-block;
}
.step-indicator { white-space: nowrap;
}
.step-item { display: inline-block; margin-right: -18px;
}
.step-item-part { display: inline-block; height: 40px;
}
.step-item-content { display: table; background: #1d2227; height: 100%; width: 180px;
}
.step-item-content-number { display: table-cell; vertical-align: middle; width: 22px; padding-left: 20px; padding-right: 15px;
}
.step-item-content-text { display: table-cell; vertical-align: middle; text-align: left;
}
.step-item-content .step-number-con { display: inline-block; width: 22px; height: 22px; background: #49a5ff; border-radius: 50%; text-align: center;
}
.step-item-content .step-number { line-height: 22px;
}
.top-triangle { width: 0; height: 0; border-top: 20px solid #1d2227; border-left: 24px solid transparent; box-sizing: border-box;
}
.bottom-triangle { width: 0; height: 0; border-bottom: 20px solid #1d2227; border-left: 24px solid transparent;
}
.right-triangle { width: 0; height: 0; border-left: 24px solid #1d2227; border-bottom: 20px solid transparent; border-top: 20px solid transparent;
}
.step-item.active .step-item-content { background: #2d3237;
}
.step-item.active .top-triangle { border-top-color: #2d3237;
}
.step-item.active .bottom-triangle { border-bottom-color: #2d3237;
}
.step-item.active .right-triangle { border-left-color: #2d3237;
}

Step Indicator - Script Codes JS Codes

'use strict';
var StepIndicator = function StepIndicator(props) { var stepItems = []; for (var i = 1; i <= props.totalSteps; i++) { var activeClass = i === props.curStep ? 'active' : ''; stepItems.push(React.createElement( 'div', { className: 'step-item ' + activeClass, key: i }, i > 1 && React.createElement( 'div', { className: 'step-item-part' }, React.createElement('div', { className: 'top-triangle' }), React.createElement('div', { className: 'bottom-triangle' }) ), React.createElement( 'div', { className: 'step-item-part' }, React.createElement( 'div', { className: 'step-item-content' }, React.createElement( 'div', { className: 'step-item-content-number' }, React.createElement( 'div', { className: 'step-number-con' }, React.createElement( 'span', { className: 'step-number' }, i ) ) ), React.createElement( 'div', { className: 'step-item-content-text' }, 'Step ' + i ) ) ), React.createElement( 'div', { className: 'step-item-part' }, React.createElement('div', { className: 'right-triangle' }) ) )); } return React.createElement( 'nav', { className: 'step-indicator' }, stepItems );
};
StepIndicator.propTypes = { totalSteps: React.PropTypes.number, curStep: React.PropTypes.number
};
var CenterBox = function CenterBox(props) { return React.createElement( 'div', { className: 'cb-table' }, React.createElement( 'div', { className: 'cb-table-cell' }, React.createElement( 'div', { className: 'cb-content' }, props.children ) ) );
};
var Application = function Application() { return React.createElement( CenterBox, null, React.createElement(StepIndicator, { totalSteps: 3, curStep: 2 }) );
};
React.render(React.createElement(Application, null), document.getElementById('app'));
Step Indicator - Script Codes
Step Indicator - Script Codes
Home Page Home
Developer Tim Cheng
Username tmchng
Uploaded November 17, 2022
Rating 3
Size 3,840 Kb
Views 16,192
Do you need developer help for Step Indicator?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Tim Cheng (tmchng) Script Codes
Name
Three Value Slider Bar Input
React datepicker
Gradient Stops
Line animation
Angularjs Timer
International Phone Input
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!