@afzalimdad9/react-file-preview/dist/components/loading.js

The url previewer is built using native html elements for previewing url of files of the following type

import { __assign, __makeTemplateObject } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled from 'styled-components';
var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  @keyframes ldio-digmt7cfm5i {\n    0% {\n      transform: rotate(0);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  .ldio-digmt7cfm5i div {\n    box-sizing: border-box !important;\n  }\n  .ldio-digmt7cfm5i > div {\n    position: absolute;\n    width: 56px;\n    height: 56px;\n    top: 22px;\n    left: 22px;\n    border-radius: 50%;\n    border: 2px solid #000;\n    border-color: #93dbe9 transparent #93dbe9 transparent;\n    animation: ldio-digmt7cfm5i 1s linear infinite;\n  }\n\n  .ldio-digmt7cfm5i > div:nth-child(2),\n  .ldio-digmt7cfm5i > div:nth-child(4) {\n    width: 50px;\n    height: 50px;\n    top: 25px;\n    left: 25px;\n    animation: ldio-digmt7cfm5i 1s linear infinite reverse;\n  }\n  .ldio-digmt7cfm5i > div:nth-child(2) {\n    border-color: transparent #689cc5 transparent #689cc5;\n  }\n  .ldio-digmt7cfm5i > div:nth-child(3) {\n    border-color: transparent;\n  }\n  .ldio-digmt7cfm5i > div:nth-child(3) div {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    transform: rotate(45deg);\n  }\n  .ldio-digmt7cfm5i > div:nth-child(3) div:before,\n  .ldio-digmt7cfm5i > div:nth-child(3) div:after {\n    content: '';\n    display: block;\n    position: absolute;\n    width: 2px;\n    height: 2px;\n    top: -2px;\n    left: 25px;\n    background: #93dbe9;\n    border-radius: 50%;\n    box-shadow: 0 54px 0 0 #93dbe9;\n  }\n  .ldio-digmt7cfm5i > div:nth-child(3) div:after {\n    left: -2px;\n    top: 25px;\n    box-shadow: 54px 0 0 0 #93dbe9;\n  }\n\n  .ldio-digmt7cfm5i > div:nth-child(4) {\n    border-color: transparent;\n  }\n  .ldio-digmt7cfm5i > div:nth-child(4) div {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    transform: rotate(45deg);\n  }\n  .ldio-digmt7cfm5i > div:nth-child(4) div:before,\n  .ldio-digmt7cfm5i > div:nth-child(4) div:after {\n    content: '';\n    display: block;\n    position: absolute;\n    width: 2px;\n    height: 2px;\n    top: -2px;\n    left: 22px;\n    background: #689cc5;\n    border-radius: 50%;\n    box-shadow: 0 48px 0 0 #689cc5;\n  }\n  .ldio-digmt7cfm5i > div:nth-child(4) div:after {\n    left: -2px;\n    top: 22px;\n    box-shadow: 48px 0 0 0 #689cc5;\n  }\n  .loadingio-spinner-double-ring-1s3ls2q5r59 {\n    width: 83px;\n    height: 83px;\n    display: inline-block;\n    overflow: hidden;\n    background: none;\n  }\n  .ldio-digmt7cfm5i {\n    width: 100%;\n    height: 100%;\n    position: relative;\n    transform: translateZ(0) scale(0.83);\n    backface-visibility: hidden;\n    transform-origin: 0 0; /* see note above */\n  }\n  .ldio-digmt7cfm5i div {\n    box-sizing: content-box;\n  }\n"], ["\n  @keyframes ldio-digmt7cfm5i {\n    0% {\n      transform: rotate(0);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  .ldio-digmt7cfm5i div {\n    box-sizing: border-box !important;\n  }\n  .ldio-digmt7cfm5i > div {\n    position: absolute;\n    width: 56px;\n    height: 56px;\n    top: 22px;\n    left: 22px;\n    border-radius: 50%;\n    border: 2px solid #000;\n    border-color: #93dbe9 transparent #93dbe9 transparent;\n    animation: ldio-digmt7cfm5i 1s linear infinite;\n  }\n\n  .ldio-digmt7cfm5i > div:nth-child(2),\n  .ldio-digmt7cfm5i > div:nth-child(4) {\n    width: 50px;\n    height: 50px;\n    top: 25px;\n    left: 25px;\n    animation: ldio-digmt7cfm5i 1s linear infinite reverse;\n  }\n  .ldio-digmt7cfm5i > div:nth-child(2) {\n    border-color: transparent #689cc5 transparent #689cc5;\n  }\n  .ldio-digmt7cfm5i > div:nth-child(3) {\n    border-color: transparent;\n  }\n  .ldio-digmt7cfm5i > div:nth-child(3) div {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    transform: rotate(45deg);\n  }\n  .ldio-digmt7cfm5i > div:nth-child(3) div:before,\n  .ldio-digmt7cfm5i > div:nth-child(3) div:after {\n    content: '';\n    display: block;\n    position: absolute;\n    width: 2px;\n    height: 2px;\n    top: -2px;\n    left: 25px;\n    background: #93dbe9;\n    border-radius: 50%;\n    box-shadow: 0 54px 0 0 #93dbe9;\n  }\n  .ldio-digmt7cfm5i > div:nth-child(3) div:after {\n    left: -2px;\n    top: 25px;\n    box-shadow: 54px 0 0 0 #93dbe9;\n  }\n\n  .ldio-digmt7cfm5i > div:nth-child(4) {\n    border-color: transparent;\n  }\n  .ldio-digmt7cfm5i > div:nth-child(4) div {\n    position: absolute;\n    width: 100%;\n    height: 100%;\n    transform: rotate(45deg);\n  }\n  .ldio-digmt7cfm5i > div:nth-child(4) div:before,\n  .ldio-digmt7cfm5i > div:nth-child(4) div:after {\n    content: '';\n    display: block;\n    position: absolute;\n    width: 2px;\n    height: 2px;\n    top: -2px;\n    left: 22px;\n    background: #689cc5;\n    border-radius: 50%;\n    box-shadow: 0 48px 0 0 #689cc5;\n  }\n  .ldio-digmt7cfm5i > div:nth-child(4) div:after {\n    left: -2px;\n    top: 22px;\n    box-shadow: 48px 0 0 0 #689cc5;\n  }\n  .loadingio-spinner-double-ring-1s3ls2q5r59 {\n    width: 83px;\n    height: 83px;\n    display: inline-block;\n    overflow: hidden;\n    background: none;\n  }\n  .ldio-digmt7cfm5i {\n    width: 100%;\n    height: 100%;\n    position: relative;\n    transform: translateZ(0) scale(0.83);\n    backface-visibility: hidden;\n    transform-origin: 0 0; /* see note above */\n  }\n  .ldio-digmt7cfm5i div {\n    box-sizing: content-box;\n  }\n"])));
export default function Loading() {
    return (_jsx(Container, __assign({ className: 'loadingio-spinner-double-ring-1s3ls2q5r59' }, { children: _jsxs("div", __assign({ className: 'ldio-digmt7cfm5i' }, { children: [_jsx("div", {}), _jsx("div", {}), _jsx("div", { children: _jsx("div", {}) }), _jsx("div", { children: _jsx("div", {}) })] })) })));
}
var templateObject_1;
//# sourceMappingURL=loading.js.map