CODEWITHSUNDEEP
jqueryajaxspinnerpageload
Raj
Raj

Reputation: 193

How to show page loading spinner in my html page content using jquery mobile or jquery

I want to show page loading spinner in my html page content using jquery mobile or jquery .i tried some coding in jquery and ajax. its not working ...is there any solution ..can anyone suggest me

Upvotes: 1

Views: 12680

Answers (3)

dxpkumar
dxpkumar

Reputation: 371

///HTML CODE////
<div class="loader">
</div>
<button id="btn">
click 
</button>
<p>Processing - Please wait </p>

// CSS CODE ///
.loader {
  border: 16px solid yellow;
  border-radius: 50%;
  border-top: 16px solid #1BB2AC;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/// JQUERY CODE ///
$('.loader').hide();
$('p').hide();
$('#btn').on('click', function(){
        setInterval(function(){
            $('.loader').hide();
     $('p').hide()
      $('#btn').hide();
        }, 2000)
    $('p').show();
        $('.loader').show();
    $('#btn').hide();
    });

https://jsfiddle.net/dxpkumar/4kgupxeL/#&togetherjs=8rscNma3nL

Upvotes: 0

TechDog
TechDog

Reputation: 3088

just use a .gif image. Just do a Google image search "spinner gif". Then save the spinner.gif to ur local. Use "visibility" to show and hide....

Procedure:- 1. Open Google.com

  1. Click Image Search

  2. "Enter Spinner.gif" in search box

  3. Click Search button

its done now you will find lot of gif image download as your wish(Any .gif image fit for your app) Store it in your local the use in html,

Upvotes: 1

Joonas
Joonas

Reputation: 7303

These should help you to achieve that.

All of these basically show the same thing ( making website with ajax loaded content and loading indicator. ) with some differences.

http://net.tutsplus.com/tutorials/javascript-ajax/how-to-load-in-and-animate-content-with-jquery/

http://tutorialzine.com/2009/09/simple-ajax-website-jquery/

http://www.queness.com/post/328/a-simple-ajax-driven-website-with-jqueryphp

Upvotes: 2

Related Questions