@npm.tangocode/tc_ui_components/src/components/LoadingSpinner/style.ts

[<img src="https://s3.amazonaws.com/tc-ui-components/documentationImages/tangoCodeLogo.png">](https://tangocode.com/) # TangoCode React UI Components #

import styled, { keyframes } from 'styled-components';
import { StyledComponentClass } from 'styled-components';
import * as React from 'react';
import { COLOR_PALETTE } from '../../constants/colors';



export interface LoadingProps {
    mTop?: string;
}
export const Loading = styled.div`
    margin-top: ${(props: LoadingProps) => props.mTop ? props.mTop : '2px'}    
    display: block;
    margin-left: auto;
    margin-right: auto;
`;

const loading = keyframes`
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
`;
export interface SVGLoadProps {
    size?: number;
}

export const SVGLoad = styled.svg`
    width: ${(props: SVGLoadProps) => props.size ? props.size : 25}px;
    animation: ${loading} 3s linear infinite;
    x:0px;
    y=:0px;
`;

const loadingCircle = keyframes`
    0% {
        stroke-dashoffset: 0;
    }
    100% {
        stroke-dashoffset: -600;
    }
`;

export interface LoadingInnerCircleProps {
    color?: string;

}

export const LoadingInnerCircle = styled.circle`
    stroke-dashoffset: 0;
    stroke-dasharray: 300;
    stroke-width: 10;
    stroke-miterlimit: 10;
    stroke-linecap: round;
    animation: ${loadingCircle} 2s linear infinite;
    stroke: ${(props: LoadingInnerCircleProps) => props.color ? props.color : COLOR_PALETTE.BLACK };
    fill: transparent;
    cx: 75; 
    cy: 75;
    r: 60;
`;