UNPKG

dash-core-components

Version:

Core component suite for Dash

github.com/plotly/dash

plotly/dash

68 lines (67 loc) • 9.91 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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); exports.default = void 0; var _react = _interopRequireDefault(require("react")); var _propTypes = _interopRequireDefault(require("prop-types")); var _DebugTitle = _interopRequireDefault(require("./DebugTitle.jsx")); function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; } /** * Spinner created by Tobias Ahlin, https://github.com/tobiasahlin/SpinKit */ var CircleSpinner = _ref => { var status = _ref.status, color = _ref.color, fullscreen = _ref.fullscreen, debug = _ref.debug, className = _ref.className, style = _ref.style; var debugTitle; if (debug && status) { debugTitle = status.map(s => /*#__PURE__*/_react.default.createElement(_DebugTitle.default, s)); } var spinnerClass = fullscreen ? 'dash-spinner-container' : ''; if (className) { spinnerClass += " ".concat(className); } return /*#__PURE__*/_react.default.createElement("div", { style: style ? style : {}, className: spinnerClass }, debugTitle, /*#__PURE__*/_react.default.createElement("div", { className: "dash-spinner dash-sk-circle" }, /*#__PURE__*/_react.default.createElement("div", { className: "dash-sk-circle1 dash-sk-child" }), /*#__PURE__*/_react.default.createElement("div", { className: "dash-sk-circle2 dash-sk-child" }), /*#__PURE__*/_react.default.createElement("div", { className: "dash-sk-circle3 dash-sk-child" }), /*#__PURE__*/_react.default.createElement("div", { className: "dash-sk-circle4 dash-sk-child" }), /*#__PURE__*/_react.default.createElement("div", { className: "dash-sk-circle5 dash-sk-child" }), /*#__PURE__*/_react.default.createElement("div", { className: "dash-sk-circle6 dash-sk-child" }), /*#__PURE__*/_react.default.createElement("div", { className: "dash-sk-circle7 dash-sk-child" }), /*#__PURE__*/_react.default.createElement("div", { className: "dash-sk-circle8 dash-sk-child" }), /*#__PURE__*/_react.default.createElement("div", { className: "dash-sk-circle9 dash-sk-child" }), /*#__PURE__*/_react.default.createElement("div", { className: "dash-sk-circle10 dash-sk-child" }), /*#__PURE__*/_react.default.createElement("div", { className: "dash-sk-circle11 dash-sk-child" }), /*#__PURE__*/_react.default.createElement("div", { className: "dash-sk-circle12 dash-sk-child" })), /*#__PURE__*/_react.default.createElement("style", null, "\n .dash-spinner-container {\n position: fixed;\n width: 100vw;\n height: 100vh;\n top: 0;\n left: 0;\n background-color: white;\n z-index: 99;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n .dash-loading-title {\n text-align: center;\n }\n .dash-sk-circle {\n margin: 1rem auto;\n width: 40px;\n height: 40px;\n position: relative;\n }\n .dash-sk-circle .dash-sk-child {\n width: 100%;\n height: 100%;\n position: absolute;\n left: 0;\n top: 0;\n }\n .dash-sk-circle .dash-sk-child:before {\n content: '';\n display: block;\n margin: 0 auto;\n width: 15%;\n height: 15%;\n background-color: ".concat(color, ";\n border-radius: 100%;\n -webkit-animation: dash-sk-circleBounceDelay 1.2s infinite ease-in-out both;\n animation: dash-sk-circleBounceDelay 1.2s infinite ease-in-out both;\n }\n .dash-sk-circle .dash-sk-circle2 {\n -webkit-transform: rotate(30deg);\n -ms-transform: rotate(30deg);\n transform: rotate(30deg); }\n .dash-sk-circle .dash-sk-circle3 {\n -webkit-transform: rotate(60deg);\n -ms-transform: rotate(60deg);\n transform: rotate(60deg); }\n .dash-sk-circle .dash-sk-circle4 {\n -webkit-transform: rotate(90deg);\n -ms-transform: rotate(90deg);\n transform: rotate(90deg); }\n .dash-sk-circle .dash-sk-circle5 {\n -webkit-transform: rotate(120deg);\n -ms-transform: rotate(120deg);\n transform: rotate(120deg); }\n .dash-sk-circle .dash-sk-circle6 {\n -webkit-transform: rotate(150deg);\n -ms-transform: rotate(150deg);\n transform: rotate(150deg); }\n .dash-sk-circle .dash-sk-circle7 {\n -webkit-transform: rotate(180deg);\n -ms-transform: rotate(180deg);\n transform: rotate(180deg); }\n .dash-sk-circle .dash-sk-circle8 {\n -webkit-transform: rotate(210deg);\n -ms-transform: rotate(210deg);\n transform: rotate(210deg); }\n .dash-sk-circle .dash-sk-circle9 {\n -webkit-transform: rotate(240deg);\n -ms-transform: rotate(240deg);\n transform: rotate(240deg); }\n .dash-sk-circle .dash-sk-circle10 {\n -webkit-transform: rotate(270deg);\n -ms-transform: rotate(270deg);\n transform: rotate(270deg); }\n .dash-sk-circle .dash-sk-circle11 {\n -webkit-transform: rotate(300deg);\n -ms-transform: rotate(300deg);\n transform: rotate(300deg); }\n .dash-sk-circle .dash-sk-circle12 {\n -webkit-transform: rotate(330deg);\n -ms-transform: rotate(330deg);\n transform: rotate(330deg); }\n .dash-sk-circle .dash-sk-circle2:before {\n -webkit-animation-delay: -1.1s;\n animation-delay: -1.1s; }\n .dash-sk-circle .dash-sk-circle3:before {\n -webkit-animation-delay: -1s;\n animation-delay: -1s; }\n .dash-sk-circle .dash-sk-circle4:before {\n -webkit-animation-delay: -0.9s;\n animation-delay: -0.9s; }\n .dash-sk-circle .dash-sk-circle5:before {\n -webkit-animation-delay: -0.8s;\n animation-delay: -0.8s; }\n .dash-sk-circle .dash-sk-circle6:before {\n -webkit-animation-delay: -0.7s;\n animation-delay: -0.7s; }\n .dash-sk-circle .dash-sk-circle7:before {\n -webkit-animation-delay: -0.6s;\n animation-delay: -0.6s; }\n .dash-sk-circle .dash-sk-circle8:before {\n -webkit-animation-delay: -0.5s;\n animation-delay: -0.5s; }\n .dash-sk-circle .dash-sk-circle9:before {\n -webkit-animation-delay: -0.4s;\n animation-delay: -0.4s; }\n .dash-sk-circle .dash-sk-circle10:before {\n -webkit-animation-delay: -0.3s;\n animation-delay: -0.3s; }\n .dash-spinner-container > .sk-circle .sk-circle11:before {\n -webkit-animation-delay: -0.2s;\n animation-delay: -0.2s; }\n .dash-spinner-container .sk-circle .sk-circle12:before {\n -webkit-animation-delay: -0.1s;\n animation-delay: -0.1s; }\n\n @-webkit-keyframes dash-sk-circleBounceDelay {\n 0%, 80%, 100% {\n -webkit-transform: scale(0);\n transform: scale(0);\n } 40% {\n -webkit-transform: scale(1);\n transform: scale(1);\n }\n }\n\n @keyframes dash-sk-circleBounceDelay {\n 0%, 80%, 100% {\n -webkit-transform: scale(0);\n transform: scale(0);\n } 40% {\n -webkit-transform: scale(1);\n transform: scale(1);\n }\n }\n "))); }; CircleSpinner.propTypes = { status: _propTypes.default.array, color: _propTypes.default.string, className: _propTypes.default.string, fullscreen: _propTypes.default.bool, style: _propTypes.default.object, debug: _propTypes.default.bool }; var _default = exports.default = CircleSpinner;