Source

adminjs-design-system/src/atoms/loader.tsx

  1. /* eslint-disable import/prefer-default-export */
  2. import React from 'react'
  3. import styled from 'styled-components'
  4. import { Box } from './box/box'
  5. import { cssClass } from '../utils/css-class'
  6. const Spinner = styled.div.attrs({
  7. className: 'lds-facebook',
  8. })`
  9. & {
  10. display: inline-block;
  11. position: relative;
  12. width: 64px;
  13. height: 64px;
  14. }
  15. & div {
  16. display: inline-block;
  17. position: absolute;
  18. left: 6px;
  19. width: 13px;
  20. background: ${({ theme }): string => theme.colors.primary100};
  21. animation: lds-facebook 1.2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
  22. }
  23. & div:nth-child(1) {
  24. left: 6px;
  25. animation-delay: -0.24s;
  26. }
  27. & div:nth-child(2) {
  28. left: 26px;
  29. animation-delay: -0.12s;
  30. }
  31. & div:nth-child(3) {
  32. left: 45px;
  33. animation-delay: 0;
  34. }
  35. @keyframes lds-facebook {
  36. 0% {
  37. top: 6px;
  38. height: 51px;
  39. }
  40. 50%, 100% {
  41. top: 19px;
  42. height: 26px;
  43. }
  44. }
  45. `
  46. /**
  47. * @classdesc
  48. *
  49. * <img src="components/loader.png" />
  50. *
  51. * Simple loader
  52. *
  53. * ### Usage
  54. *
  55. * ```javascript
  56. * import { Loader } from '@adminjs/design-system'
  57. * ```
  58. *
  59. * @component
  60. * @see {@link https://storybook.adminjs.co/?path=/story/designsystem-atoms-loader--default Storybook}
  61. * @hideconstructor
  62. * @subcategory Atoms
  63. * @example
  64. * return (
  65. * <Loader/>
  66. * )
  67. * @section design-system
  68. */
  69. const Loader: React.FC = () => (
  70. <Box
  71. p="x3"
  72. style={{ textAlign: 'center' }}
  73. data-testid="Loader"
  74. className={cssClass('Loader')}
  75. >
  76. <Spinner>
  77. <div />
  78. <div />
  79. <div />
  80. </Spinner>
  81. </Box>
  82. )
  83. export { Loader }
  84. export default Loader