UNPKG

quantumai-design-system

Version:

퀀텀에이아이의 디자인 시스템

36 lines (35 loc) • 3.68 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) { if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; } return cooked; }; import { css } from '@emotion/react'; import { COLORS } from '../../../styles/theme'; // export const LoadingStyleA = css` // position: relative; // width: 50px; // height: 50px; // border-radius: 10rem; // background: linear-gradient(45deg, ${COLORS.primaryO}, ${COLORS.primaryL} 20%, ${COLORS.primary}); // animation: animate 1s linear infinite; // &::before { // position: absolute; // content: ''; // background: #fff; // left: 50%; // top: 50%; // transform: translate(-50%, -50%); // width: 70%; // height: 70%; // border-radius: 50%; // } // @keyframes animate { // from { // transform: rotate(0deg); // } // to { // transform: rotate(360deg); // } // } // ` export var LoadingStyle = css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 40px;\n height: 40px;\n background: transparent;\n position: relative;\n border-radius: 50%;\n overflow: hidden;\n z-index: 0;\n -webkit-animation: spin2 1s linear infinite;\n animation: spin 1s linear infinite;\n\n @-webkit-keyframes spin {\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n }\n @keyframes spin {\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n }\n & > div:not(.spin-blocker) {\n width: 50%;\n height: 50%;\n z-index: -1;\n }\n\n .spin-bottom-left {\n position: absolute;\n top: 50%;\n left: 0;\n background: linear-gradient(to bottom right, ", " 0%, ", " 100%);\n }\n .spin-bottom-right {\n position: absolute;\n top: 50%;\n left: 50%;\n background: linear-gradient(to top right, ", " 0%, ", " 100%);\n }\n .spin-top-left {\n position: absolute;\n top: 0;\n left: 50%;\n background: linear-gradient(to bottom right, transparent 0%, ", " 100%);\n }\n\n .spin-blocker {\n position: absolute;\n background: white;\n border-radius: 50%;\n width: 70%;\n height: 70%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n"], ["\n width: 40px;\n height: 40px;\n background: transparent;\n position: relative;\n border-radius: 50%;\n overflow: hidden;\n z-index: 0;\n -webkit-animation: spin2 1s linear infinite;\n animation: spin 1s linear infinite;\n\n @-webkit-keyframes spin {\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n }\n @keyframes spin {\n 100% {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n }\n }\n & > div:not(.spin-blocker) {\n width: 50%;\n height: 50%;\n z-index: -1;\n }\n\n .spin-bottom-left {\n position: absolute;\n top: 50%;\n left: 0;\n background: linear-gradient(to bottom right, ", " 0%, ", " 100%);\n }\n .spin-bottom-right {\n position: absolute;\n top: 50%;\n left: 50%;\n background: linear-gradient(to top right, ", " 0%, ", " 100%);\n }\n .spin-top-left {\n position: absolute;\n top: 0;\n left: 50%;\n background: linear-gradient(to bottom right, transparent 0%, ", " 100%);\n }\n\n .spin-blocker {\n position: absolute;\n background: white;\n border-radius: 50%;\n width: 70%;\n height: 70%;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n }\n"])), COLORS.primary, COLORS.primaryL, COLORS.primaryL, COLORS.primaryO, COLORS.primaryO); var templateObject_1;