Question

有人请教我如何在html表格上方显示预加载器。我已经尝试了许多网站似乎没有任何工作。

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

Answer 1

：）

尝试将此添加到您的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]

如何显示html预加载器

1 个答案: