добавление preloader в тег div

У нас есть сценарий ajax, который получает слово и загружает некоторые связанные данные в тег div.добавление preloader в тег div

это работает хорошо, но мы хотим, чтобы добавить прелоадер (без JQuery), чтобы сОн тега, мы пытались spin.js, но он работает только для всей страницы, это то, что мы сделали: (Сокращенное)

<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>

что неправильно? и любые другие (и лучшие) решения?

источник

2012-06-06 W2-S

Ваш datadiv имеет полную ширину и spin.js поместит изображение в центре элемента и по вертикали и по горизонтали вот почему вы видите это на весь экран на основе.

См., Например,

<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>

источник

2012-06-06 16:57:52 mprabhat

, но: 1 - скручивание работает до загрузки всей страницы (фото, логотипы и т. Д.). 2 - при тестировании ajax он загружает данные без какого-либо всплеска загрузки. –

как вы инициализируете свое вращение при запуске ajax? – mprabhat

похоже своя точка .. как это сделать? (я ноб на ajax/loader) –

добавление preloader в тег div

ответ

Смежные вопросы