smart-react-components/loading/index.js

React UI library, wide variety of editable ready to use Styled and React components.

'use strict';

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = require('react');
var React__default = _interopDefault(React);
var styled = require('styled-components');
var styled__default = _interopDefault(styled);
require('../index-56ba89df.js');
var Svg = require('../element/Svg.js');

const customKeys = {
    size: (v, t) => `
        width: ${t.loading.size[v]};
        height: ${t.loading.size[v]};
    `
};
var Loading = styled__default(Svg).attrs(({ size = "default", type = "primary" }) => ({
    customKeys,
    children: React__default.createElement("circle", { cx: "22", cy: "22", r: "20", strokeWidth: "4" }),
    viewBox: "0 0 44 44",
    size,
    type
}))(({ theme, type }) => `
    animation: src-loading-spin-animation ${theme.src.loading.animation} infinite;

    circle {
        fill: none;
        stroke: ${theme.src.type[type].main};
        stroke-dasharray: 1,150;
        stroke-dashoffset: 0;
        stroke-linecap: round;
        animation: src-loading-spin-circle-animation ${theme.src.loading.animation} infinite;
    }

    @keyframes src-loading-spin-animation {
        from {
            transform: rotate(0deg);
        }
    
        to {
            transform: rotate(360deg);
        }
    }

    @keyframes src-loading-spin-circle-animation {
        0% {
            stroke-dasharray: 1,150;
            stroke-dashoffset: 0;
        }
    
        50% {
            stroke-dasharray: 90,150;
            stroke-dashoffset: -35;
        }
    
        100% {
            stroke-dasharray: 90,150;
            stroke-dashoffset: -124;
        }
    }
`);

module.exports = Loading;