@grafana/ui/dist/esm/components/LoadingBar/LoadingBar.mjs.map

Grafana Components Library

{"version":3,"file":"LoadingBar.mjs","sources":["../../../../src/components/LoadingBar/LoadingBar.tsx"],"sourcesContent":["import { css, keyframes } from '@emotion/css';\nimport { CSSProperties } from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes/ThemeContext';\n\nexport interface LoadingBarProps {\n  width: number;\n  delay?: number;\n  ariaLabel?: string;\n}\n\nconst BAR_WIDTH = 28;\nconst MILLISECONDS_PER_PIXEL = 2.4;\nconst MIN_DURATION_MS = 500;\nconst MAX_DURATION_MS = 4000;\nconst DEFAULT_ANIMATION_DELAY = 300;\nconst MAX_TRANSLATE_X = (100 / BAR_WIDTH) * 100;\n\nexport function LoadingBar({ width, delay = DEFAULT_ANIMATION_DELAY, ariaLabel = 'Loading bar' }: LoadingBarProps) {\n  const durationMs = Math.min(Math.max(Math.round(width * MILLISECONDS_PER_PIXEL), MIN_DURATION_MS), MAX_DURATION_MS);\n  const styles = useStyles2(getStyles, delay, durationMs);\n  const containerStyles: CSSProperties = {\n    overflow: 'hidden',\n  };\n\n  return (\n    <div style={containerStyles}>\n      <div aria-label={ariaLabel} role=\"status\" className={styles.bar} />\n    </div>\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2, delay: number, duration: number) => {\n  const animation = keyframes({\n    '0%': {\n      transform: 'translateX(-100%)',\n    },\n    // this gives us a delay between iterations\n    '85%, 100%': {\n      transform: `translateX(${MAX_TRANSLATE_X}%)`,\n    },\n  });\n\n  return {\n    bar: css({\n      width: BAR_WIDTH + '%',\n      height: 1,\n      background: `linear-gradient(90deg, transparent 0%, ${theme.colors.primary.main} 80.75%, transparent 100%)`,\n      transform: 'translateX(-100%)',\n      willChange: 'transform',\n      [theme.transitions.handleMotion('no-preference')]: {\n        animationName: animation,\n        // an initial delay to prevent the loader from showing if the response is faster than the delay\n        animationDelay: `${delay}ms`,\n        animationTimingFunction: 'linear',\n        animationIterationCount: 'infinite',\n        animationDuration: `${duration}ms`,\n      },\n      [theme.transitions.handleMotion('reduce')]: {\n        animationName: animation,\n        // an initial delay to prevent the loader from showing if the response is faster than the delay\n        animationDelay: `${delay}ms`,\n        animationTimingFunction: 'linear',\n        animationIterationCount: 'infinite',\n        animationDuration: `${4 * duration}ms`,\n      },\n    }),\n  };\n};\n"],"names":[],"mappings":";;;;;AAaA,MAAM,SAAA,GAAY,EAAA;AAClB,MAAM,sBAAA,GAAyB,GAAA;AAC/B,MAAM,eAAA,GAAkB,GAAA;AACxB,MAAM,eAAA,GAAkB,GAAA;AACxB,MAAM,uBAAA,GAA0B,GAAA;AAChC,MAAM,eAAA,GAAmB,MAAM,SAAA,GAAa,GAAA;AAErC,SAAS,WAAW,EAAE,KAAA,EAAO,QAAQ,uBAAA,EAAyB,SAAA,GAAY,eAAc,EAAoB;AACjH,EAAA,MAAM,UAAA,GAAa,IAAA,CAAK,GAAA,CAAI,IAAA,CAAK,GAAA,CAAI,IAAA,CAAK,KAAA,CAAM,KAAA,GAAQ,sBAAsB,CAAA,EAAG,eAAe,CAAA,EAAG,eAAe,CAAA;AAClH,EAAA,MAAM,MAAA,GAAS,UAAA,CAAW,SAAA,EAAW,KAAA,EAAO,UAAU,CAAA;AACtD,EAAA,MAAM,eAAA,GAAiC;AAAA,IACrC,QAAA,EAAU;AAAA,GACZ;AAEA,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAO,eAAA,EACV,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,YAAA,EAAY,SAAA,EAAW,IAAA,EAAK,QAAA,EAAS,SAAA,EAAW,MAAA,CAAO,KAAK,CAAA,EACnE,CAAA;AAEJ;AAEA,MAAM,SAAA,GAAY,CAAC,KAAA,EAAsB,KAAA,EAAe,QAAA,KAAqB;AAC3E,EAAA,MAAM,YAAY,SAAA,CAAU;AAAA,IAC1B,IAAA,EAAM;AAAA,MACJ,SAAA,EAAW;AAAA,KACb;AAAA;AAAA,IAEA,WAAA,EAAa;AAAA,MACX,SAAA,EAAW,cAAc,eAAe,CAAA,EAAA;AAAA;AAC1C,GACD,CAAA;AAED,EAAA,OAAO;AAAA,IACL,KAAK,GAAA,CAAI;AAAA,MACP,OAAO,SAAA,GAAY,GAAA;AAAA,MACnB,MAAA,EAAQ,CAAA;AAAA,MACR,UAAA,EAAY,CAAA,uCAAA,EAA0C,KAAA,CAAM,MAAA,CAAO,QAAQ,IAAI,CAAA,0BAAA,CAAA;AAAA,MAC/E,SAAA,EAAW,mBAAA;AAAA,MACX,UAAA,EAAY,WAAA;AAAA,MACZ,CAAC,KAAA,CAAM,WAAA,CAAY,YAAA,CAAa,eAAe,CAAC,GAAG;AAAA,QACjD,aAAA,EAAe,SAAA;AAAA;AAAA,QAEf,cAAA,EAAgB,GAAG,KAAK,CAAA,EAAA,CAAA;AAAA,QACxB,uBAAA,EAAyB,QAAA;AAAA,QACzB,uBAAA,EAAyB,UAAA;AAAA,QACzB,iBAAA,EAAmB,GAAG,QAAQ,CAAA,EAAA;AAAA,OAChC;AAAA,MACA,CAAC,KAAA,CAAM,WAAA,CAAY,YAAA,CAAa,QAAQ,CAAC,GAAG;AAAA,QAC1C,aAAA,EAAe,SAAA;AAAA;AAAA,QAEf,cAAA,EAAgB,GAAG,KAAK,CAAA,EAAA,CAAA;AAAA,QACxB,uBAAA,EAAyB,QAAA;AAAA,QACzB,uBAAA,EAAyB,UAAA;AAAA,QACzB,iBAAA,EAAmB,CAAA,EAAG,CAAA,GAAI,QAAQ,CAAA,EAAA;AAAA;AACpC,KACD;AAAA,GACH;AACF,CAAA;;;;"}