progress.tsx 649 B

12345678910111213141516171819202122232425262728293031
  1. import type {CSSProperties} from 'react';
  2. import styled from '@emotion/styled';
  3. /**
  4. * A simple progress bar.
  5. * ```
  6. * <Meter>
  7. * <Value percent={0.75} />
  8. * </Meter>
  9. * ```
  10. *
  11. * Extend the components to set a background color.
  12. *
  13. * Return multiple <Value /> components to render multiple bars directly on top
  14. * of each other with `position:absolute;`.
  15. */
  16. export const Meter = styled('div')`
  17. position: relative;
  18. height: 100%;
  19. width: 100%;
  20. pointer-events: none;
  21. `;
  22. export const Value = styled('span')<{
  23. style: {width: string} & CSSProperties;
  24. }>`
  25. max-width: 100%;
  26. position: absolute;
  27. height: 100%;
  28. pointer-events: none;
  29. `;