is it possible to have a loading spinner + a loading message both appearing before a page or a rest are load
I tried to add a js on before load event
code$.mobile.loading( 'show', { theme: "b", text: "foo", textonly: false, textVisible: true });/code
but it doesn't work.
how can i obtain something like the loader example (theme a) in http://jquerymobile.com/demos/1.2.0/d...???
Hello! Working on it. I'll update.
Hi,
You're trying to use jQuery Mobile loading indicator. You can use Tiggzi functions for work with loading indicator: showSpinner and hideSpinner. To show loading indicator use:
codeshowSpinner();/code
so is it not possible to use jQuery Mobile loading indicator??? (it was usefull because there were differt theme and i was interested in theme a )
is it possible with showSpinner() to show the spinner image and a message (loading...) too??
is it possible to change the background color of the tiggzi spinner from white to grey??
Hi, please take a look at this post https://getsatisfaction.com/tiggzi/to.... We are thinking about removing Tiggzi spinner to let users easily use JQM examples.
Thought I would share my spinner way. As I just hate the default...lol
First add these functions to existing JS asset or make a new custom JS.
code
function spinnerTop(screen,text) {
// Use for restservice indicator. Ensure remove on Complete and Fail...
//Sets spinner top right. Over Top of Header if there.. Header Z-index is 1000
// Styles applied to Tiggzi page name
var cssContent = {'position':'absolute','right':'10px','width':'60','height':'30','top':'4px','z-index':'2000'};
//Sets text over added spinner
var textStyles1 = {'text-align':'center','position':'absolute','color':'white','font-weight':'bold','font-size':'12px','top':'0px','z-index':'2002'};
$('<div class="SpinnerAdd" align="center"><div></div><div></div><div></div></div>').prependTo(Tiggzi(screen)).css(cssContent);
$('<p>').appendTo($('.SpinnerAdd')).text(text).css(textStyles1);
// To Remove... Use $('.SpinnerAdd').remove();
}
function spinnerFull(screen,text) {
//FULL SCREEN Ajax spinner... Disables entitre screen and centers loader gif
//Sets Background opacity, size etc.
var cssBack = {'background-color':'white','opacity':'0.3','width':'320','height':'470','top':'0px','position':'absolute','z-index':'2000'};
//Sets Spinner
var Spinner = {'position':'absolute','right':'120px','top':'240px','z-index':'2002'};
$('<div class="Backdrop"/>').prependTo(Tiggzi(screen)).css(cssBack);
$('<div class="SpinnerAdd" align="center"><div></div><div></div><div></div></div>').prependTo(Tiggzi(screen)).css(Spinner);
//Optional message on Full Screen Spinner
if (text != null) {
var textStyles2 = {'text-align':'center','position':'absolute','color':'white','font-weight':'bold','font-size':'12px','top':'0px','z-index':'2004'};
$('<p>').appendTo($('.SpinnerAddFull')).text(text).css(textStyles2);
}
// To Remove... Use $('.SpinnerAdd').remove(); AND $('.Backdrop').remove();
}
/code
Now add this NEW CSS asset.
code
/*===========================================================
Disable default Spinner
Add Nothing else to this CSS Page!!
========================================================*/
#ajaxBusy {display: none !important;}// Gets rid of the spinner
/code
Now add one more css asset for the facebook style activity indicator.
code
/*===========================================================
SpinnerAdd Loader
SpinnerAdd
========================================================*/
.SpinnerAdd div{
height:30px;
width:12px;
display:inline-block;
background-color: #56bbdb;
border:1px solid #217c99;
-webkit-animation:SpinnerAdd_loader 1.3s linear infinite;
-moz-animation:SpinnerAdd_loader 1.3s linear infinite;
animation:SpinnerAdd_loader 1.3s linear infinite;
-webkit-transform:scale(0.91);
-moz-transform:scale(0.91);
transform:scale(0.91);
}
.SpinnerAdd div:nth-child(1){
-webkit-animation-delay:0.39s;
-moz-animation-delay:0.39s;
animation-delay:0.39s;
}
.SpinnerAdd div:nth-child(2){
-webkit-animation-delay:0.52s;
-moz-animation-delay:0.52s;
animation-delay:0.52s;
}
.SpinnerAdd div:nth-child(3){
-webkit-animation-delay:0.65s;
-moz-animation-delay:0.65s;
animation-delay:0.65s;
}
@-webkit-keyframes SpinnerAdd_loader{
0%{
-webkit-transform:scale(1.2);
opacity:1
}
100%{
-webkit-transform:scale(0.7);
opacity:0.1
}
}
@-moz-keyframes SpinnerAdd_loader{
0%{
-moz-transform:scale(1.2);
opacity:1
}
100%{
-moz-transform:scale(0.7);
opacity:0.1
}
}
@keyframes SpinnerAdd_loader{
0%{
transform:scale(1.2);
opacity:1
}
100%{
transform:scale(0.7);
opacity:0.1
}
}
/code
Thats IT!! Now to use is simple...
When you want only an activity indicator use this custom JS
code
myservicetorun.execute({});//run your service or other stuff
var screen = "TheScreenName"//Apply to this screen by name
var text = "LOADING"//any text here
spinnerTop(screen,text);//this runs the function
/code
When you want to do the whole screen indicator use this JS
code
var screen = "TheScreenName"
var text = 'yourtext';
spinnerFull(screen,text);
/code
Now you have a full screen or indicator only for your rest services or any other reason you want to show activity to the user.
Tweek the css to suit and the css withing the JS functions
Just remember to add either $('.SpinnerAdd').remove(); AND OR $('.Backdrop').remove();
To remove the indicators when the service is complete.
ie. Completed event of service add custom JS
code
$('.SpinnerAdd').remove();
$('.Backdrop').remove();
/code
Good work Neil.
Thanks Joe..
NOTE
New way to hide spinner (Old way obsolete and not work anymore)
code
.ui-icon-loading {
display:none;
}
/code
Is there any way to make the default spinner full screen? I don't care so much about the actual image, I just want it so that users can't click the back button etc.
Hi, I'll search for a solution.