From 3186c1a0d00bfbe52db87e6cb5882a94cc02d35a Mon Sep 17 00:00:00 2001 From: Alex <33497058+bexsoft@users.noreply.github.com> Date: Wed, 9 Mar 2022 10:28:37 -0700 Subject: [PATCH] Added Loader to Console (#1686) Signed-off-by: Benjamin Perez --- .../screens/Console/Common/IconsScreen.tsx | 23 +- .../screens/Console/Common/Loader/Loader.tsx | 103 ++++++ .../Console/Common/Loader/loader.styles.css | 300 ++++++++++++++++++ 3 files changed, 425 insertions(+), 1 deletion(-) create mode 100644 portal-ui/src/screens/Console/Common/Loader/Loader.tsx create mode 100644 portal-ui/src/screens/Console/Common/Loader/loader.styles.css diff --git a/portal-ui/src/screens/Console/Common/IconsScreen.tsx b/portal-ui/src/screens/Console/Common/IconsScreen.tsx index 47cd44629..d2cbb3eed 100644 --- a/portal-ui/src/screens/Console/Common/IconsScreen.tsx +++ b/portal-ui/src/screens/Console/Common/IconsScreen.tsx @@ -19,6 +19,7 @@ import { containerForHeader } from "../Common/FormComponents/common/styleLibrary import { Theme } from "@mui/material/styles"; import createStyles from "@mui/styles/createStyles"; import withStyles from "@mui/styles/withStyles"; +import clsx from "clsx"; import { FormControl, FormControlLabel, @@ -30,7 +31,8 @@ import { import * as cicons from "../../../icons"; import * as micons from "../../../icons/SidebarMenus"; -import clsx from "clsx"; +import Loader from "./Loader/Loader"; + interface IIconsScreenSimple { classes: any; @@ -42,6 +44,10 @@ const styles = (theme: Theme) => root: { fontSize: 12, wordWrap: "break-word", + "& .min-loader": { + width: 45, + height: 45, + } }, def: {}, red: { @@ -98,6 +104,21 @@ const IconsScreen = ({ classes }: IIconsScreenSimple) => { OperatorLogo +

Loaders

+ + + +
+ Loader +
+

Icons

. + +import React, { SVGProps } from "react"; + +import "./loader.styles.css"; + +const Loader = (props: SVGProps) => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +export default Loader; diff --git a/portal-ui/src/screens/Console/Common/Loader/loader.styles.css b/portal-ui/src/screens/Console/Common/Loader/loader.styles.css new file mode 100644 index 000000000..b0fdfac93 --- /dev/null +++ b/portal-ui/src/screens/Console/Common/Loader/loader.styles.css @@ -0,0 +1,300 @@ +#eB8dk2fHKWC2_tr { + animation: eB8dk2fHKWC2_tr__tr 3000ms linear infinite normal forwards +} + +@keyframes eB8dk2fHKWC2_tr__tr { + 0% { + transform: translate(139.785027px, 140.086989px) rotate(45.236493deg); + animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1) + } + 10% { + transform: translate(139.785027px, 140.086989px) rotate(-197.740907deg); + animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1) + } + 20% { + transform: translate(139.785027px, 140.086989px) rotate(-108.6deg); + animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1) + } + 30% { + transform: translate(139.785027px, 140.086989px) rotate(-17.484014deg); + animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1) + } + 33.333333% { + transform: translate(139.785027px, 140.086989px) rotate(-17.48deg); + animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1) + } + 43.333333% { + transform: translate(139.785027px, 140.086989px) rotate(160.887995deg) + } + 100% { + transform: translate(139.785027px, 140.086989px) rotate(160.887995deg) + } +} + +#eB8dk2fHKWC2_ts { + animation: eB8dk2fHKWC2_ts__ts 3000ms linear infinite normal forwards +} + +@keyframes eB8dk2fHKWC2_ts__ts { + 0% { + transform: scale(1, 0.995019) + } + 33.333333% { + transform: scale(1, 0.995019); + animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1) + } + 43.333333% { + transform: scale(0.101121, 0.102033); + animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1) + } + 50% { + transform: scale(0.1, 0.1); + animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1) + } + 60% { + transform: scale(1, 1) + } + 100% { + transform: scale(1, 1) + } +} + +#eB8dk2fHKWC2 { + animation: eB8dk2fHKWC2_c_o 3000ms linear infinite normal forwards +} + +@keyframes eB8dk2fHKWC2_c_o { + 0% { + opacity: 1 + } + 6.666667% { + opacity: 1 + } + 10% { + opacity: 0 + } + 13.333333% { + opacity: 0 + } + 20% { + opacity: 1 + } + 30% { + opacity: 1 + } + 36.666667% { + opacity: 1 + } + 40% { + opacity: 0 + } + 100% { + opacity: 0 + } +} + +#eB8dk2fHKWC4 { + animation: eB8dk2fHKWC4__m 3000ms linear infinite normal forwards +} + +@keyframes eB8dk2fHKWC4__m { + 0% { + d: path('M85.4,249.8C109.08,255.3,133.72,257.37,157.65,252.14C181.65,246.89,202.95,233.55,219.27,215.35C227.84,205.79,213.74,191.6,205.13,201.21C190.9,217.1,173.27,228.26,152.34,232.86C132.03,237.32,110.79,235.19,90.73,230.52C78.19,227.61,72.85,246.88,85.4,249.8C85.4,249.8,85.4,249.8,85.4,249.8Z') + } + 10% { + d: path('M85.4,249.8C85.4,249.8,85.399999,249.800001,85.399999,249.800001C85.399999,249.800001,85.4,249.800002,85.4,249.800002C85.4,249.800002,90.484102,251.966034,95.043213,248.269966C100.484052,243.859082,98.694728,236.722769,97.073675,234.469349C95.517658,232.306335,94.559418,231.751273,90.73,230.52C78.19,227.61,72.85,246.88,85.4,249.8C85.4,249.8,85.4,249.8,85.4,249.8Z') + } + 20% { + d: path('M85.4,249.8C85.4,249.8,85.399999,249.800001,85.399999,249.800001C85.399999,249.800001,85.4,249.800002,85.4,249.800002C85.4,249.800002,90.484102,251.966034,95.043213,248.269966C100.484052,243.859082,98.694728,236.722769,97.073675,234.469349C95.517658,232.306335,94.559418,231.751273,90.73,230.52C78.19,227.61,72.85,246.88,85.4,249.8C85.4,249.8,85.4,249.8,85.4,249.8Z') + } + 30% { + d: path('M85.4,249.8C109.08,255.3,133.72,257.37,157.65,252.14C181.65,246.89,202.95,233.55,219.27,215.35C227.84,205.79,213.74,191.6,205.13,201.21C190.9,217.1,173.27,228.26,152.34,232.86C132.03,237.32,110.79,235.19,90.73,230.52C78.19,227.61,72.85,246.88,85.4,249.8C85.4,249.8,85.4,249.8,85.4,249.8Z') + } + 33.333333% { + d: path('M85.4,249.8C109.08,255.3,133.72,257.37,157.65,252.14C181.65,246.89,202.95,233.55,219.27,215.35C227.84,205.79,213.74,191.6,205.13,201.21C190.9,217.1,173.27,228.26,152.34,232.86C132.03,237.32,110.79,235.19,90.73,230.52C78.19,227.61,72.85,246.88,85.4,249.8C85.4,249.8,85.4,249.8,85.4,249.8Z') + } + 43.333333% { + d: path('M84.281285,246.076032C107.50521,254.051555,133.72,257.37,157.65,252.14C181.65,246.89,202.95,233.55,219.27,215.35C227.84,205.79,213.74,191.6,205.13,201.21C190.9,217.1,173.27,228.26,152.34,232.86C132.03,237.32,86.465691,239.82846,53.85604,207.193233C41.31604,204.283233,32.439249,213.928672,40.474905,219.54755C40.474905,219.54755,61.310295,238.187372,84.281285,246.076032Z') + } + 100% { + d: path('M84.281285,246.076032C107.50521,254.051555,133.72,257.37,157.65,252.14C181.65,246.89,202.95,233.55,219.27,215.35C227.84,205.79,213.74,191.6,205.13,201.21C190.9,217.1,173.27,228.26,152.34,232.86C132.03,237.32,86.465691,239.82846,53.85604,207.193233C41.31604,204.283233,32.439249,213.928672,40.474905,219.54755C40.474905,219.54755,61.310295,238.187372,84.281285,246.076032Z') + } +} + +#eB8dk2fHKWC6 { + animation: eB8dk2fHKWC6__m 3000ms linear infinite normal forwards +} + +@keyframes eB8dk2fHKWC6__m { + 0% { + d: path('M249.74,169.63C255.24,145.95,257.31,121.31,252.08,97.38C246.83,73.38,233.49,52.08,215.29,35.76C205.73,27.19,191.54,41.29,201.15,49.9C217.04,64.13,228.2,81.76,232.8,102.69C237.26,123,235.13,144.24,230.46,164.3C227.54,176.84,246.82,182.18,249.74,169.63C249.74,169.63,249.74,169.63,249.74,169.63Z') + } + 10% { + d: path('M250.887564,168.08137C250.887564,168.081368,250.887563,168.081375,250.887563,168.081375C250.887563,168.081375,253.7831,157.676613,244.778825,154.781475C235.762034,151.882313,232.694053,158.881918,231.752888,162.486547C231.017121,165.304508,231.564293,168.517464,232.231509,169.666243C233.407087,171.690293,235.517449,173.828597,238.467701,174.606956C241.339242,175.364549,245.542656,175.427978,248.770823,172.704057C248.770823,172.704057,250.400569,171.202441,250.887564,168.08137Z') + } + 20% { + d: path('M250.887564,168.08137C250.887564,168.081368,250.887563,168.081375,250.887563,168.081375C250.887563,168.081375,253.7831,157.676613,244.778825,154.781475C235.762034,151.882313,232.694053,158.881918,231.752888,162.486547C231.017121,165.304508,231.564293,168.517464,232.231509,169.666243C233.407087,171.690293,235.517449,173.828597,238.467701,174.606956C241.339242,175.364549,245.542656,175.427978,248.770823,172.704057C248.770823,172.704057,250.400569,171.202441,250.887564,168.08137Z') + } + 30% { + d: path('M249.74,169.63C255.24,145.95,257.31,121.31,252.08,97.38C246.83,73.38,233.49,52.08,215.29,35.76C205.73,27.19,191.54,41.29,201.15,49.9C217.04,64.13,228.2,81.76,232.8,102.69C237.26,123,235.13,144.24,230.46,164.3C227.54,176.84,246.82,182.18,249.74,169.63C249.74,169.63,249.74,169.63,249.74,169.63Z') + } + 33.333333% { + d: path('M249.74,169.63C255.24,145.95,257.31,121.31,252.08,97.38C246.83,73.38,233.49,52.08,215.29,35.76C205.73,27.19,191.54,41.29,201.15,49.9C217.04,64.13,228.2,81.76,232.8,102.69C237.26,123,235.13,144.24,230.46,164.3C227.54,176.84,246.82,182.18,249.74,169.63C249.74,169.63,249.74,169.63,249.74,169.63Z') + } + 43.333333% { + d: path('M241.985702,180.287452C255.201364,145.393106,257.31,121.31,252.08,97.38C246.83,73.38,233.49,52.08,215.29,35.76C205.73,27.19,189.760952,38.146938,199.370952,46.756938C229.706596,66.855753,234.126292,101.544407,234.194759,127.574104C235.798839,155.047874,216.192342,185.901625,205.13,201.21C199.980012,208.336696,214.039151,220.128533,219.270001,215.35C219.270001,215.35,237.299554,192.660656,241.985702,180.287452Z') + } + 100% { + d: path('M241.985702,180.287452C255.201364,145.393106,257.31,121.31,252.08,97.38C246.83,73.38,233.49,52.08,215.29,35.76C205.73,27.19,189.760952,38.146938,199.370952,46.756938C229.706596,66.855753,234.126292,101.544407,234.194759,127.574104C235.798839,155.047874,216.192342,185.901625,205.13,201.21C199.980012,208.336696,214.039151,220.128533,219.270001,215.35C219.270001,215.35,237.299554,192.660656,241.985702,180.287452Z') + } +} + +#eB8dk2fHKWC8 { + animation: eB8dk2fHKWC8__m 3000ms linear infinite normal forwards +} + +@keyframes eB8dk2fHKWC8__m { + 0% { + d: path('M171.68,7.71C148.17,1.51,123.61,-1.28,99.53,3.25C75.39,7.79,53.7,20.49,36.85,38.21C28.01,47.52,41.68,62.11,50.57,52.76C65.27,37.3,83.22,26.66,104.27,22.68C124.7,18.82,145.87,21.58,165.79,26.83C178.22,30.11,184.14,11,171.68,7.71C171.68,7.71,171.68,7.71,171.68,7.71Z') + } + 10% { + d: path('M171.58686,7.8192C164.834536,7.661923,162.882928,13.414575,162.613915,14.669774C162.613914,14.669774,161.858025,17.37084,162.366976,18.743708C162.782522,19.864622,163.527502,21.022768,164.723558,21.957074C165.842173,22.830886,168.859974,24.254302,168.859974,24.254302C168.859974,24.254302,168.859968,24.254306,168.859967,24.254304C181.289967,27.534304,184.046866,11.109212,171.586866,7.819212C171.586866,7.819212,171.58686,7.8192,171.58686,7.8192Z') + } + 20% { + d: path('M171.58686,7.8192C164.834536,7.661923,162.882928,13.414575,162.613915,14.669774C162.613914,14.669774,161.858025,17.37084,162.366976,18.743708C162.782522,19.864622,163.527502,21.022768,164.723558,21.957074C165.842173,22.830886,168.859974,24.254302,168.859974,24.254302C168.859974,24.254302,168.859968,24.254306,168.859967,24.254304C181.289967,27.534304,184.046866,11.109212,171.586866,7.819212C171.586866,7.819212,171.58686,7.8192,171.58686,7.8192Z') + } + 30% { + d: path('M171.68,7.71C148.17,1.51,123.61,-1.28,99.53,3.25C75.39,7.79,53.7,20.49,36.85,38.21C28.01,47.52,41.68,62.11,50.57,52.76C65.27,37.3,83.22,26.66,104.27,22.68C124.7,18.82,145.87,21.58,165.79,26.83C178.22,30.11,184.14,11,171.68,7.71C171.68,7.71,171.68,7.71,171.68,7.71Z') + } + 33.333333% { + d: path('M171.68,7.71C148.17,1.51,123.61,-1.28,99.53,3.25C75.39,7.79,53.7,20.49,36.85,38.21C28.01,47.52,41.68,62.11,50.57,52.76C65.27,37.3,83.22,26.66,104.27,22.68C124.7,18.82,145.87,21.58,165.79,26.83C178.22,30.11,184.14,11,171.68,7.71C171.68,7.71,171.68,7.71,171.68,7.71Z') + } + 43.333333% { + d: path('M154.601291,1.547478C127.732134,-3.659063,101.676041,0.16217,89.834975,4.047622C73.018778,9.565582,43.015709,29.967817,36.85,38.21C28.01,47.52,41.568561,62.002759,50.57,52.76C67.005248,35.884138,77.788003,22.937369,100.935291,18.024709C148.028227,8.029949,175.904245,24.591662,199.370952,46.756938C210.775532,51.88401,219.463487,39.878796,215.289997,35.759998C189.664787,10.470596,154.601291,1.547478,154.601291,1.547478Z') + } + 100% { + d: path('M154.601291,1.547478C127.732134,-3.659063,101.676041,0.16217,89.834975,4.047622C73.018778,9.565582,43.015709,29.967817,36.85,38.21C28.01,47.52,41.568561,62.002759,50.57,52.76C67.005248,35.884138,77.788003,22.937369,100.935291,18.024709C148.028227,8.029949,175.904245,24.591662,199.370952,46.756938C210.775532,51.88401,219.463487,39.878796,215.289997,35.759998C189.664787,10.470596,154.601291,1.547478,154.601291,1.547478Z') + } +} + +#eB8dk2fHKWC10 { + animation: eB8dk2fHKWC10__m 3000ms linear infinite normal forwards +} + +@keyframes eB8dk2fHKWC10__m { + 0% { + d: path('M5.83,85.46C0.33,109.14,-1.74,133.78,3.49,157.71C8.74,181.71,22.08,203.01,40.28,219.33C49.84,227.9,64.03,213.8,54.42,205.19C38.53,190.96,27.37,173.33,22.77,152.4C18.31,132.09,20.44,110.85,25.11,90.79C28.03,78.25,8.75,72.91,5.83,85.46L5.83,85.46Z') + } + 3.333333% { + d: path('M4.90273,88.748028C1.236063,104.534694,0.694614,122.375568,4.181281,138.328902C7.119767,155.82704,18.329955,178.442148,31.722495,188.944182C39.448991,194.869945,48.960631,181.919808,35.808325,167.974185C27.053341,155.46954,26.778713,144.786038,23.180834,130.168643C19.139468,114.899686,18.114526,100.786543,20.952073,87.411869C21.572437,79.045425,6.897064,77.595457,4.916661,86.915441L4.90273,88.748028Z') + } + 10% { + d: path('M3.04819,95.324083C3.04819,95.324083,5.563842,99.566705,5.563842,99.566705C5.563842,99.566705,11.253926,104.287825,15.031546,103.153927C19.091035,103.791214,24.274539,98.764542,25.851733,95.404259C27.275674,92.370488,25.596139,87.698114,24.002501,85.705929C20.798403,80.519057,13.463578,80.659628,12.636219,80.655608C8.65731,80.636275,3.191193,86.96637,3.089982,89.826322L3.04819,95.324083Z') + } + 20% { + d: path('M3.04819,95.324083C3.04819,95.324083,5.563842,99.566705,5.563842,99.566705C5.563842,99.566705,11.253926,104.287825,15.031546,103.153927C19.091035,103.791214,24.274539,98.764542,25.851733,95.404259C27.275674,92.370488,25.596139,87.698114,24.002501,85.705929C20.798403,80.519057,13.463578,80.659628,12.636219,80.655608C8.65731,80.636275,3.191193,86.96637,3.089982,89.826322L3.04819,95.324083Z') + } + 30% { + d: path('M5.83,85.46C0.33,109.14,-1.74,133.78,3.49,157.71C8.74,181.71,22.08,203.01,40.28,219.33C49.84,227.9,64.03,213.8,54.42,205.19C38.53,190.96,27.37,173.33,22.77,152.4C18.31,132.09,20.44,110.85,25.11,90.79C28.03,78.25,8.75,72.91,5.83,85.46L5.83,85.46Z') + } + 33.333333% { + d: path('M5.83,85.46C0.33,109.14,-1.74,133.78,3.49,157.71C8.74,181.71,22.08,203.01,40.28,219.33C49.84,227.9,64.03,213.8,54.42,205.19C38.53,190.96,27.37,173.33,22.77,152.4C18.31,132.09,20.44,110.85,25.11,90.79C28.03,78.25,8.75,72.91,5.83,85.46L5.83,85.46Z') + } + 43.333333% { + d: path('M36.436007,38.11681C-7.498754,85.801617,-0.826469,134.911183,5.658972,158.164678C15.873566,192.855226,35.43893,215.965329,40.28,219.33C49.84,227.9,63.271136,215.585685,53.661136,206.975685C38.384036,191.128398,25.999041,166.121323,22.77,152.4C12.429986,121.009925,27.020185,73.061168,50.245766,52.61587C65.058304,39.576508,51.054205,23.186387,36.436019,38.116819L36.436007,38.11681Z') + } + 100% { + d: path('M36.436007,38.11681C-7.498754,85.801617,-0.826469,134.911183,5.658972,158.164678C15.873566,192.855226,35.43893,215.965329,40.28,219.33C49.84,227.9,63.271136,215.585685,53.661136,206.975685C38.384036,191.128398,25.999041,166.121323,22.77,152.4C12.429986,121.009925,27.020185,73.061168,50.245766,52.61587C65.058304,39.576508,51.054205,23.186387,36.436019,38.116819L36.436007,38.11681Z') + } +} + +#eB8dk2fHKWC11_ts { + animation: eB8dk2fHKWC11_ts__ts 3000ms linear infinite normal forwards +} + +@keyframes eB8dk2fHKWC11_ts__ts { + 0% { + transform: translate(139.784999px, 140.086986px) scale(1, 1) + } + 30% { + transform: translate(139.784999px, 140.086986px) scale(1, 1) + } + 43.333333% { + transform: translate(139.784999px, 140.086986px) scale(0.102813, 0.102813) + } + 50% { + transform: translate(139.784999px, 140.086986px) scale(0.102813, 0.102813) + } + 60% { + transform: translate(139.784999px, 140.086986px) scale(1.001075, 1.001075) + } + 100% { + transform: translate(139.784999px, 140.086986px) scale(1.001075, 1.001075) + } +} + +#eB8dk2fHKWC11 { + animation: eB8dk2fHKWC11_c_o 3000ms linear infinite normal forwards +} + +@keyframes eB8dk2fHKWC11_c_o { + 0% { + opacity: 0 + } + 30% { + opacity: 0 + } + 36.666667% { + opacity: 0 + } + 40% { + opacity: 1 + } + 100% { + opacity: 1 + } +} + +#eB8dk2fHKWC13_tr { + animation: eB8dk2fHKWC13_tr__tr 3000ms linear infinite normal forwards +} + +@keyframes eB8dk2fHKWC13_tr__tr { + 0% { + transform: translate(139.785004px, 140.086979px) rotate(0deg) + } + 10% { + transform: translate(139.785004px, 140.086979px) rotate(0deg) + } + 20% { + transform: translate(139.785004px, 140.086979px) rotate(90.041277deg) + } + 100% { + transform: translate(139.785004px, 140.086979px) rotate(90.041277deg) + } +} + +#eB8dk2fHKWC13 { + animation: eB8dk2fHKWC13_c_o 3000ms linear infinite normal forwards +} + +@keyframes eB8dk2fHKWC13_c_o { + 0% { + opacity: 0 + } + 6.666667% { + opacity: 0 + } + 10% { + opacity: 1 + } + 13.333333% { + opacity: 1 + } + 20% { + opacity: 0 + } + 100% { + opacity: 0 + } +} \ No newline at end of file