@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} 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,SAAY,GAAA,EAAA;AAClB,MAAM,sBAAyB,GAAA,GAAA;AAC/B,MAAM,eAAkB,GAAA,GAAA;AACxB,MAAM,eAAkB,GAAA,GAAA;AACxB,MAAM,uBAA0B,GAAA,GAAA;AAChC,MAAM,eAAA,GAAmB,MAAM,SAAa,GAAA,GAAA;AAErC,SAAS,WAAW,EAAE,KAAA,EAAO,QAAQ,uBAAyB,EAAA,SAAA,GAAY,eAAkC,EAAA;AACjH,EAAA,MAAM,UAAa,GAAA,IAAA,CAAK,GAAI,CAAA,IAAA,CAAK,GAAI,CAAA,IAAA,CAAK,KAAM,CAAA,KAAA,GAAQ,sBAAsB,CAAA,EAAG,eAAe,CAAA,EAAG,eAAe,CAAA;AAClH,EAAA,MAAM,MAAS,GAAA,UAAA,CAAW,SAAW,EAAA,KAAA,EAAO,UAAU,CAAA;AACtD,EAAA,MAAM,eAAiC,GAAA;AAAA,IACrC,QAAU,EAAA;AAAA,GACZ;AAEA,EACE,uBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,KAAA,EAAO,eACV,EAAA,QAAA,kBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,YAAA,EAAY,SAAW,EAAA,SAAA,EAAW,MAAO,CAAA,GAAA,EAAK,CACrD,EAAA,CAAA;AAEJ;AAEA,MAAM,SAAY,GAAA,CAAC,KAAsB,EAAA,KAAA,EAAe,QAAqB,KAAA;AAC3E,EAAA,MAAM,YAAY,SAAU,CAAA;AAAA,IAC1B,IAAM,EAAA;AAAA,MACJ,SAAW,EAAA;AAAA,KACb;AAAA;AAAA,IAEA,WAAa,EAAA;AAAA,MACX,SAAA,EAAW,cAAc,eAAe,CAAA,EAAA;AAAA;AAC1C,GACD,CAAA;AAED,EAAO,OAAA;AAAA,IACL,KAAK,GAAI,CAAA;AAAA,MACP,OAAO,SAAY,GAAA,GAAA;AAAA,MACnB,MAAQ,EAAA,CAAA;AAAA,MACR,UAAY,EAAA,CAAA,uCAAA,EAA0C,KAAM,CAAA,MAAA,CAAO,QAAQ,IAAI,CAAA,0BAAA,CAAA;AAAA,MAC/E,SAAW,EAAA,mBAAA;AAAA,MACX,UAAY,EAAA,WAAA;AAAA,MACZ,CAAC,KAAM,CAAA,WAAA,CAAY,YAAa,CAAA,eAAe,CAAC,GAAG;AAAA,QACjD,aAAe,EAAA,SAAA;AAAA;AAAA,QAEf,cAAA,EAAgB,GAAG,KAAK,CAAA,EAAA,CAAA;AAAA,QACxB,uBAAyB,EAAA,QAAA;AAAA,QACzB,uBAAyB,EAAA,UAAA;AAAA,QACzB,iBAAA,EAAmB,GAAG,QAAQ,CAAA,EAAA;AAAA,OAChC;AAAA,MACA,CAAC,KAAM,CAAA,WAAA,CAAY,YAAa,CAAA,QAAQ,CAAC,GAAG;AAAA,QAC1C,aAAe,EAAA,SAAA;AAAA;AAAA,QAEf,cAAA,EAAgB,GAAG,KAAK,CAAA,EAAA,CAAA;AAAA,QACxB,uBAAyB,EAAA,QAAA;AAAA,QACzB,uBAAyB,EAAA,UAAA;AAAA,QACzB,iBAAA,EAAmB,CAAG,EAAA,CAAA,GAAI,QAAQ,CAAA,EAAA;AAAA;AACpC,KACD;AAAA,GACH;AACF,CAAA;;;;"}