carbon-react
Version:
A library of reusable React components for easily building user interfaces.
2 lines (1 loc) • 2.73 kB
JavaScript
;var e=require("styled-components"),r=require("styled-system"),t=require("./loader-spinner.config.js"),a=require("../typography/typography.component.js");function n(e){return e&&e.__esModule?e:{default:e}}require("react/jsx-runtime"),require("react");var i=n(e);const o=(e,r)=>{switch(r){case"neutral":return e?"var(--colorsSemanticNeutral500)":"var(--colorsSemanticNeutral200)";case"gradient-grey":return e?"#00D639":"#0000001A";case"gradient-white":return e?"#00D639":"var(--colorsActionMajorYang100)";case"inverse":return"var(--colorsActionMajorYang100)";default:return e?"var(--colorsActionMajor500)":"var(--colorsActionMajor150)"}},s=i.default.div.withConfig({displayName:"loader-spinner.style__StyledSpinnerWrapper",componentId:"sc-3cab43b4-0"})([""," display:flex;flex-direction:",";"],r.margin,(({size:e})=>"extra-small"===e?"row":"column")),c=i.default(a.Typography).withConfig({displayName:"loader-spinner.style__StyledLabel",componentId:"sc-3cab43b4-1"})(["",""],(({size:r})=>e.css(["display:flex;justify-content:center;text-align:center;",";"],"extra-small"===r?"margin-left: var(--spacing100)":`margin-top: ${t.LOADER_SPINNER_SIZE_PARAMS[r].labelMarginTop}px`))),d=i.default.svg.withConfig({displayName:"loader-spinner.style__StyledSpinnerCircleSvg",componentId:"sc-3cab43b4-2"})(["",";"],(({size:r,isTracked:a,hasMotion:n,isGradientVariant:i,animationTime:s,variant:c})=>{const d=`${t.LOADER_SPINNER_SIZE_PARAMS[r].wrapperDimensions}px`;return r&&e.css(["height:",";min-height:",';circle[data-role="outer-arc"]{fill:transparent;stroke-width:',"px;stroke:",";",' cx:12px;cy:12px;r:10px;}circle[data-role="inner-arc"]{fill:transparent;stroke-width:',"px;stroke:",";stroke-linecap:round;stroke-dasharray:100px;stroke-dashoffset:80px;transform-origin:12px 12px 0px;cx:12px;cy:12px;r:10px;transform:rotate(270deg);@keyframes gradientAnimation{0%{stroke:#00d639;}33%{stroke:#11afff;}66%{stroke:#8f49fe;}}@keyframes trackedAnimation{from{stroke-dasharray:100;stroke-dashoffset:100;}to{stroke-dasharray:100;stroke-dashoffset:20;}}@keyframes untrackedAnimation{0%{transform:rotate(0deg);stroke-dasharray:100;}40%{stroke-dasharray:80;}80%{stroke-dasharray:100;}100%{transform:rotate(360deg);}}animation-name:",",",";",";animation-timing-function:cubic-bezier(0.2,0.1,0.8,1);animation-iteration-count:",";"],d,d,t.LOADER_SPINNER_SIZE_PARAMS[r].strokeWidth,o(!1,c),"inverse"===c&&"stroke-opacity: 0.3;",t.LOADER_SPINNER_SIZE_PARAMS[r].strokeWidth,o(!0,c),a&&!i?"trackedAnimation":"untrackedAnimation","gradient-grey"===c||"gradient-white"===c?"gradientAnimation":"none",n&&`animation-duration: ${s}s`,n?"infinite":"none")}));exports.StyledLabel=c,exports.StyledSpinnerCircleSvg=d,exports.StyledSpinnerWrapper=s;