2015-03-15 3 views
-1

Кто-нибудь, пожалуйста, помогите мне показать предварительный загрузчик над таблицей html. Я уже пробовал много сайтов, ничего не работает.Как отобразить html Preloader

<div id="_CourseList"> 
    <div id="spinner"> 
     <img src="@Url.Content("~/img/ajax-loader.gif")" alt="Loading..." /> 
    </div> 
    <table id="resp_table" class="tableResponsive table toggle-square" data-    filter="#table_search" data-page-size="40"> 
    </div> 
</div> 
+0

Нужно ли показывать изображение ajax-loader при загрузке данных вашей таблицы? –

+0

Да, но предварительный загрузчик должен просто вынести на стол один – user3796642

ответ

0

:)

Попробуйте добавить это в ваш CSS:

.svg-loader{ 
    height: 20vmin; 
    padding: 3vmin 20vmin; 
    vertical-align: top; 
} 

, а затем добавить к вашей HTML - над столом, например, так:

<div id="_CourseList"> 
    <div id="spinner"> 
<svg version="1.1" 
     class="svg-loader" 
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     x="0px" 
     y="0px" 
     viewBox="0 0 80 80" 
     xml:space="preserve"> 

     <path 
      id="spinner" 
      fill="#D43B11" 
      d="M40,72C22.4,72,8,57.6,8,40C8,22.4, 
      22.4,8,40,8c17.6,0,32,14.4,32,32c0,1.1-0.9,2-2,2 
      s-2-0.9-2-2c0-15.4-12.6-28-28-28S12,24.6,12,40s12.6, 
      28,28,28c1.1,0,2,0.9,2,2S41.1,72,40,72z" 
     > 

      <animateTransform 
       attributeType="xml" 
       attributeName="transform" 
       type="rotate" 
       from="0 40 40" 
       to="360 40 40" 
       dur="0.6s" 
       repeatCount="indefinite" 
      /> 
     </path> 
    </svg> 

      <animateTransform 
       attributeType="xml" 
       attributeName="transform" 
       type="rotate" 
       from="0 40 40" 
       to="-360 40 40" 
       dur="0.6s" 
       repeatCount="indefinite" 
      /> 
     </path> 
    </svg> 
    </div> 
    <table id="resp_table" class="tableResponsive table toggle-square" data-    filter="#table_search" data-page-size="40"> 
</div> 
</div> 

[Source]

+0

спасибо за ваш replay bro, его просто вращается над столом. Мне нравится иметь его как оверлей. – user3796642

+0

что-то вроде этого http://www.guriddo.net/demo/jqgridphp/ – user3796642

+0

Ах! в этом случае проверьте это, так как оно должно служить вам намного лучше: http://stackoverflow.com/questions/1964839/jquery-please-wait-loading-animation – MEOWPLATES