@kiwicom/orbit-components/es/Loading/index.js

<div align="center"> <a href="https://orbit.kiwi" target="_blank"> <img alt="orbit-components" src="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components.png" srcset="https://orbit.kiwi/wp-content/uploads/2018/08/orbit-components@2x.png 2x"

import * as React from "react";
import styled, { keyframes } from "styled-components";

import defaultTokens from "../defaultTokens";
import TYPE_OPTIONS from "./consts";


// Animations
const SpinnerAnimation = keyframes(["100%{transform:rotate(360deg);}"]);

const LoaderAnimation = keyframes(["0%{opacity:.3;transform:translateY(0px);}20%{opacity:1;transform:translateY(-3px);}40%{opacity:.3;transform:translateY(0px);}100%{opacity:.3;transform:translateY(0px);}"]);

const StyledLoading = styled(({ children, className, dataTest }) => React.createElement(
  "div",
  { className: className, "data-test": dataTest },
  children
)).withConfig({
  displayName: "Loading__StyledLoading"
})(["position:", ";left:", ";width:", ";height:", ";padding:0 ", ";display:flex;flex-direction:", ";justify-content:", ";align-items:center;overflow:hidden;box-sizing:border-box;"], ({ type }) => type === TYPE_OPTIONS.BUTTON_LOADER && "absolute", ({ type }) => type === TYPE_OPTIONS.BUTTON_LOADER && "0", ({ type }) => type === TYPE_OPTIONS.BUTTON_LOADER && "100%", ({ tokens, type }) => tokens.heightLoadingContainer[type], ({ theme }) => theme.orbit.spaceSmall, ({ type }) => type === TYPE_OPTIONS.PAGE_LOADER ? "column" : "row", ({ tokens, type }) => tokens.alignLoadingContainer[type]);

StyledLoading.defaultProps = {
  theme: defaultTokens
};

const StyledLoadingText = styled.div.withConfig({
  displayName: "Loading__StyledLoadingText"
})(["font-family:", ";font-size:", ";color:", ";line-height:", ";margin-top:", ";margin-left:", ";"], ({ theme }) => theme.orbit.fontFamily, ({ theme }) => theme.orbit.fontSizeTextNormal, ({ theme }) => theme.orbit.paletteInkLighter, ({ theme }) => theme.orbit.lineHeightText, ({ theme, type }) => type === TYPE_OPTIONS.PAGE_LOADER && theme.orbit.spaceMedium, ({ theme, type }) => type !== TYPE_OPTIONS.PAGE_LOADER && theme.orbit.spaceSmall);

StyledLoadingText.defaultProps = {
  theme: defaultTokens
};

export const StyledSpinner = styled.svg.withConfig({
  displayName: "Loading__StyledSpinner"
})(["width:40px;height:40px;animation:", " 0.75s linear infinite;"], SpinnerAnimation);

const StyledSpinnerCircle = styled.circle.withConfig({
  displayName: "Loading__StyledSpinnerCircle"
})(["fill:transparent;stroke:", ";stroke-width:3px;stroke-linecap:round;stroke-dasharray:128px;stroke-dashoffset:64px;"], ({ theme, type }) => type === TYPE_OPTIONS.BUTTON_LOADER ? "currentColor" : theme.orbit.paletteInkLighter);

StyledSpinnerCircle.defaultProps = {
  theme: defaultTokens
};

const StyledLoader = styled.div.withConfig({
  displayName: "Loading__StyledLoader"
})(["display:flex;justify-content:center;align-items:center;"]);

const StyledLoaderCircle = styled.div.withConfig({
  displayName: "Loading__StyledLoaderCircle"
})(["width:8px;height:8px;border-radius:50%;margin-right:6px;background:", ";animation:", " 1.25s infinite ease-in-out;&:nth-child(2){animation-delay:0.1s;}&:nth-child(3){animation-delay:0.2s;margin:0;}"], ({ theme }) => theme.orbit.paletteInkLighter, LoaderAnimation);

StyledLoaderCircle.defaultProps = {
  theme: defaultTokens
};

const Loading = props => {
  const { loading = false, type = TYPE_OPTIONS.PAGE_LOADER, text, children, dataTest } = props;
  const tokens = {
    alignLoadingContainer: {
      [TYPE_OPTIONS.BUTTON_LOADER]: "center",
      [TYPE_OPTIONS.SEARCH_LOADER]: "start",
      [TYPE_OPTIONS.BOX_LOADER]: "center",
      [TYPE_OPTIONS.PAGE_LOADER]: "center"
    },
    heightLoadingContainer: {
      [TYPE_OPTIONS.BUTTON_LOADER]: "100%",
      [TYPE_OPTIONS.SEARCH_LOADER]: "40px",
      [TYPE_OPTIONS.BOX_LOADER]: "80px",
      [TYPE_OPTIONS.PAGE_LOADER]: "120px"
    }
  };

  return children && !loading ? children : React.createElement(
    StyledLoading,
    { tokens: tokens, type: type, dataTest: dataTest },
    type === TYPE_OPTIONS.BOX_LOADER || type === TYPE_OPTIONS.SEARCH_LOADER ? React.createElement(
      StyledLoader,
      null,
      React.createElement(StyledLoaderCircle, null),
      React.createElement(StyledLoaderCircle, null),
      React.createElement(StyledLoaderCircle, null)
    ) : React.createElement(
      StyledSpinner,
      { viewBox: "0 0 40 40" },
      React.createElement(StyledSpinnerCircle, { cx: "50%", cy: "50%", r: "18", type: type })
    ),
    type !== TYPE_OPTIONS.BUTTON_LOADER && React.createElement(
      StyledLoadingText,
      { type: type },
      text
    )
  );
};

export default Loading;