rc-lib-ui 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.eslintrc.cjs +18 -0
- package/README/buildPackage.r +8 -0
- package/README.md +14 -0
- package/index.html +13 -0
- package/package.json +18 -9
- package/public/vite.svg +1 -0
- package/src/App.css +42 -0
- package/src/App.tsx +16 -0
- package/src/lib/Preloaders/Preloaders.module.css +32 -0
- package/src/lib/Preloaders/Preloaders.tsx +71 -0
- package/src/lib/Preloaders/components/Ball/Ball.module.scss +101 -0
- package/src/lib/Preloaders/components/Ball/Ball.tsx +37 -0
- package/src/lib/Preloaders/components/Cube/Cube.module.scss +67 -0
- package/src/lib/Preloaders/components/Cube/Cube.tsx +28 -0
- package/src/lib/Preloaders/components/RotateCube/RotateCube.module.scss +84 -0
- package/src/lib/Preloaders/components/RotateCube/RotateCube.tsx +140 -0
- package/src/lib/Preloaders/components/Spinner3D/Spinner3D.module.scss +165 -0
- package/src/lib/Preloaders/components/Spinner3D/Spinner3D.tsx +63 -0
- package/src/lib/Preloaders/components/SpinnerBorder/SpinnerBorder.module.scss +47 -0
- package/src/lib/Preloaders/components/SpinnerBorder/SpinnerBorder.tsx +26 -0
- package/src/lib/Preloaders/components/SpinnerGrow/SpinnerGrow.module.scss +51 -0
- package/src/lib/Preloaders/components/SpinnerGrow/SpinnerGrow.tsx +21 -0
- package/src/lib/Preloaders/components/Time/Time.module.scss +63 -0
- package/src/lib/Preloaders/components/Time/Time.tsx +28 -0
- package/src/lib/declaration.d.ts +3 -0
- package/{dist/index.d.ts → src/lib/index.ts} +3 -1
- package/src/main.tsx +9 -0
- package/src/vite-env.d.ts +2 -0
- package/tsconfig.json +38 -0
- package/tsconfig.node.json +11 -0
- package/vite.config.ts +89 -0
- package/dist/Preloaders/Preloaders.css +0 -1
- package/dist/Preloaders/Preloaders.d.ts +0 -29
- package/dist/Preloaders/Preloaders.js +0 -47
- package/dist/Preloaders/components/Ball/Ball.css +0 -1
- package/dist/Preloaders/components/Ball/Ball.d.ts +0 -8
- package/dist/Preloaders/components/Ball/Ball.js +0 -32
- package/dist/Preloaders/components/Cube/Cube.css +0 -1
- package/dist/Preloaders/components/Cube/Cube.d.ts +0 -4
- package/dist/Preloaders/components/Cube/Cube.js +0 -25
- package/dist/Preloaders/components/RotateCube/RotateCube.css +0 -1
- package/dist/Preloaders/components/RotateCube/RotateCube.d.ts +0 -8
- package/dist/Preloaders/components/RotateCube/RotateCube.js +0 -145
- package/dist/Preloaders/components/Spinner3D/Spinner3D.css +0 -1
- package/dist/Preloaders/components/Spinner3D/Spinner3D.d.ts +0 -8
- package/dist/Preloaders/components/Spinner3D/Spinner3D.js +0 -53
- package/dist/Preloaders/components/SpinnerBorder/SpinnerBorder.css +0 -1
- package/dist/Preloaders/components/SpinnerBorder/SpinnerBorder.d.ts +0 -6
- package/dist/Preloaders/components/SpinnerBorder/SpinnerBorder.js +0 -21
- package/dist/Preloaders/components/SpinnerGrow/SpinnerGrow.css +0 -1
- package/dist/Preloaders/components/SpinnerGrow/SpinnerGrow.d.ts +0 -4
- package/dist/Preloaders/components/SpinnerGrow/SpinnerGrow.js +0 -16
- package/dist/Preloaders/components/Time/Time.css +0 -1
- package/dist/Preloaders/components/Time/Time.d.ts +0 -6
- package/dist/Preloaders/components/Time/Time.js +0 -26
- package/dist/declaration.d.js +0 -1
- package/dist/index.js +0 -4
package/.eslintrc.cjs
ADDED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
module.exports = {
|
|
2
|
+
root: true,
|
|
3
|
+
env: { browser: true, es2020: true, node: true, es6: true, commonjs: true },
|
|
4
|
+
extends: [
|
|
5
|
+
'eslint:recommended',
|
|
6
|
+
// 'plugin:@typescript-eslint/recommended',
|
|
7
|
+
'plugin:react-hooks/recommended',
|
|
8
|
+
],
|
|
9
|
+
ignorePatterns: ['dist', '.eslintrc.cjs'],
|
|
10
|
+
parser: '@typescript-eslint/parser',
|
|
11
|
+
plugins: ['react-refresh'],
|
|
12
|
+
rules: {
|
|
13
|
+
'react-refresh/only-export-components': [
|
|
14
|
+
'warn',
|
|
15
|
+
{ allowConstantExport: true },
|
|
16
|
+
],
|
|
17
|
+
},
|
|
18
|
+
}
|
package/README.md
CHANGED
package/index.html
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
+
<title>Vite + React + TS</title>
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<div id="root"></div>
|
|
11
|
+
<script type="module" src="/src/main.tsx"></script>
|
|
12
|
+
</body>
|
|
13
|
+
</html>
|
package/package.json
CHANGED
|
@@ -1,16 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "rc-lib-ui",
|
|
3
|
-
"
|
|
3
|
+
"private": false,
|
|
4
|
+
"version": "1.0.1",
|
|
4
5
|
"author": "SinGlEBW",
|
|
5
6
|
"license": "MIT",
|
|
6
|
-
|
|
7
7
|
"type": "module",
|
|
8
8
|
"module": "./dist/index.js",
|
|
9
9
|
"main": "./dist/index.js",
|
|
10
10
|
"types": "./dist/index.d.ts",
|
|
11
|
-
"files": [
|
|
12
|
-
"dist"
|
|
13
|
-
],
|
|
14
11
|
"publishConfig": {
|
|
15
12
|
"access": "public",
|
|
16
13
|
"registry": "https://registry.npmjs.org/",
|
|
@@ -31,11 +28,22 @@
|
|
|
31
28
|
"@mui/material": "^6.1.0",
|
|
32
29
|
"@mui/styled-engine": "^6.1.0",
|
|
33
30
|
"classnames": "^2.5.1",
|
|
34
|
-
"
|
|
35
|
-
"react
|
|
36
|
-
"react-
|
|
37
|
-
"
|
|
31
|
+
"rc-lib-ui": "^1.0.0",
|
|
32
|
+
"react": "^18.2.0 || ^19.0.0",
|
|
33
|
+
"react-dom": "^18.2.0 || ^19.0.0",
|
|
34
|
+
"react-transition-group": "^4.4.5"
|
|
35
|
+
},
|
|
36
|
+
"peerDependencies": {
|
|
37
|
+
"@emotion/react": "^11.13.3",
|
|
38
|
+
"@emotion/styled": "^11.13.0",
|
|
39
|
+
"@mui/material": "^6.1.0",
|
|
40
|
+
"@mui/styled-engine": "^6.1.0",
|
|
41
|
+
"classnames": "^2.5.1",
|
|
42
|
+
"react": "^18.2.0 || ^19.0.0",
|
|
43
|
+
"react-dom": "^18.2.0 || ^19.0.0",
|
|
44
|
+
"react-transition-group": "^4.4.5"
|
|
38
45
|
},
|
|
46
|
+
"peerDependenciesMeta": {},
|
|
39
47
|
"devDependencies": {
|
|
40
48
|
"@types/node": "^22.5.4",
|
|
41
49
|
"@types/react": "^18.2.64",
|
|
@@ -50,6 +58,7 @@
|
|
|
50
58
|
"glob": "^11.0.0",
|
|
51
59
|
"prettier": "^3.3.3",
|
|
52
60
|
"sass": "^1.78.0",
|
|
61
|
+
"sass-embedded": "^1.78.0",
|
|
53
62
|
"typescript": "^5.2.2",
|
|
54
63
|
"typescript-plugin-css-modules": "^5.1.0",
|
|
55
64
|
"vite": "^5.1.6",
|
package/public/vite.svg
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
package/src/App.css
ADDED
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
#root {
|
|
2
|
+
max-width: 1280px;
|
|
3
|
+
margin: 0 auto;
|
|
4
|
+
padding: 2rem;
|
|
5
|
+
text-align: center;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.logo {
|
|
9
|
+
height: 6em;
|
|
10
|
+
padding: 1.5em;
|
|
11
|
+
will-change: filter;
|
|
12
|
+
transition: filter 300ms;
|
|
13
|
+
}
|
|
14
|
+
.logo:hover {
|
|
15
|
+
filter: drop-shadow(0 0 2em #646cffaa);
|
|
16
|
+
}
|
|
17
|
+
.logo.react:hover {
|
|
18
|
+
filter: drop-shadow(0 0 2em #61dafbaa);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
@keyframes logo-spin {
|
|
22
|
+
from {
|
|
23
|
+
transform: rotate(0deg);
|
|
24
|
+
}
|
|
25
|
+
to {
|
|
26
|
+
transform: rotate(360deg);
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
31
|
+
a:nth-of-type(2) .logo {
|
|
32
|
+
animation: logo-spin infinite 20s linear;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.card {
|
|
37
|
+
padding: 2em;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.read-the-docs {
|
|
41
|
+
color: #888;
|
|
42
|
+
}
|
package/src/App.tsx
ADDED
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
// import { Preloaders } from '@lib';
|
|
2
|
+
// import { Preloaders } from '../dist'
|
|
3
|
+
import { Preloaders } from 'rc-lib-ui'
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
export const App = () => {
|
|
7
|
+
return (
|
|
8
|
+
<>
|
|
9
|
+
<Preloaders name='Ball' show={true} >
|
|
10
|
+
<div className='content'></div>
|
|
11
|
+
</Preloaders>
|
|
12
|
+
</>
|
|
13
|
+
)
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
.container {
|
|
2
|
+
position: relative;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.preloader {
|
|
6
|
+
position: absolute;
|
|
7
|
+
}
|
|
8
|
+
.fadeEnter{
|
|
9
|
+
opacity: 0;
|
|
10
|
+
transform: scale(1.1);
|
|
11
|
+
}
|
|
12
|
+
.fadeExit{
|
|
13
|
+
opacity: 1;
|
|
14
|
+
transform: scale(1);
|
|
15
|
+
}
|
|
16
|
+
.fadeEnterActive{
|
|
17
|
+
opacity: 1;
|
|
18
|
+
transform: scale(1);
|
|
19
|
+
|
|
20
|
+
}
|
|
21
|
+
.fadeExitActive{
|
|
22
|
+
opacity: 0;
|
|
23
|
+
transform: scale(0.9);
|
|
24
|
+
}
|
|
25
|
+
.fadeEnterActive,
|
|
26
|
+
.fadeExitActive{
|
|
27
|
+
transition: opacity 300ms, transform 300ms;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import React, { FC, useRef } from "react";
|
|
2
|
+
import { CSSTransition, SwitchTransition } from "react-transition-group";
|
|
3
|
+
|
|
4
|
+
import { Ball, BallProps } from './components/Ball/Ball';
|
|
5
|
+
import { SpinnerGrow, SpinnerGrowProps } from './components/SpinnerGrow/SpinnerGrow';
|
|
6
|
+
import { SpinnerBorder, SpinnerBorderProps } from './components/SpinnerBorder/SpinnerBorder';
|
|
7
|
+
import { Spinner3D, Spinner3DProps } from './components/Spinner3D/Spinner3D';
|
|
8
|
+
import { Time, type TimeProps, } from './components/Time/Time';
|
|
9
|
+
import { Cube, CubeProps } from './components/Cube/Cube';
|
|
10
|
+
import { RotateCube, RotateCubeProps } from './components/RotateCube/RotateCube';
|
|
11
|
+
|
|
12
|
+
import s from './Preloaders.module.css';
|
|
13
|
+
|
|
14
|
+
/*Добавлять прелоадеры threeJS */
|
|
15
|
+
|
|
16
|
+
const PreloaderComponents = {
|
|
17
|
+
SpinnerGrow,
|
|
18
|
+
SpinnerBorder,
|
|
19
|
+
Spinner3D,
|
|
20
|
+
Ball,
|
|
21
|
+
Time,
|
|
22
|
+
Cube,
|
|
23
|
+
RotateCube
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
type ListPreloaders_P =
|
|
27
|
+
({ name: 'SpinnerGrow' } & SpinnerGrowProps) |
|
|
28
|
+
({ name: 'SpinnerBorder' } & SpinnerBorderProps) |
|
|
29
|
+
({ name: 'Spinner3D' } & Spinner3DProps) |
|
|
30
|
+
({ name: 'Ball' } & BallProps) |
|
|
31
|
+
({ name: 'Time' } & TimeProps) |
|
|
32
|
+
({ name: 'Cube' } & CubeProps) |
|
|
33
|
+
({ name: 'RotateCube' } & RotateCubeProps);
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
export type PreloadersProps = {
|
|
37
|
+
show: boolean;
|
|
38
|
+
children: React.ReactNode;
|
|
39
|
+
} & ListPreloaders_P;
|
|
40
|
+
|
|
41
|
+
const PreloadersMemo: FC<PreloadersProps> = ({ show, name, children, ...props }) => {
|
|
42
|
+
const PreloaderComponent = PreloaderComponents[name];
|
|
43
|
+
// debugger
|
|
44
|
+
const preloaderRef = useRef(null);
|
|
45
|
+
const switchData = show
|
|
46
|
+
? { key: 'preloader', element: <PreloaderComponent ref={preloaderRef} {...props} /> }
|
|
47
|
+
: { key: 'content', element: children };
|
|
48
|
+
|
|
49
|
+
return (
|
|
50
|
+
<SwitchTransition>
|
|
51
|
+
<CSSTransition
|
|
52
|
+
key={switchData.key}
|
|
53
|
+
nodeRef={preloaderRef}
|
|
54
|
+
timeout={300}
|
|
55
|
+
classNames={{
|
|
56
|
+
enter: s.fadeEnter,
|
|
57
|
+
enterActive: s.fadeEnterActive,
|
|
58
|
+
exit: s.fadeExit,
|
|
59
|
+
exitActive: s.fadeExitActive,
|
|
60
|
+
}}
|
|
61
|
+
unmountOnExit
|
|
62
|
+
>
|
|
63
|
+
<>
|
|
64
|
+
{switchData.element}
|
|
65
|
+
</>
|
|
66
|
+
</CSSTransition>
|
|
67
|
+
</SwitchTransition>
|
|
68
|
+
);
|
|
69
|
+
};
|
|
70
|
+
|
|
71
|
+
export const Preloaders = React.memo(PreloadersMemo);
|
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
.wrap {
|
|
2
|
+
display: flex;
|
|
3
|
+
justify-content: center;
|
|
4
|
+
align-items: center;
|
|
5
|
+
position: absolute;
|
|
6
|
+
|
|
7
|
+
top: 0;
|
|
8
|
+
bottom: 0;
|
|
9
|
+
right: 0;
|
|
10
|
+
left: 0;
|
|
11
|
+
z-index: 105;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.loader {
|
|
15
|
+
position: relative;
|
|
16
|
+
top: 0;
|
|
17
|
+
bottom: 0;
|
|
18
|
+
width: 100px;
|
|
19
|
+
height: 100px;
|
|
20
|
+
-webkit-perspective: 780px;
|
|
21
|
+
perspective: 780px;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.inner {
|
|
25
|
+
position: absolute;
|
|
26
|
+
width: 100%;
|
|
27
|
+
height: 100%;
|
|
28
|
+
box-sizing: border-box;
|
|
29
|
+
-o-box-sizing: border-box;
|
|
30
|
+
-ms-box-sizing: border-box;
|
|
31
|
+
-webkit-box-sizing: border-box;
|
|
32
|
+
-moz-box-sizing: border-box;
|
|
33
|
+
border-radius: 50%;
|
|
34
|
+
-o-border-radius: 50%;
|
|
35
|
+
-ms-border-radius: 50%;
|
|
36
|
+
-webkit-border-radius: 50%;
|
|
37
|
+
-moz-border-radius: 50%;
|
|
38
|
+
|
|
39
|
+
&.one {
|
|
40
|
+
left: 0%;
|
|
41
|
+
top: 0%;
|
|
42
|
+
animation: cssload-rotate-one 1.15s linear infinite;
|
|
43
|
+
-o-animation: cssload-rotate-one 1.15s linear infinite;
|
|
44
|
+
-ms-animation: cssload-rotate-one 1.15s linear infinite;
|
|
45
|
+
-webkit-animation: cssload-rotate-one 1.15s linear infinite;
|
|
46
|
+
-moz-animation: cssload-rotate-one 1.15s linear infinite;
|
|
47
|
+
border-bottom: 3px solid #5C5EDC;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
&.two {
|
|
51
|
+
right: 0%;
|
|
52
|
+
top: 0%;
|
|
53
|
+
animation: cssload-rotate-two 1.15s linear infinite;
|
|
54
|
+
-o-animation: cssload-rotate-two 1.15s linear infinite;
|
|
55
|
+
-ms-animation: cssload-rotate-two 1.15s linear infinite;
|
|
56
|
+
-webkit-animation: cssload-rotate-two 1.15s linear infinite;
|
|
57
|
+
-moz-animation: cssload-rotate-two 1.15s linear infinite;
|
|
58
|
+
border-right: 3px solid rgba(76, 70, 101, 0.99);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
&.three {
|
|
62
|
+
right: 0%;
|
|
63
|
+
bottom: 0%;
|
|
64
|
+
animation: cssload-rotate-three 1.15s linear infinite;
|
|
65
|
+
-o-animation: cssload-rotate-three 1.15s linear infinite;
|
|
66
|
+
-ms-animation: cssload-rotate-three 1.15s linear infinite;
|
|
67
|
+
-webkit-animation: cssload-rotate-three 1.15s linear infinite;
|
|
68
|
+
-moz-animation: cssload-rotate-three 1.15s linear infinite;
|
|
69
|
+
border-top: 3px solid #e9908a;
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.text {
|
|
74
|
+
position: absolute;
|
|
75
|
+
width: 100%;
|
|
76
|
+
z-index: 106;
|
|
77
|
+
text-align: center;
|
|
78
|
+
margin-top: 30;
|
|
79
|
+
animation: textAnim .5s linear infinite alternate;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
@keyframes textAnim {
|
|
83
|
+
0% { color: rgba(211, 210, 214, 0.99) }
|
|
84
|
+
100% { color: rgba(161, 160, 162, 0.99) }
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
|
|
88
|
+
@keyframes cssload-rotate-one {
|
|
89
|
+
0% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg); }
|
|
90
|
+
100% { transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg); }
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
@keyframes cssload-rotate-two {
|
|
94
|
+
0% { transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);}
|
|
95
|
+
100% { transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg); }
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
@keyframes cssload-rotate-three {
|
|
99
|
+
0% { transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);}
|
|
100
|
+
100% { transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg); }
|
|
101
|
+
}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Box, SxProps } from '@mui/material';
|
|
3
|
+
import s from "./Ball.module.scss";
|
|
4
|
+
|
|
5
|
+
export interface BallProps {
|
|
6
|
+
titlePreloader?: string;
|
|
7
|
+
children?: React.ReactNode;
|
|
8
|
+
sx?:SxProps;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
const BallMemo = React.forwardRef<HTMLDivElement, BallProps>(({titlePreloader, sx, children}, ref) => {
|
|
12
|
+
|
|
13
|
+
return (
|
|
14
|
+
<>
|
|
15
|
+
<Box sx={sx} className={s.wrap} ref={ref}>
|
|
16
|
+
<Box className={s.loader}>
|
|
17
|
+
<Box className={`${s.inner} ${s.one}`}></Box>
|
|
18
|
+
<Box className={`${s.inner} ${s.two}`}></Box>
|
|
19
|
+
<Box className={`${s.inner} ${s.three}`}></Box>
|
|
20
|
+
</Box>
|
|
21
|
+
<Box className='Ball-Content' sx={{position: 'absolute'}}>
|
|
22
|
+
{ children }
|
|
23
|
+
</Box>
|
|
24
|
+
</Box>
|
|
25
|
+
{
|
|
26
|
+
(titlePreloader)
|
|
27
|
+
? (
|
|
28
|
+
<Box component={'p'} className={s.text}>
|
|
29
|
+
{ `Загрузка ${titlePreloader} ...` }
|
|
30
|
+
</Box>
|
|
31
|
+
)
|
|
32
|
+
: ''
|
|
33
|
+
}
|
|
34
|
+
</>
|
|
35
|
+
);
|
|
36
|
+
})
|
|
37
|
+
export const Ball = React.memo(BallMemo);
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
$color: #34495e;
|
|
2
|
+
.wrap {
|
|
3
|
+
/* align-items: center; */
|
|
4
|
+
position: absolute;
|
|
5
|
+
left: 0;
|
|
6
|
+
right: 0;
|
|
7
|
+
top: 0;
|
|
8
|
+
bottom: 0;
|
|
9
|
+
display: grid;
|
|
10
|
+
justify-content: center;
|
|
11
|
+
align-items: center;
|
|
12
|
+
z-index: 100;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.loader {
|
|
16
|
+
width: 73px;
|
|
17
|
+
height: 73px;
|
|
18
|
+
margin: 0 auto;
|
|
19
|
+
position: relative;
|
|
20
|
+
transform: rotateZ(45deg);
|
|
21
|
+
}
|
|
22
|
+
.cube {
|
|
23
|
+
position: relative;
|
|
24
|
+
transform: rotateZ(45deg);
|
|
25
|
+
width: 50%;
|
|
26
|
+
height: 50%;
|
|
27
|
+
float: left;
|
|
28
|
+
transform: scale(1.1);
|
|
29
|
+
}
|
|
30
|
+
.cube:before {
|
|
31
|
+
content: "";
|
|
32
|
+
position: absolute;
|
|
33
|
+
top: 0;
|
|
34
|
+
left: 0;
|
|
35
|
+
width: 100%;
|
|
36
|
+
height: 100%;
|
|
37
|
+
background-color: $color;
|
|
38
|
+
animation: cube-loader 2.76s infinite linear both;
|
|
39
|
+
transform-origin: 100% 100%;
|
|
40
|
+
}
|
|
41
|
+
.two {
|
|
42
|
+
transform: scale(1.1) rotateZ(90deg);
|
|
43
|
+
&::before{ animation-delay: 0.35s; }
|
|
44
|
+
}
|
|
45
|
+
.three {
|
|
46
|
+
transform: scale(1.1) rotateZ(180deg);
|
|
47
|
+
&::before { animation-delay: 0.69s; }
|
|
48
|
+
}
|
|
49
|
+
.four {
|
|
50
|
+
transform: scale(1.1) rotateZ(270deg);
|
|
51
|
+
&::before { animation-delay: 1.04s; }
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
@keyframes cube-loader {
|
|
55
|
+
0%, 10% {
|
|
56
|
+
transform: perspective(136px) rotateX(-180deg);
|
|
57
|
+
opacity: 0;
|
|
58
|
+
}
|
|
59
|
+
25%, 75% {
|
|
60
|
+
transform: perspective(136px) rotateX(0deg);
|
|
61
|
+
opacity: 1;
|
|
62
|
+
}
|
|
63
|
+
90%, 100% {
|
|
64
|
+
transform: perspective(136px) rotateY(180deg);
|
|
65
|
+
opacity: 0;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { forwardRef, memo } from 'react';
|
|
2
|
+
import s from './Cube.module.scss'
|
|
3
|
+
import cn from 'classnames';
|
|
4
|
+
import { Box } from '@mui/material';
|
|
5
|
+
|
|
6
|
+
export interface CubeProps {
|
|
7
|
+
color?:string;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
const CubeMemo = forwardRef<HTMLDivElement, CubeProps>(({color = 'primary'}, ref) => {
|
|
11
|
+
const _color = color.startsWith('#') ? color : `${color}.main`;
|
|
12
|
+
return (
|
|
13
|
+
<div className={s.wrap} ref={ref}>
|
|
14
|
+
<div className={s.loader}>
|
|
15
|
+
<Box sx={{'&::before': { backgroundColor: _color} }} className={cn(s.cube, s.one)}></Box>
|
|
16
|
+
<Box sx={{'&::before': { backgroundColor: _color} }} className={cn(s.cube, s.two)}></Box>
|
|
17
|
+
<Box sx={{'&::before': { backgroundColor: _color} }} className={cn(s.cube, s.four)}></Box>
|
|
18
|
+
<Box sx={{'&::before': { backgroundColor: _color} }} className={cn(s.cube, s.three)}></Box>
|
|
19
|
+
</div>
|
|
20
|
+
</div>
|
|
21
|
+
);
|
|
22
|
+
});
|
|
23
|
+
|
|
24
|
+
export const Cube = memo(CubeMemo);
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
.wrap {
|
|
2
|
+
position: absolute;
|
|
3
|
+
top: 0;
|
|
4
|
+
bottom: 0;
|
|
5
|
+
left: 0;
|
|
6
|
+
right: 0;
|
|
7
|
+
margin: auto;
|
|
8
|
+
display: flex;
|
|
9
|
+
justify-content: center;
|
|
10
|
+
align-items: center;
|
|
11
|
+
}
|
|
12
|
+
$sizeInner: 200px;
|
|
13
|
+
$sizeItem: calc($sizeInner / 2);
|
|
14
|
+
|
|
15
|
+
.inner{
|
|
16
|
+
position: relative;
|
|
17
|
+
width: $sizeInner;
|
|
18
|
+
height: $sizeInner;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.item {
|
|
22
|
+
width: $sizeItem;
|
|
23
|
+
height: $sizeItem;
|
|
24
|
+
position: absolute;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.one {
|
|
28
|
+
background-color: #FA5667;
|
|
29
|
+
top: 0;
|
|
30
|
+
left: 0;
|
|
31
|
+
z-index: 1;
|
|
32
|
+
animation: oneAnim 1.8s cubic-bezier(.6,.01,.4,1) infinite;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.two {
|
|
36
|
+
background-color: #7A45E5;
|
|
37
|
+
top: 0;
|
|
38
|
+
right: 0;
|
|
39
|
+
animation: twoAnim 1.8s cubic-bezier(.6,.01,.4,1) infinite;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.three {
|
|
43
|
+
background-color: #1B91F7;
|
|
44
|
+
bottom: 0;
|
|
45
|
+
right: 0;
|
|
46
|
+
z-index: 1;
|
|
47
|
+
animation: threeAnim 1.8s cubic-bezier(.6,.01,.4,1) infinite;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.four {
|
|
51
|
+
background-color: #FAC24C;
|
|
52
|
+
bottom: 0;
|
|
53
|
+
left: 0;
|
|
54
|
+
animation: fourAnim 1.8s cubic-bezier(.6,.01,.4,1) infinite;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
@keyframes oneAnim {
|
|
59
|
+
0%, 100% { transform: translate(0, 0) }
|
|
60
|
+
25% { transform: translate(0, $sizeItem) }
|
|
61
|
+
50% { transform: translate($sizeItem, $sizeItem) }
|
|
62
|
+
75% { transform: translate($sizeItem, 0) }
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
@keyframes twoAnim {
|
|
66
|
+
0%, 100% { transform: translate(0, 0) }
|
|
67
|
+
25% { transform: translate(-$sizeItem, 0) }
|
|
68
|
+
50% { transform: translate(-$sizeItem, $sizeItem) }
|
|
69
|
+
75% { transform: translate(0, $sizeItem) }
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
@keyframes threeAnim {
|
|
73
|
+
0%, 100% { transform: translate(0, 0) }
|
|
74
|
+
25% { transform: translate(0, -$sizeItem) }
|
|
75
|
+
50% { transform: translate(-$sizeItem, -$sizeItem) }
|
|
76
|
+
75% { transform: translate(-$sizeItem, 0) }
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
@keyframes fourAnim {
|
|
80
|
+
0%, 100% { transform: translate(0, 0) }
|
|
81
|
+
25% { transform: translate($sizeItem, 0) }
|
|
82
|
+
50% { transform: translate($sizeItem, -$sizeItem) }
|
|
83
|
+
75% { transform: translate(0, -$sizeItem) }
|
|
84
|
+
}
|