Skip to content

Commit a55d804

Browse files
author
Selvam Palanimalai
committed
adding loading spinner across the app.
1 parent caf5164 commit a55d804

7 files changed

Lines changed: 146 additions & 70 deletions

File tree

‎css/common.css‎

Lines changed: 23 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -159,11 +159,12 @@
159159

160160
/* Welcome splash screen
161161
-------------------------------------------------*/
162-
#welcome{
162+
.loading-spinner{
163163
width: 100%;
164164
height: 100%;
165165
z-index: 9999;
166-
position: absolute;
166+
opacity: 0.7;
167+
position: fixed;
167168
background-color: black;
168169
top:0px;
169170
left: 0px;
@@ -177,25 +178,14 @@
177178
}
178179

179180
div.welcome-container{
180-
width:600px;
181-
margin:120px auto;
182-
}
183-
184-
.welcome-title{
185-
color:#1DC4F9;
186-
font-size: 150px;
187-
line-height: 150px;
181+
margin-top:120px;
182+
margin-bottom: 20px;
188183
}
189184

190185
.welcome-container div{
191-
float:left;
192186
width: 100%;
193187
}
194188

195-
#startApp{
196-
margin: 10px auto;
197-
}
198-
199189

200190

201191
/* Styling for the input module
@@ -391,6 +381,22 @@ float:left;
391381
padding:2px 0px;
392382
text-align:center;
393383
}
394-
.orange-bg{
395-
background-color: #f46d3b;
384+
.blue-bg{
385+
background-color: #1f77b4;
386+
}
387+
388+
.white-bg{
389+
background-color: #fff;
390+
}
391+
392+
.black-bg{
393+
background-color: #000;
394+
}
395+
396+
.blue-text{
397+
color: #1f77b4;
398+
}
399+
400+
.white-text{
401+
color : white;
396402
}

‎css/loading.css‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@
1010
width: 100%;
1111
height: 100%;
1212
border-radius: 50%;
13-
background-color: #333;
1413
opacity: 0.6;
1514
position: absolute;
1615
top: 0;
@@ -43,15 +42,12 @@
4342
.white-bg-btn{
4443
background-color: white;
4544
border: none;
46-
padding: 10px;
47-
color: #f46d3b;
45+
padding: 10px;
4846
}
4947

5048

5149

5250

53-
54-
5551
.sk-cube-grid {
5652
width: 40px;
5753
height: 40px;
@@ -61,7 +57,7 @@
6157
.sk-cube-grid .sk-cube {
6258
width: 33%;
6359
height: 33%;
64-
background-color: #333;
60+
background-color: #000;
6561
float: left;
6662
-webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
6763
animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;

‎dist/app.css‎

Lines changed: 89 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -8176,11 +8176,12 @@ textarea.inputtableInput {
81768176

81778177
/* Welcome splash screen
81788178
-------------------------------------------------*/
8179-
#welcome{
8179+
.loading-spinner{
81808180
width: 100%;
81818181
height: 100%;
81828182
z-index: 9999;
8183-
position: absolute;
8183+
opacity: 0.7;
8184+
position: fixed;
81848185
background-color: black;
81858186
top:0px;
81868187
left: 0px;
@@ -8194,25 +8195,14 @@ textarea.inputtableInput {
81948195
}
81958196

81968197
div.welcome-container{
8197-
width:600px;
8198-
margin:120px auto;
8199-
}
8200-
8201-
.welcome-title{
8202-
color:#1DC4F9;
8203-
font-size: 150px;
8204-
line-height: 150px;
8198+
margin-top:120px;
8199+
margin-bottom: 20px;
82058200
}
82068201

82078202
.welcome-container div{
8208-
float:left;
82098203
width: 100%;
82108204
}
82118205

8212-
#startApp{
8213-
margin: 10px auto;
8214-
}
8215-
82168206

82178207

