React компонент прелоадера: стили, контекст для универсального доступа из любой точки приложения, сам tsx компонент

2026-03-22 18:19:55 +03:00
parent e927910fda
commit 042d24df4d
3 changed files with 252 additions and 0 deletions
@@ -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
+  )
+}