mike-at-redspace/Loader.jsx

## Loader.jsx
import React from 'react';
import styled from '@emotion/styled';

const Loader = styled.div`
  position: relative;
`;

const Flex = styled.div`
  display: flex;
  flex-wrap: nowrap;
  overflow-x: hidden;
  gap: 8px;
`;

const Column = styled.div`
  flex: 0 0 33%;
  width: 100%;

  @media (min-width: 768px) {
    flex: 0 0 25%;
  }
`;

const Head = styled(Column)`
  height: 20px;
  margin-bottom: 12px;
  max-width: 60%;

  &::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: var(--glare-bg);
    transform: translateX(-100%);
    animation: skeleton-glare 1.75s infinite ease-out;
    z-index: 1;
  }
`;

const VisuallyHidden = styled.div`
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
`;

const Loading = () => {
  return (
    <Loader aria-busy="true" aria-describedby="loading-description">

      <Flex>
        <Head aria-live="polite" aria-label="Loading" />

        <Column />

        <Column />

        <Column />

        <Column css={`
          @media (min-width: 768px) {
            &:nth-child(5) {
              margin-left: -25%;
            }
          }
        `} />

      </Flex>

      <VisuallyHidden id="loading-description">
        Please wait while content is being loaded.
      </VisuallyHidden>

    </Loader>
  );
}

export default Loading;
	import React from 'react';
	import styled from '@emotion/styled';

	const Loader = styled.div`
	position: relative;
	`;

	const Flex = styled.div`
	display: flex;
	flex-wrap: nowrap;
	overflow-x: hidden;
	gap: 8px;
	`;

	const Column = styled.div`
	flex: 0 0 33%;
	width: 100%;

	@media (min-width: 768px) {
	flex: 0 0 25%;
	}
	`;

	const Head = styled(Column)`
	height: 20px;
	margin-bottom: 12px;
	max-width: 60%;

	&::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: var(--glare-bg);
	transform: translateX(-100%);
	animation: skeleton-glare 1.75s infinite ease-out;
	z-index: 1;
	}
	`;

	const VisuallyHidden = styled.div`
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	border: 0;
	clip: rect(0 0 0 0);
	overflow: hidden;
	`;

	const Loading = () => {
	return (
	<Loader aria-busy="true" aria-describedby="loading-description">

	<Flex>
	<Head aria-live="polite" aria-label="Loading" />

	<Column />

	<Column />

	<Column />

	<Column css={`
	@media (min-width: 768px) {
	&:nth-child(5) {
	margin-left: -25%;
	}
	}
	`} />

	</Flex>

	<VisuallyHidden id="loading-description">
	Please wait while content is being loaded.
	</VisuallyHidden>

	</Loader>
	);
	}

	export default Loading;