0

I'm already using spin.js in my application. I like it because it's pure JS and at least for me solved some issues that I was having using a loading image. However the default behaviour has two things that I would really like to change.

Here is a simple Fiddle example which is simple but very well illustrates what I would like to achieve.

I have a very long from and at the beginning of the HTML file I have <div id="show-spinner"></div> so when the user clicks Submit I can:

var target = document.getElementById('show-spinner');
var spinner = new Spinner().spin(target);

The problem is that when I'm at the end of the form where the submit button is when I call the spinner it shows in such a way that I may very well not see it at all, as it is in my Fiddle example (at least if you are using some low(laptop) resolution) but no matter the resoution there's always the chance to get so down below that you can't actually see that the spinner is shown. Which kinda leads me to the nex problem which I think is realted to the first - I would like to show the spinner always at the center of media screen (the laptop display for example) and also - since for example I don't want the user to be able to click Submit twice and in I would say, all of the cases, when I show the spinner I would like the user to not be able to interact with the UI - I mean, to click buttons, write stuff in inputs and so on so I would like to show some sort of load mask or I'm not sure how it's called, just like when you call alert()

So to sum it up - from what is it right now in my fiddle example I would like to change it to some alert like behaviour so that no matter where I am on the HTML dom I always get some sort of spinning animation on the center of my screen and mask diasbling the user to interact with the UI.

Since this sounds to me as kind of trivial task, or at least something that have been solved already I would accept answer pointing to plugin that provide such functionality. The only thing - I woul prefer to use something that is pure JS and doesn't use images.. but I will apreciate all suggestions!

Leron
  • 9,546
  • 35
  • 156
  • 257
  • You can add CSS for the class `.spinner { position: fixed !important;}` [Fiddle](http://jsfiddle.net/anpsmn/L7d3soja/1/) – anpsmn Nov 20 '14 at 07:24
  • @anpsmn Nice this solves the first part of my problem. Do you have any idea how can I prevent any interaction with the page until the spinner is stopped? – Leron Nov 20 '14 at 07:27
  • 1
    This link may help http://stackoverflow.com/a/12882847/473016 – anpsmn Nov 20 '14 at 07:30

0 Answers0