3

I want to show loading spinner on Ajax call. I tried spin.js library but it didn’t work. Here is my JavaScript function, which using Ajax call.

function sendRequest() {
    $.ajax({
            url: '/spinner',
            type: 'get',
            contentType: "application/json",
            success: function (resp) {
                $('#spinner').append(resp.data);
                console.log(resp.data);
            },
            error: function (){
                console.log("Oops!");
            }
        }
    );
}

My HTML code:

<html>
<head>
    <link type="text/css" rel="stylesheet" href="../resources/css/style.css"/>
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/pure-min.css">
    <script type="text/javascript" charset="utf-8" src="../resources/js/jquery.js"></script>
    <script type="text/javascript" charset="utf-8" src="../resources/js/send.js"></script>
    <script type="text/javascript" charset="utf-8" src="../resources/js/jquery.spin.js"></script>
    <script type="text/javascript" charset="utf-8" src="../resources/js/spin.js"></script>
</head>
<body>
    <button id="butt" class="pure-button pure-button-primary" onclick="sendRequest()">Press me!</button>
    <div id="spinner">Greeting!</div>
</body>
</html>

-CSS-

#spinner {
    text-align: center;
    font-size: 100px;
    color: #FFFFFF;
    margin: 25px 350px 350px 350px;
    background: #ad9ea4;
    position: relative;
    padding: 50px;
}

On server side I have a little delay (5 seconds). Actually I want to show spinner for this 5 secs. How can I add animation spinner into my page?

barbara
  • 3,111
  • 6
  • 30
  • 58

1 Answers1

5

You don't need any libraries to do this. Just add an image to your markup, have it hidden by default, show it when you send a request and hide it when your request is done.

JavaScript

 function sendRequest() {
      // show spinner
      $('#spinner').show();
      $.ajax({
          url: '/spinner',
          type: 'get',
          contentType: "application/json",
          success: function (resp) {
              $('#spinner').append(resp.data);
              console.log(resp.data);
          },
          error: function () {
              console.log("Oops!");
          }
      }).done(function () {
          // hide spinner
          $('#spinner').hide();
      });
  }

HTML

<img src="path/to/img.png" id="spinner"/>

CSS (you may want to edit this)

#spinner{
  display: none;
  position: absolute;
  left: 50%;
  top: 20%;
}
Ahmad
  • 1,913
  • 13
  • 21
  • Should I use z-index for it? – barbara Aug 28 '14 at 12:02
  • @barbara Yes if there is anything with higher z-index – Ahmad Aug 28 '14 at 12:03
  • 1
    add another div with `id="fade"` in the markup, have it hidden by default, set its position to absolute, 100% width and height, set its background to black , set its opacity to 0.5 and right before `$('#spinner').show()` add `$('#fade').fadeIn()` and to hide it `$('#fade').fadeOut()` – Ahmad Aug 28 '14 at 12:15
  • Now my `
    Greeting!
    ` doesn't want to hide. When I fading in it div=spinner doesn't hide to background. It's still un the foreground.     – barbara Aug 28 '14 at 12:23
  • @barbara share your code in a fiddle so I can see what is wrong – Ahmad Aug 28 '14 at 12:26