Skip to content
This repository was archived by the owner on Jun 3, 2024. It is now read-only.

Commit 7172158

Browse files
valentijnniemanvalentijnnieman
committed
Add custom CSS spinner
1 parent f1a0bb6 commit 7172158

File tree

3 files changed

+209
-69
lines changed

3 files changed

+209
-69
lines changed

‎dash_core_components/dash_core_components.dev.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dash_core_components/dash_core_components.min.js

Lines changed: 6 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/components/Loading.react.js

Lines changed: 202 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -14,69 +14,209 @@ export default class Loading extends Component {
1414
if (status && status.isLoading) {
1515
return (
1616
<div>
17-
<div className="spinner-verts">
18-
<h3 className='dash-loading-title'>Loading {status.componentName}'s {status.propName}</h3>
19-
<div className="rect1" />
20-
<div className="rect2" />
21-
<div className="rect3" />
22-
<div className="rect4" />
23-
<div className="rect5" />
17+
<h3 className="dash-loading-title">
18+
Loading {status.componentName}
19+
's {status.propName}
20+
</h3>
21+
<div className="dash-spinner">
22+
<div className="dash-spinner__bottom">
23+
<div className="dash-bar dash-bar__one" />
24+
<div className="dash-bar dash-bar__two" />
25+
<div className="dash-bar dash-bar__three" />
26+
</div>
27+
<div className="dash-spinner__background">
28+
<div className="dash-spinner__bottom">
29+
<div className="dash-vert dash-vert__one" />
30+
<div className="dash-vert dash-vert__two" />
31+
<div className="dash-vert dash-vert__three" />
32+
<div className="dash-vert dash-vert__four" />
33+
</div>
34+
</div>
2435
</div>
2536
<style>
2637
{`
27-
.spinner-verts {
28-
margin: 100px auto;
29-
width: 50px;
30-
height: 40px;
31-
text-align: center;
32-
font-size: 10px;
33-
}
34-
35-
.spinner-verts > div {
36-
background-color: #1975FA;
37-
height: 100%;
38-
width: 6px;
39-
display: inline-block;
40-
margin-right: 4px;
41-
42-
-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
43-
animation: sk-stretchdelay 1.2s infinite ease-in-out;
44-
}
45-
46-
.spinner-verts .rect2 {
47-
-webkit-animation-delay: -1.1s;
48-
animation-delay: -1.1s;
49-
}
50-
51-
.spinner-verts .rect3 {
52-
-webkit-animation-delay: -1.0s;
53-
animation-delay: -1.0s;
54-
}
55-
56-
.spinner-verts .rect4 {
57-
-webkit-animation-delay: -0.9s;
58-
animation-delay: -0.9s;
59-
}
60-
61-
.spinner-verts .rect5 {
62-
-webkit-animation-delay: -0.8s;
63-
animation-delay: -0.8s;
64-
}
65-
66-
@-webkit-keyframes sk-stretchdelay {
67-
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
68-
20% { -webkit-transform: scaleY(1.0) }
69-
}
70-
71-
@keyframes sk-stretchdelay {
72-
0%, 40%, 100% {
73-
transform: scaleY(0.4);
74-
-webkit-transform: scaleY(0.4);
75-
} 20% {
76-
transform: scaleY(1.0);
77-
-webkit-transform: scaleY(1.0);
78-
}
38+
.dash-loading-title {
39+
text-align: center;
40+
}
41+
.container {
42+
width: 100%;
43+
height: 100%;
44+
display: block;
45+
padding: 2rem;
46+
}
47+
.dash-spinner {
48+
display: flex;
49+
margin: 0 auto;
50+
width: 200px;
51+
height: 200px;
52+
overflow: hidden;
53+
position: relative;
54+
z-index: -2;
55+
opacity: 0.8;
56+
border-radius: 4px;
57+
}
58+
.dash-spinner__bottom {
59+
display: flex;
60+
margin-top: auto;
61+
flex-direction: column;
62+
height: 12px;
63+
width: 100%;
64+
}
65+
.dash-spinner__background {
66+
width: 100%;
67+
height: 100%;
68+
display: block;
69+
position: absolute;
70+
z-index: -1;
71+
display: flex;
72+
}
73+
.dash-bar {
74+
height: 40px;
75+
background-color: #119DFF;
76+
animation: bar-one 2s infinite;
77+
transform-origin: 0% 0%;
78+
display: inline-flex;
79+
border-radius: 8px;
80+
}
81+
.dash-bar__one {
82+
transform: rotate(-45deg);
83+
bottom: -10px;
84+
position: relative;
85+
}
86+
.dash-bar__two {
87+
transform: rotate(45deg);
88+
animation: bar-two 2s infinite;
89+
left: 72px;
90+
bottom: 64px;
91+
position: relative;
92+
animation-delay: 2s infinite;
93+
}
94+
.dash-bar__three {
95+
transform: rotate(-45deg);
96+
animation: bar-three 2s infinite;
97+
left: 110px;
98+
bottom: 27px;
99+
position: relative;
100+
animation-delay: 2s infinite;
101+
}
102+
.dash-vert {
103+
display: inline-block;
104+
transform-origin: 0% 0%;
105+
position: absolute;
106+
bottom: 0px;
107+
width: 40px;
108+
}
109+
.dash-vert__one {
110+
animation: vert-one 2s infinite;
111+
background-color: #e763fa;
112+
}
113+
.dash-vert__two {
114+
animation: vert-two 2s infinite;
115+
left: 50px;
116+
background-color: #636efa;
117+
}
118+
.dash-vert__three {
119+
animation: vert-three 2s infinite;
120+
left: 100px;
121+
background-color: #00cc96;
122+
}
123+
.dash-vert__four {
124+
animation: vert-four 2s infinite;
125+
left: 150px;
126+
background-color: #EF553B;
127+
}
128+
@keyframes vert-one {
129+
0% {
130+
height: 0px;
79131
}
132+
100% {
133+
height: 80px;
134+
}
135+
}
136+
@keyframes vert-two {
137+
0% {
138+
height: 0px;
139+
}
140+
30% {
141+
height: 0px;
142+
}
143+
100% {
144+
height: 120px;
145+
}
146+
}
147+
@keyframes vert-three {
148+
0% {
149+
height: 0px;
150+
}
151+
30% {
152+
height: 0px;
153+
}
154+
50% {
155+
height: 0px;
156+
}
157+
100% {
158+
height: 100px;
159+
}
160+
}
161+
@keyframes vert-four {
162+
0% {
163+
height: 0px;
164+
}
165+
30% {
166+
height: 0px;
167+
}
168+
50% {
169+
height: 0px;
170+
}
171+
60% {
172+
height: 0px;
173+
}
174+
100% {
175+
height: 60px;
176+
}
177+
}
178+
@keyframes bar-one {
179+
0% {
180+
width: 0%;
181+
}
182+
30% {
183+
width: 50%;
184+
}
185+
60% {
186+
width: 50%;
187+
}
188+
100% {
189+
width: 50%;
190+
}
191+
}
192+
@keyframes bar-two {
193+
0% {
194+
width: 0%;
195+
}
196+
30% {
197+
width: 0%;
198+
}
199+
60% {
200+
width: 30%;
201+
}
202+
100% {
203+
width: 30%;
204+
}
205+
}
206+
@keyframes bar-three {
207+
0% {
208+
width: 0%;
209+
}
210+
30% {
211+
width: 0%;
212+
}
213+
60% {
214+
width: 0%;
215+
}
216+
100% {
217+
width: 70%;
218+
}
219+
}
80220
`}
81221
</style>
82222
</div>
@@ -109,19 +249,19 @@ Loading.propTypes = {
109249

110250
/**
111251
* Object that holds the status object coming from dash-renderer
112-
*/
252+
*/
113253
status: PropTypes.shape({
114254
/**
115255
* Determines if the component is loading or not
116256
*/
117-
isLoading: PropTypes.bool,
257+
isLoading: PropTypes.bool,
118258
/**
119259
* Holds which property is loading
120260
*/
121261
propName: PropTypes.string,
122262
/**
123263
* Holds the name of the component that is loading
124264
*/
125-
componentName: PropTypes.string
265+
componentName: PropTypes.string,
126266
}),
127267
};

0 commit comments

Comments
 (0)