import React from 'react';
import { styled } from '@storybook/theming';
import { transparentize, opacify } from 'polished';
import { rotate360 } from '../shared/animation';

const LoaderWrapper = styled.div(({ theme }) => ({
  borderRadius: '3em',
  cursor: 'progress',
  display: 'inline-block',
  overflow: 'hidden',
  position: 'absolute',
  transition: 'all 200ms ease-out',
  verticalAlign: 'top',
  top: '50%',
  left: '50%',
  marginTop: -16,
  marginLeft: -16,
  height: 32,
  width: 32,
  zIndex: 4,
  borderWidth: 2,
  borderStyle: 'solid',
  borderColor: transparentize(0.06, theme.appBorderColor),
  borderTopColor: opacify(0.07, theme.appBorderColor),
  animation: `${rotate360} 0.7s linear infinite`,
  mixBlendMode: 'exclusion',
}));

export function Loader({ ...props }) {
  return (
    <LoaderWrapper
      aria-label="Content is loading ..."
      aria-live="polite"
      role="status"
      {...props}
    />
  );
}

import React from 'react';
import { styled } from '@storybook/theming';
import { rotate360 } from '../shared/animation';

const LoaderWrapper = styled.div(({ theme }) => ({
  borderRadius: '3em',
  cursor: 'progress',
  display: 'inline-block',
  overflow: 'hidden',
  position: 'absolute',
  transition: 'all 200ms ease-out',
  verticalAlign: 'top',
  top: '50%',
  left: '50%',
  marginTop: -16,
  marginLeft: -16,
  height: 32,
  width: 32,
  zIndex: 4,
  borderWidth: 2,
  borderStyle: 'solid',
  borderColor: 'rgba(0, 0, 0, 0)',
  borderTopColor: 'rgb(136, 136, 136)',
  animation: `${rotate360} 0.7s linear infinite`,
  mixBlendMode: 'exclusion',
  opacity: 0.7,
}));

export function Loader({ ...props }) {
  return (
    <LoaderWrapper
      aria-label="Content is loading ..."
      aria-live="polite"
      role="status"
      {...props}
    />
  );
}

FIX loader being invisible on light background or dark ones
FIX loader being invisible on light background or dark ones
