hw10 styles

src/s2-homeworks/hw05/pages/JuniorPlus.tsx

@@ -7,7 +7,6 @@ import HW13 from '../../hw13/HW13'
 function JuniorPlus() {
     return (
         <div id={'hw5-page-junior-plus'}>
-            junior plus page
             <HW10 />
             <HW11 />
             <HW12 />

src/s2-homeworks/hw10/HW10.tsx

@@ -4,6 +4,7 @@ import { AppStoreType } from './bll/store'
 import { loadingAC } from './bll/loadingReducer'
 import SuperButton from '../hw04/common/c2-SuperButton/SuperButton'
 import s2 from '../../s1-main/App.module.css'
+import { Loader } from './Loader'
 
 const HW10 = () => {
     // useSelector, useDispatch
@@ -24,22 +25,26 @@ const HW10 = () => {
     }
 
     return (
-        <div id={'hw10'} className={s2.hw}>
+        <div id={'hw10'}>
             <div className={s2.hwTitle}>homeworks 10</div>
 
             {/*should work (должно работать)*/}
-            {isLoading ? (
-                <div id={'hw10-loading'}>крутилка...</div>
-            ) : (
-                <div>
-                    <SuperButton
-                        id={'hw10-button-start-loading'}
-                        onClick={setLoading}
-                    >
-                        set loading...
-                    </SuperButton>
-                </div>
-            )}
+            <div className={s2.hw}>
+                {isLoading ? (
+                    <div id={'hw10-loading'}>
+                        <Loader />
+                    </div>
+                ) : (
+                    <div>
+                        <SuperButton
+                            id={'hw10-button-start-loading'}
+                            onClick={setLoading}
+                        >
+                            Set loading...
+                        </SuperButton>
+                    </div>
+                )}
+            </div>
         </div>
     )
 }

src/s2-homeworks/hw10/Loader.module.css

@@ -0,0 +1,17 @@
+.loader {
+    border: 9px solid #f3f3f3;
+    border-top: 9px solid #512DE4;
+    border-radius: 50%;
+    width: 90px;
+    height: 90px;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}

src/s2-homeworks/hw10/Loader.tsx

@@ -0,0 +1,3 @@
+import s from './Loader.module.css'
+
+export const Loader = () => <div className={s.loader}></div>