React Loader

Developer
Rafael Abensur
Size
9,370 Kb
Views
20,240
  1. React Loader Previews
  2. React Loader HTML Codes
  3. React Loader CSS Codes
  4. React Loader JS Codes

How do I make an react loader?

Loader for Vérios Investimentos. What is a react loader? How do you make a react loader? This script and codes were developed by Rafael Abensur on 12 September 2022, Monday.

React Loader Previews
IQ Test

React Loader - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>React Loader </title> <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 Loader - Script Codes CSS Codes

$cubicbezier: cubic-bezier(0.96, 0.22, 0.22, 0.96) infinite alternate;
$dur: 1.5s;
$spincurve: spin $dur $cubicbezier;
$spinycurve: spiny $dur $cubicbezier;
$finishcurve: spin 0.3s linear infinite;
$finishycurve: spiny 0.3s linear infinite;
$class: 'plan-loader';
%ps { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 100%; width: 10rem; height: 10rem;
}
.#{$class} { position: relative; background-color: #fdfdfd; height: 100vh; opacity: 1; animation: fadein 2s ease; &__glass { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } &__under-content, &__upper-content { @extend %ps; } &__glass, &__under-content { filter: blur(1px) opacity(0.75); } &__upper-content { border-radius: 100%; box-shadow: inset 0 0 0.2rem 0.2rem rgba(0, 0, 0, 0.10); background: #fff; overflow: hidden; } &__upper-text { text-align: center; font-family: $font; font-size: 1.8rem; color: $gray-60; background: transparent; position: absolute; left: 50%; top: 50%; transform: translate(-50%, 6rem); border-radius: 100%; width: 100%; height: auto; } &__phrase { text-align: center; height: 4rem; line-height: 4rem; position: absolute; width: 100%; display: none; > span { opacity: 0; transition: opacity 0.2s linear; &.visible { opacity: 1; } } &--visible { display: block; } } &__inner { box-shadow: inset 0 0 0.75rem 0.5rem rgba(0, 0, 0, 0.35), 0 0 1px 0 #fff; background: #fff; width: 10rem; height: 10rem; position: relative; overflow: hidden; border-radius: 50%; margin: 0 auto; z-index: 3; }	&__big-gear,	&__small-gear,	&__micro-gear { animation-delay: 0.1s; position: absolute;	}	&__big-gear,	&__small-gear { animation: $spincurve;	} &__big-gear { right: -5rem; top: -1.25rem; } &__small-gear { top: 0.5rem; left: -4.5rem; } &__micro-gear { top: 6.25rem; left: 2.125rem; animation: $spinycurve; } &--finish { animation: fadeout 2s ease; transition: opacity 0.3s ease; opacity: 1;	.#{$class}__big-gear,	.#{$class}__small-gear { animation-delay: 0;	} .#{$class}__big-gear, .#{$class}__small-gear { animation: $finishcurve; } .#{$class}__micro-gear { animation: $finishycurve; } }
}
@keyframes spin { 100% { transform: rotate(180deg); } }
@keyframes spiny { 100% { transform: rotate(-180deg); } }
@keyframes fadein { 0% { opacity: 0; } 100% { opacity: 1; }}
@keyframes fadeout { 100% { opacity: 0; }}

