React Progress Bar
How do I make an react progress bar?
What is a react progress bar? How do you make a react progress bar? This script and codes were developed by Rafael Abensur on 12 September 2022, Monday.
React Progress Bar - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>React Progress Bar</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='css/9a5ecf2380448bc1a0825a3cb.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="app"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
React Progress Bar - Script Codes CSS Codes
.pb { background: #fff; display: flex; flex-flow: column wrap; min-height: 100vh; &__header { @include material-box-shadow(1); background: $blue-80; flex: 0 4rem; h1 { -webkit-font-smoothing: antialiased; color: #fff; font-family: $font; line-height: 4rem; margin: 0; text-align: center; } } &__main { flex: 0 auto; margin: 7.5rem 0 4rem; } &__footer { align-items: flex-start; display: flex; flex-flow: row wrap; flex: 1; justify-content: space-around; text-align: center; button { @include material-box-shadow(1); -webkit-font-smoothing: antialiased; background: $purple; border: none; color: #fff; flex: 0 45%; font-family: $font; font-size: 2rem; max-width: 15rem; padding: 1rem 0; } } &__container { display: flex; flex-flow: row wrap; justify-content: space-between; width: 100%; } &__info { color: $gray-40; flex: 1 calc(100% / 3); font-size: 1.25rem; line-height: 1.25; position: relative; text-align: center; transition: color 0.3s ease; width: calc(100% / 3); &--current { color: $gray-90; } &--upcoming { color: $gray-60; } &:before { color: $blue-40; content: '\2713'; display: block; font-size: 1.5rem; left: 50%; line-height: 1rem; position: absolute; top: -1.5rem; transform: translateX(-50%); transition: opacity 0.3s ease; } &--current:before, &--upcoming:before { opacity: 0; } } &__progress { margin: 0 auto; width: calc(2 * 100% / 3); &--0 { .pb__bar:before { width: 0; } } &--1 { .pb__bar:before { animation: growHalfWidth 1.5s ease; animation-fill-mode: forwards; } } &--2 { .pb__bar:before { animation: growFullWidth 1.5s ease; animation-fill-mode: forwards; } } } &__bar { background: #eee; box-shadow: inset 0 1px 3px rgba(#000, 0.25); display: flex; flex-flow: row wrap; height: 0.75rem; justify-content: space-between; position: relative; top: 1rem; &:before { background: linear-gradient(to right, $blue-60, $blue-90); content: ''; height: 100%; position: absolute; transition: width; will-change: width; } } &__dot { background: $blue-60; border-radius: 100%; border: 4px solid #fff; box-shadow: inset 0 1px 2px rgba(#000, 0.25); height: 1.5rem; position: relative; top: 50%; transform: translate(0, -50%); transition: background 0.5s 1.2s ease, border-color 0.4s 1.05s ease; width: 1.5rem; will-change: background, border-color; &:first-child { transform: translate(-50%, -50%); } &:last-child { transform: translate(50%, -50%); } &--upcoming { background: #eee; } &--current { background: $blue-60; border-color: $blue-90; } }
}
@keyframes growHalfWidth { from { width: 0%; } to { width: 50%; }
}
@keyframes growFullWidth { from { width: 50%; } to { width: 100%; }
}
React Progress Bar - Script Codes JS Codes
'use strict';
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var DummyApp = function (_React$Component) { _inherits(DummyApp, _React$Component); function DummyApp() { _classCallCheck(this, DummyApp); var _this = _possibleConstructorReturn(this, _React$Component.call(this)); _this.state = { currentStep: 0, stepsTexts: ['Answer questions', 'Review your plan', 'Register'] }; return _this; } DummyApp.prototype._nextStep = function _nextStep(factor) { var state = this.state, currentStep = state.currentStep + factor; if (currentStep > state.stepsTexts.length - 1 || currentStep === -1) { return false; } this.setState({ currentStep: currentStep }); }; DummyApp.prototype.render = function render() { var state = this.state; return React.createElement( 'div', { className: 'pb' }, React.createElement( 'header', { className: 'pb__header' }, React.createElement( 'h1', null, 'React Progress Bar' ) ), React.createElement( 'main', { className: 'pb__main' }, React.createElement(ProgressBar, { currentStep: state.currentStep, stepsTexts: state.stepsTexts }) ), React.createElement( 'footer', { className: 'pb__footer' }, React.createElement( 'button', { onClick: this._nextStep.bind(this, -1) }, 'PREV' ), React.createElement( 'button', { onClick: this._nextStep.bind(this, 1) }, 'NEXT' ) ) ); }; return DummyApp;
}(React.Component);
var ProgressBar = function (_React$Component2) { _inherits(ProgressBar, _React$Component2); function ProgressBar() { _classCallCheck(this, ProgressBar); return _possibleConstructorReturn(this, _React$Component2.apply(this, arguments)); } ProgressBar.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState) { return this.props.currentStep !== nextProps.currentStep; }; ProgressBar.prototype.render = function render() { var props = this.props, output = { steps: [], dots: [] }, currentStatus = false; props.stepsTexts.forEach(function (step, index) { var scn = 'pb__info', dcn = 'pb__dot'; if (currentStatus) { scn += ' pb__info--upcoming'; dcn += ' pb__dot--upcoming'; } if (index === props.currentStep) { scn += ' pb__info--current'; dcn += ' pb__dot--current'; currentStatus = true; } output.steps.push(React.createElement( 'div', { className: scn, key: step }, step )); output.dots.push(React.createElement('div', { className: dcn, key: step + 'dot' })); }); return React.createElement( 'div', { className: 'pb__container' }, output.steps, React.createElement( 'div', { className: ['pb__progress', 'pb__progress--' + props.currentStep].join(' ') }, React.createElement( 'div', { className: 'pb__bar' }, output.dots ) ) ); }; return ProgressBar;
}(React.Component);
;
React.render(React.createElement(DummyApp, null), document.getElementById("app"));
Developer | Rafael Abensur |
Username | abensur |
Uploaded | September 12, 2022 |
Rating | 3 |
Size | 8,893 Kb |
Views | 38,456 |
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!
Name | Size |
D3.js Brazil Economic Underwater | 4,368 Kb |
Tesseract experiments | 3,557 Kb |
Algorithm practice | 5,620 Kb |
Food Seasons | 6,522 Kb |
Roundout Ribbon | 2,907 Kb |
Isocubes | 4,776 Kb |
Divinding circle | 2,390 Kb |
A Pen by Rafael Abensur | 5,301 Kb |
React Loader | 9,370 Kb |
Chart tooltip example | 2,757 Kb |
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!
Name | Username | Size |
VerbalExpressions Converter | Cmalven | 2,607 Kb |
Loading animation | Codeams | 2,408 Kb |
Price table | Serluk | 5,928 Kb |
Content Changer | Cliffpyles | 4,538 Kb |
CMP5-Opdracht15 | SannevanGastel | 2,733 Kb |
Spiralator 9000 | AdmiralPotato | 4,671 Kb |
A Bouncy Menu Toggle | Billyysea | 4,563 Kb |
Social Profiles | Lachlanjc | 1,939 Kb |
After America | Jonathangarner | 2,686 Kb |
Free css icon set v2 - one div | Ben_jammin | 0 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!