@gsretail.com/gui-core/build/esm/core/LoadingProgress/LoadingProgressContainer.js

A skeleton to create your own React component library using Rollup, TypeScript, Sass and Storybook

import{__makeTemplateObject as n,__assign as e}from"tslib";import t from"react";import o from"@emotion/styled";import{Box as r,Backdrop as a,Typography as i}from"@mui/material";var p,s=o(r)(p||(p=n(["\n  .progress-inner-wrapper {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    .progress-box {\n      position: relative;\n      transform: scale(1.5);\n      left: -18px;\n      .bar-1, .bar-2, .bar-3{\n      animation: loop 3s cubic-bezier(0.5,0,0.5,1) infinite;\n      }\n      .bar {\n        height: 13px;\n        border-radius: 10em;\n\n        &-1 {\n          transform: rotate(-30deg);\n          animation-delay: -0.6s !important;\n          position: absolute;\n          width: 25px;\n          top:0;\n          left:0;\n          background-color: #BED730;\n        }\n        &-2 {\n          transform: rotate(30deg);\n          animation-delay: -0.4s !important;\n          position: absolute;\n          width: 27px;\n          background-color: #F41E6B;\n          top: 6.5px;\n          left:0;\n        }\n        &-3 {\n          transform: rotate(-30deg);\n          animation-delay: -0.2s !important;\n          position: absolute;\n          width: 25px;\n          background-color: #00B1CF;\n          top: 13.5px;\n          left: 2px;\n        }\n      }\n      @keyframes loop {\n        0% {\n          opacity: 1;\n        }\n        50% {\n          opacity: 0;\n        }\n        100% {\n          opacity: 1;\n        }\n      }\n\n      .number-wrapper {\n        position: absolute;\n        left: 5.5px;\n        top: 3px;\n        animation: loop 3s cubic-bezier(0.5,0,0.5,1) infinite;\n      }\n\n      .number {\n        &-1 {\n          position: absolute;\n          height: 4.7px;\n          width: 11.7px;\n          background-color: #fff;\n          border-radius: 10em;\n          transform: rotate(-30deg);\n          top: 1.5px;\n        }\n        &-2 {\n          position: absolute;\n          width: 4.7px;\n          height: 20px;\n          background-color: #fff;\n          border-radius: 10em;\n          left: 6.5px;\n        }\n      }\n    }\n  }\n"],["\n  .progress-inner-wrapper {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n\n    .progress-box {\n      position: relative;\n      transform: scale(1.5);\n      left: -18px;\n      .bar-1, .bar-2, .bar-3{\n      animation: loop 3s cubic-bezier(0.5,0,0.5,1) infinite;\n      }\n      .bar {\n        height: 13px;\n        border-radius: 10em;\n\n        &-1 {\n          transform: rotate(-30deg);\n          animation-delay: -0.6s !important;\n          position: absolute;\n          width: 25px;\n          top:0;\n          left:0;\n          background-color: #BED730;\n        }\n        &-2 {\n          transform: rotate(30deg);\n          animation-delay: -0.4s !important;\n          position: absolute;\n          width: 27px;\n          background-color: #F41E6B;\n          top: 6.5px;\n          left:0;\n        }\n        &-3 {\n          transform: rotate(-30deg);\n          animation-delay: -0.2s !important;\n          position: absolute;\n          width: 25px;\n          background-color: #00B1CF;\n          top: 13.5px;\n          left: 2px;\n        }\n      }\n      @keyframes loop {\n        0% {\n          opacity: 1;\n        }\n        50% {\n          opacity: 0;\n        }\n        100% {\n          opacity: 1;\n        }\n      }\n\n      .number-wrapper {\n        position: absolute;\n        left: 5.5px;\n        top: 3px;\n        animation: loop 3s cubic-bezier(0.5,0,0.5,1) infinite;\n      }\n\n      .number {\n        &-1 {\n          position: absolute;\n          height: 4.7px;\n          width: 11.7px;\n          background-color: #fff;\n          border-radius: 10em;\n          transform: rotate(-30deg);\n          top: 1.5px;\n        }\n        &-2 {\n          position: absolute;\n          width: 4.7px;\n          height: 20px;\n          background-color: #fff;\n          border-radius: 10em;\n          left: 6.5px;\n        }\n      }\n    }\n  }\n"]))),l=function(n){var o=n.processing;n.loadingPercentage;var p=n.sx,l=void 0===p?{}:p;return t.createElement(a,{sx:e({color:"#fff",zIndex:function(n){return n.zIndex.tooltip+1}},l),open:o},t.createElement(s,{className:"progress-wrapper"},t.createElement(r,{className:"progress-inner-wrapper"},t.createElement(r,{className:"progress-box"},t.createElement("div",{className:"bar bar-1"}),t.createElement("div",{className:"bar bar-2"}),t.createElement("div",{className:"bar bar-3"}),t.createElement("div",{className:"number-wrapper"},t.createElement("div",{className:"number-1"}),t.createElement("div",{className:"number-2"})))),t.createElement(r,{style:{marginTop:60}},t.createElement(i,{color:"white",style:{fontWeight:700}},"잠시만 기다려주세요..."))))};export{l as default};