добавляю все изменения проекта на текущий момент
This commit is contained in:
@@ -0,0 +1,39 @@
|
||||
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
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user