82188208
/* Styling for the input module
@@ -8408,8 +8398,24 @@ float:left;
84088398
padding:2px 0px;
84098399
text-align:center;
84108400
}
8411-
.orange-bg{
8412-
background-color: #f46d3b;
8401+
.blue-bg{
8402+
background-color: #1f77b4;
8403+
}
8404+
8405+
.white-bg{
8406+
background-color: #fff;
8407+
}
8408+
8409+
.black-bg{
8410+
background-color: #000;
8411+
}
8412+
8413+
.blue-text{
8414+
color: #1f77b4;
8415+
}
8416+
8417+
.white-text{
8418+
color : white;
84138419
}
84148420

84158421
/* ============================================================
@@ -9706,7 +9712,6 @@ a:hover{ color: #666; text-decoration: none; }
97069712
width: 100%;
97079713
height: 100%;
97089714
border-radius: 50%;
9709-
background-color: #333;
97109715
opacity: 0.6;
97119716
position: absolute;
97129717
top: 0;
@@ -9739,10 +9744,74 @@ a:hover{ color: #666; text-decoration: none; }
97399744
.white-bg-btn{
97409745
background-color: white;
97419746
border: none;
9742-
padding: 10px;
9743-
color: #f46d3b;
9747+
padding: 10px;
97449748
}
97459749

9750+
9751+
9752+
9753+
.sk-cube-grid {
9754+
width: 40px;
9755+
height: 40px;
9756+
margin: 100px auto;
9757+
}
9758+
9759+
.sk-cube-grid .sk-cube {
9760+
width: 33%;
9761+
height: 33%;
9762+
background-color: #000;
9763+
float: left;
9764+
-webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
9765+
animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
9766+
}
9767+
.sk-cube-grid .sk-cube1 {
9768+
-webkit-animation-delay: 0.2s;
9769+
animation-delay: 0.2s; }
9770+
.sk-cube-grid .sk-cube2 {
9771+
-webkit-animation-delay: 0.3s;
9772+
animation-delay: 0.3s; }
9773+
.sk-cube-grid .sk-cube3 {
9774+
-webkit-animation-delay: 0.4s;
9775+
animation-delay: 0.4s; }
9776+
.sk-cube-grid .sk-cube4 {
9777+
-webkit-animation-delay: 0.1s;
9778+
animation-delay: 0.1s; }
9779+
.sk-cube-grid .sk-cube5 {
9780+
-webkit-animation-delay: 0.2s;
9781+
animation-delay: 0.2s; }
9782+
.sk-cube-grid .sk-cube6 {
9783+
-webkit-animation-delay: 0.3s;
9784+
animation-delay: 0.3s; }
9785+
.sk-cube-grid .sk-cube7 {
9786+
-webkit-animation-delay: 0s;
9787+
animation-delay: 0s; }
9788+
.sk-cube-grid .sk-cube8 {
9789+
-webkit-animation-delay: 0.1s;
9790+
animation-delay: 0.1s; }
9791+
.sk-cube-grid .sk-cube9 {
9792+
-webkit-animation-delay: 0.2s;
9793+
animation-delay: 0.2s; }
9794+
9795+
@-webkit-keyframes sk-cubeGridScaleDelay {
9796+
0%, 70%, 100% {
9797+
-webkit-transform: scale3D(1, 1, 1);
9798+
transform: scale3D(1, 1, 1);
9799+
} 35% {
9800+
-webkit-transform: scale3D(0, 0, 1);
9801+
transform: scale3D(0, 0, 1);
9802+
}
9803+
}
9804+
9805+
@keyframes sk-cubeGridScaleDelay {
9806+
0%, 70%, 100% {
9807+
-webkit-transform: scale3D(1, 1, 1);
9808+
transform: scale3D(1, 1, 1);
9809+
} 35% {
9810+
-webkit-transform: scale3D(0, 0, 1);
9811+
transform: scale3D(0, 0, 1);
9812+
}
9813+
}
9814+
97469815
/* line 17, ../src/please-wait.scss */
97479816
body.pg-loading {
97489817
overflow: hidden;

‎index.html‎

Lines changed: 12 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -26,29 +26,20 @@
2626
<body>
2727

2828
<!-- The Welcome Splash Screen -->
29-
<!--<div id='welcome'>
29+
<div class='loading-spinner' style="display:none">
3030
<div class="welcome-container">
31-
<div>
32-
<span><h2 class="font welcome-title">SOCR</h2></span>
33-
</div>
34-
<div>
35-
<span class="font" >Statistical Online Computational Resource - Resampling WebApp &nbsp;</span>
36-
<div><button id="startApp" class="btn btn-primary btn-large" disabled> Initialising ... </button></div>
37-
<div>
38-
<span class="font">Help (recommended for first timer!) :</span>
39-
<span class="switch switch-mini" data-on="danger" data-off="primary">
40-
<input class="help" type="checkbox" >
41-
</span>
31+
<h2 class="font">Processing...</h2>
32+
<div class="spinner" style="width:40px">
33+
<div class="double-bounce1 white-bg"></div>
34+
<div class="double-bounce2 white-bg"></div>
4235
</div>
43-
</div>
44-
</div>
45-
</div>-->
36+
</div>
37+
</div>
4638

4739
<div id='header'>
48-
<div class="navbar navbar-fixed-top navbar-inverse orange-bg
49-
">
40+
<div class="navbar navbar-fixed-top navbar-inverse">
5041
<div class="navbar-inner">
51-
<div class="container-fluid orange-bg">
42+
<div class="container-fluid blue-bg">
5243
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
5344
<span class="icon-bar"></span>
5445
<span class="icon-bar"></span>
@@ -73,7 +64,7 @@
7364
</li>
7465
</ul>
7566
</div><!--/.nav-collapse -->
76-
<button class="white-bg-btn right" id="reset-button"><i class="icon-refresh"></i> Reset App</button>
67+
<button class="white-bg-btn blue-text right" id="reset-button"><i class="icon-refresh"></i> Reset App</button>
7768

7869
</div>
7970
</div>
@@ -481,8 +472,8 @@ <h4>How to install my own experiment into SOCR webapp?</h4>
481472

482473
window.loading_screen = window.pleaseWait({
483474
logo: "http://pathgather.github.io/please-wait/assets/images/pathgather.png",
484-
backgroundColor: '#f46d3b',
485-
loadingHtml: '<p class="loading-message">Statistical Online Computational Resource - Resampling WebApp</p><div class="spinner"><div class="double-bounce1"></div><div class="double-bounce2"></div></div>'
475+
backgroundColor: '#1f77b4',
476+
loadingHtml: '<p class="white-text">Statistical Online Computational Resource - Resampling WebApp</p><div class="spinner"><div class="double-bounce1 white-bg"></div><div class="double-bounce2 white-bg"></div></div>'
486477
});
487478

488479
//Fix for browsers that don't support console logging

‎js/appController.coffee‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -182,9 +182,9 @@ socr.controller = (model, view) ->
182182
if model.getSample(1) is false
183183
view.handleResponse "<h4 class=\"alert-heading\">No Random samples to infer From!</h4>Please generate some random samples. Click \"back\" button on the controller to go to the \"Generate Random Samples!\" button.", "error", "controller-content"
184184
else
185-
PubSub.publish "showLoaderGif"
186185
view.toggleControllerHandle "hide"
187-
setTimeout socr.controller.setDotplot, 200
186+
PubSub.publish "toggleLoadingSpinner" ,{action:'show'}
187+
setTimeout socr.controller.setDotplot, 500
188188

189189
return
190190

@@ -358,7 +358,8 @@ socr.controller = (model, view) ->
358358
# PubSub.publish "Dotplot generated"
359359
# return
360360
#), 500
361-
PubSub.publish "removeLoaderGif"
361+
PubSub.publish "toggleLoadingSpinner" ,{action:'hide'}
362+
362363

363364
return
364365

‎js/appModel.coffee‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -910,7 +910,7 @@ socr.model = ->
910910
_sum = 0
911911

912912
_sampleSize = _count #socr.model.get "randomSampleCount"
913-
_stopCount = socr.model.get "stopCount"
913+
_stopCount = parseInt socr.model.get "stopCount"
914914

915915
while _k < socr.model.getK()
916916
_dataset = socr.model.getDataset(_k)

‎js/appView.coffee‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -235,6 +235,7 @@ socr.view = (model) ->
235235

236236
PubSub.subscribe "randomSampleGenerationStarted", (msg,data) ->
237237
socr.view.disableButtons() #disabling buttons
238+
socr.view.showSampleListLoader()
238239
socr.view.updateStatus "started"
239240

240241

@@ -252,6 +253,8 @@ socr.view = (model) ->
252253
$(".show-list-end").val end
253254
$("#showButton").trigger "click"
254255

256+
PubSub.subscribe "toggleLoadingSpinner" ,(msg,data)->
257+
socr.view.toggleLoadingSpinner(data)
255258

256259
toggleControllerHandle: (action) ->
257260
console.log action
@@ -908,8 +911,18 @@ socr.view = (model) ->
908911

909912
return
910913

911-
toggleLoader : (action)->
912-
if action is "show"
914+
showSampleListLoader : ()->
915+
$("#sampleList").html '<div class="spinner" style="width:40px">
916+
<div class="double-bounce1 black-bg"></div>
917+
<div class="double-bounce2 black-bg"></div>
918+
</div>'
919+
920+
toggleLoadingSpinner : (data)->
921+
console.log('toggleLoadingSpinner action : ',data);
922+
if data.action is "show"
923+
$('.loading-spinner').show()
924+
else
925+
$('.loading-spinner').hide()
913926

914927
#
915928
# setPercentile:function(x){

0 commit comments

Comments
 (0)