{"version":3,"sources":["/opt/tiger/compile_path/src/code.byted.org/dp/survey_quest_fe/src/components/Loading.jsx"],"names":["show","squares","Array","from","length","_","i","in","timeout","unmountOnExit","status","LoadingWrap","className","loadCls","map","square","key","styled","props","squareAnimation","keyframes","hueRotate","css"],"mappings":"0FAAA,sDAKe,gBAAc,IAAXA,EAAW,EAAXA,KACVC,EAAUC,MAAMC,KAAK,CAAEC,OAAQ,IAAK,SAACC,EAAGC,GAAJ,OAAUA,KACpD,OACE,kBAAC,IAAD,CAAYC,GAAIP,EAAMQ,QAAS,IAAKC,eAAa,IAC9C,SAAAC,GAAM,OACL,kBAACC,EAAD,CAAaD,OAAQA,GACnB,yBAAKE,UAAWC,GACbZ,EAAQa,KAAI,SAAAC,GAAM,OACjB,yBAAKH,UAAU,SAASI,IAAKD,aAS3C,IAEMJ,EAAcM,YAAH,2BAAGA,CAAH,2JAUJ,SAAAC,GACT,OAAQA,EAAMR,QACZ,QACE,OAAO,EACT,IAAK,SACL,IAAK,UACH,OAAO,KAhBE,KAqBXS,EAAkBC,YAAH,kDAvBN,GAuBM,sBAvBN,GAuBM,sBAMNL,GANM,wBAQJA,GARI,wBASJA,GATI,UAvBN,GAuBM,gBAWNA,GAXM,UAvBN,GAuBM,gBAvBN,GAuBM,UAvBN,GAuBM,kBAvBN,GAuBM,UAvBN,GAuBM,kBAvBN,GAuBM,UAecA,GAfd,gBAvBN,GAuBM,UAiBYA,GAjBZ,sBAkBEA,GAlBF,wBAoBIA,GApBJ,wBAvBN,GAuBM,sBAvBN,GAuBM,2BA2BfM,EAAYD,YAAH,8DAKTP,EAAUS,YAAH,2BAEFP,GAFE,aAGDA,GAHC,wCAKEM,EALF,IAtDI,GAsDJ,uEAUAN,GAVA,aAWCA,GAXD,iTAqBII,EArBJ,IAtDI,GAsDJ,+BAsBPjB,MAAMC,KACR,CAAEC,OAAQ,IACV,SAACC,EAAGC,GAAJ,sCACkBA,EADlB,yCA9Ea,GAgFuB,EAAKA,EAFzC,uBAxBS,M","file":"static/js/common.bd46d761.js","sourcesContent":["import React from 'react';\nimport styled from '@emotion/styled';\nimport { css, keyframes } from 'emotion';\nimport Transition from 'react-transition-group/Transition';\n\nexport default ({ show }) => {\n const squares = Array.from({ length: 8 }, (_, i) => i);\n return (\n \n {status => (\n \n
\n {squares.map(square => (\n
\n ))}\n
\n \n )}\n \n );\n};\n\nconst square = 32;\nconst duration = 10;\nconst LoadingWrap = styled.div`\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n display: flex;\n justify-content: center;\n align-items: center;\n transition: opacity 300ms ease-out;\n opacity: ${props => {\n switch (props.status) {\n default:\n return 1;\n case 'exited':\n case 'exiting':\n return 0;\n }\n }};\n`;\n\nconst squareAnimation = keyframes`\n 0% {left: 0; top: 0}\n 10.5% {left: 0; top: 0;}\n 12.5% {left: ${square}px; top: 0;}\n \n 23% {left: ${square}px; top: 0;}\n 25% {left: ${square * 2}px; top: 0;}\n \n 35.5% {left: ${square * 2}px; top: 0;}\n 37.5% {left: ${square * 2}px; top: ${square}px;}\n\n 48% {left: ${square * 2}px; top: ${square}px;}\n 50% {left: ${square}px; top: ${square}px;}\n\n 60.5% {left: ${square}px; top: ${square}px;}\n 62.5% {left: ${square}px; top: ${square * 2}px;}\n\n 73% {left: ${square}px; top: ${square * 2}px;}\n 75% {left: 0; top: ${square * 2}px;}\n\n 85.5% {left: 0; top: ${square * 2}px;}\n 87.5% {left: 0; top: ${square}px;}\n\n 98% {left: 0; top: ${square}px;}\n 100% {left: 0; top: 0;}\n`;\n\nconst hueRotate = keyframes`\n 0% {filter: hue-rotate(0deg)}\n 100% {filter: hue-rotate(360deg)}\n`;\n\nconst loadCls = css`\n position: relative;\n width: ${square * 3}px;\n height: ${square * 3}px;\n transform: rotate(45deg);\n animation: ${hueRotate} ${duration}s linear infinite both;\n .square {\n position: absolute;\n top: 0;\n left: 0;\n width: ${square - 4}px;\n height: ${square - 4}px;\n margin: 2px;\n border-radius: 4px;\n background: #07a;\n background: -webkit-linear-gradient(45deg, #fa0 40%, #0c9 60%);\n background: -o-linear-gradient(45deg, #fa0 40%, #0c9 60%);\n background: linear-gradient(45deg, #fa0 40%, #0c9 60%);\n background-size: cover;\n background-position: center;\n background-attachment: fixed;\n animation: ${squareAnimation} ${duration}s ease-in-out infinite both;\n ${Array.from(\n { length: 8 },\n (_, i) => `\n &:nth-of-type(${i}){\n animation-delay: -${(duration / 7) * i}s\n }\n `,\n )}\n }\n`;\n"],"sourceRoot":""}