vasya
40 lines
2.0 KiB
TypeScript
40 lines
2.0 KiB
TypeScript
import "./../../../css/components/preloader.css";
|
|
import React from "react";
|
|
|
|
export default function Preloader ( props: {visible: boolean, text?: string | null}) {
|
|
const {text = 'загрузка'} = props;
|
|
let preloaderColorArray: string[] = ['preloader-ruby-circle', 'preloader-emerald-circle', 'preloader-graphite-circle'],
|
|
//Код ниже реализует возможность присваивать каждую перезагрузку разные классы с цветом полос
|
|
//Рандомное число, по которому получим первый класс
|
|
firstColorIndex: number = Math.floor(Math.random() * 3),
|
|
firstCircleClass: typeof preloaderColorArray[number] = preloaderColorArray[firstColorIndex],
|
|
secondCircleClass: typeof preloaderColorArray[number],
|
|
thirdCircleClass: typeof preloaderColorArray[number];
|
|
//Удалим уже используемый класс цвета из массива
|
|
preloaderColorArray.splice(firstColorIndex, 1);
|
|
//Оставшиеся 2 класса распределеяем в зависимости от проостой проверки четности/нечетности
|
|
if (Math.floor(Math.random() * 2) % 2 === 0) {
|
|
secondCircleClass = preloaderColorArray[0];
|
|
thirdCircleClass = preloaderColorArray[1];
|
|
} else {
|
|
secondCircleClass = preloaderColorArray[1];
|
|
thirdCircleClass = preloaderColorArray[0];
|
|
}
|
|
return (
|
|
props.visible ?
|
|
<div id='preloader_container'>
|
|
<div id='preloader'>
|
|
<div className={'circle ' + firstCircleClass} id='circle_one'></div>
|
|
<div className={'circle ' + secondCircleClass} id='circle_two'></div>
|
|
<div className={'circle ' + thirdCircleClass} id='circle_three'></div>
|
|
<div id='logo'>
|
|
<div className='logo_square' id='right-bottom'></div>
|
|
<div className='logo_square' id='left-top'></div>
|
|
</div>
|
|
<div id='preloader_text'>{ text }</div>
|
|
</div>
|
|
</div>
|
|
: null
|
|
)
|
|
}
|