I try to use the spin.js
I want it to pop up in the middle of the div element. So I did set:
position: 'relative' top:'50%' left:'50%'
but the top option doesn't work. After analyzing the problem I could break it down to a html/css problem:
<div style="background-color: red">
<div style="position:relative; height:20px; width:20px; top:50%; left:50%; background-color:blue"></div>
1st div line<br>br line<br>br line 2
<div>div line 1</div>
<div>div line 2</div>
</div>
In this example the blue element should be in the middle of the red, but it isn't. and here is the fillde for it:
http://jsfiddle.net/exu77/obcg3cxv/
This is the plunker to the original version with spin.js
The position:relative must be applied to the parent element, i.e. the div that contains the spinner. The spinner itself needs position:absolute (which is the default). Here is is an updated version of your plunker where the spinner is centered inside the red box: http://plnkr.co/edit/GstXJdzyDtBIyMLuzbcY?p=preview