we have an ajax script that gets a word and loads some related data into a div tag.
it works fine but we want to add preloader (without jQuery) to div tag, we tried spin.js but it works only for whole page, this is what we did: (Summarized)
<head>
<script src="spin.min.js"></script>
</head>
<body>
<div id="data">
//data loads here
</div>
<script type="text/javascript" charset="utf-8">
var opts = {
lines: 13, // The number of lines to draw
length: 7, // The length of each line
width: 4, // The line thickness
radius: 28, // The radius of the inner circle
rotate: 0, // The rotation offset
color: '#000', // #rgb or #rrggbb
speed: 1, // Rounds per second
trail: 92, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: false, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: 'auto', // Top position relative to parent in px
left: 'auto' // Left position relative to parent in px
};
var target = document.getElementById('data');
var spinner = new Spinner(opts).spin(target);
</script>
</body>
what is wrong? and any other (and better) solutions?
Your data div has full width and spin.js will place the image at the center of the element both vertically and horizontally thats why you are seeing this on a full screen based.
For e.g.
<head>
<script src="spin.js"></script>
</head>
<body>
<div id="data" style="width: 100px; height: 100px; float: left;">
<!-- Data Loads Here-->
</div>
<div id="NoData" style="width: 100px; height: 100px; float: left;">
Hello Hi Bye
</div>
<script type="text/javascript" charset="utf-8">
var opts = {
lines : 13, // The number of lines to draw
length : 7, // The length of each line
width : 4, // The line thickness
radius : 28, // The radius of the inner circle
rotate : 0, // The rotation offset
color : '#000', // #rgb or #rrggbb
speed : 1, // Rounds per second
trail : 92, // Afterglow percentage
shadow : false, // Whether to render a shadow
hwaccel : false, // Whether to use hardware acceleration
className : 'spinner', // The CSS class to assign to the spinner
zIndex : 2e9, // The z-index (defaults to 2000000000)
top : 'auto', // Top position relative to parent in px
left : 'auto' // Left position relative to parent in px
};
var target = document.getElementById('data');
var spinner = new Spinner(opts).spin(target);
</script>
</body>