loading spinner + message

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
$.mobile.loading( 'show', { theme: "b", text: "foo", textonly: false, textVisible: true });
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...???
1 person has
this question
+1
This topic is no longer open for comments or replies.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited kidding, amused, unsure, silly sad, anxious, confused, frustrated indifferent, undecided, unconcerned

  • 1
    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:
    showSpinner();
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited kidding, amused, unsure, silly sad, anxious, confused, frustrated indifferent, undecided, unconcerned

  • 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??
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited kidding, amused, unsure, silly sad, anxious, confused, frustrated indifferent, undecided, unconcerned

  • 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.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited kidding, amused, unsure, silly sad, anxious, confused, frustrated indifferent, undecided, unconcerned

  • 3
    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.

    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();
    }


    Now add this NEW CSS asset.

    /*===========================================================
    * Disable default Spinner
    * Add Nothing else to this CSS Page!!
    * ========================================================*/
    #ajaxBusy {display: none !important;}// Gets rid of the spinner


    Now add one more css asset for the facebook style activity indicator.

    /*===========================================================
    * 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
    }
    }


    Thats IT!! Now to use is simple...

    When you want only an activity indicator use this custom JS

    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


    When you want to do the whole screen indicator use this JS

    var screen = "TheScreenName";
    var text = 'yourtext';
    spinnerFull(screen,text);


    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

    $('.SpinnerAdd').remove();
    $('.Backdrop').remove();
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited kidding, amused, unsure, silly sad, anxious, confused, frustrated indifferent, undecided, unconcerned

  • 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.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited kidding, amused, unsure, silly sad, anxious, confused, frustrated indifferent, undecided, unconcerned

  • 1
    Just for everyone's benefit, I found an easier way to make a backdrop for the jquery spinner.

    Just add this to your custom css file and modify as needed...


    .ui-loader {
    width: 110%;
    height: 110%;
    top:15px !important;
    left:15px !important;
    opacity:1;
    background: rgba(0,0,0, .9);
    }
    .ui-loader > span {
    position: fixed;
    top: 50%;
    left: 50%;
    margin: -26px !important;
    opacity:.5;
    }
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited kidding, amused, unsure, silly sad, anxious, confused, frustrated indifferent, undecided, unconcerned

  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited kidding, amused, unsure, silly sad, anxious, confused, frustrated indifferent, undecided, unconcerned