React Loader - 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 PlanLoader = function (_React$Component) { _inherits(PlanLoader, _React$Component); function PlanLoader() { _classCallCheck(this, PlanLoader); var _this = _possibleConstructorReturn(this, _React$Component.call(this)); _this.state = { words: null, activeWord: null }; return _this; } PlanLoader.prototype.componentDidMount = function componentDidMount() { var words = React.findDOMNode(this.refs.texts).children; for (var i in words) { if (words[i].nodeType == 1) { this._splitText(words[i]); } } this.setState({ words: words, activeWord: 0 }); }; PlanLoader.prototype.componentDidUpdate = function componentDidUpdate() { this._animateWords(this.state.words[this.state.activeWord]); }; PlanLoader.prototype._stringToArray = function _stringToArray(string) { var arr = []; for (var i in string) { arr.push(string[i]); } return arr; }; PlanLoader.prototype._splitText = function _splitText(el) { var string = el.innerHTML, arr = this._stringToArray(string), html = ''; for (var i in arr) { html += ['<span>', arr[i], '</span>'].join(''); } el.innerHTML = html; }; PlanLoader.prototype._animateWords = function _animateWords(el) { var _this2 = this; el.classList.add('plan-loader__phrase--visible'); var chars = el.children, i = 0, delay = 1500; this.interval = setInterval(function () { chars[i++].style.opacity = 1; if (i >= chars.length) { clearInterval(_this2.interval); setTimeout(_this2._nextWord.bind(_this2), 2000); } }, delay / (chars.length * i)); }; PlanLoader.prototype._nextWord = function _nextWord() { var state = this.state, el = state.words[state.activeWord]; if (state.activeWord < state.words.length - 1) { el.classList.remove('plan-loader__phrase--visible'); this.setState({ activeWord: state.activeWord + 1 }); } else { React.findDOMNode(this.refs.planLoader).classList.add('plan-loader--finish'); setTimeout(this._onComplete.bind(this), 2000); } }; PlanLoader.prototype._onComplete = function _onComplete() { React.findDOMNode(this.refs.planLoader).classList.remove('plan-loader--finish'); location = location; }; PlanLoader.prototype.render = function render() { return React.createElement( 'div', { className: 'plan-loader', ref: 'planLoader' }, React.createElement( 'div', { className: 'plan-loader__glass' }, React.createElement( 'div', { className: 'plan-loader__under-content' }, React.createElement('img', { className: 'plan-loader__big-gear', src: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/223946/big-gear.svg' }), React.createElement('img', { className: 'plan-loader__small-gear', src: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/223946/small-gear.svg' }), React.createElement('img', { className: 'plan-loader__micro-gear', src: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/223946/micro-gear.svg' }) ) ), React.createElement( 'div', { className: 'plan-loader__upper-content' }, React.createElement('img', { className: 'plan-loader__big-gear', src: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/223946/big-gear.svg' }), React.createElement('img', { className: 'plan-loader__small-gear', src: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/223946/small-gear.svg' }), React.createElement('img', { className: 'plan-loader__micro-gear', src: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/223946/micro-gear.svg' }) ), React.createElement( 'div', { className: 'plan-loader__upper-text', ref: 'texts' }, React.createElement( 'span', { className: 'plan-loader__phrase' }, 'gerando retorno esperado com base no valor de mercado . . .' ), React.createElement( 'span', { className: 'plan-loader__phrase' }, 'criando gradiente de balanceamento entre ativos . . .' ), React.createElement( 'span', { className: 'plan-loader__phrase' }, 'calculando a melhor alocação livre de risco . . .' ), React.createElement( 'span', { className: 'plan-loader__phrase' }, 'diluindo alocação nas carteiras diversificadas da Vérios . . .' ), React.createElement( 'span', { className: 'plan-loader__phrase' }, 'Seu plano de investimento está pronto!' ) ) ); }; return PlanLoader;
}(React.Component);
;
React.render(React.createElement(PlanLoader, null), document.getElementById("app"));
React Loader - Script Codes
React Loader - Script Codes
Home Page Home
Developer Rafael Abensur
Username abensur
Uploaded September 12, 2022
Rating 3
Size 9,370 Kb
Views 20,240
Do you need developer help for React Loader?

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!

Rafael Abensur (abensur) Script Codes
Name
New Pen Template
Amadurou Logo Animation
Chart tooltip example
Algorithm practice
Roundout Ribbon
D3.js Brazil Economic Underwater
Pocker Mortys dataviz
Divinding circle
Isocubes
Tesseract experiments
Create amazing art & images 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!