How to display html Preloader

Question

Some one please help me how to show pre-loader above the html table. I have already tried many site nothing seems working.

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

Do you need to show the ajax-loader image while loading the data of your table? — IndieTech Solutions, Mar 15 '15 at 05:09

score 0 · Answer 1 · answered Mar 15 '15 at 05:15

:)

Try adding this to your CSS:

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

and then add this to your HTML - above the table, like so:

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

thanks for your replay bro, its just rotating above the table. i like to have it as overlay . — user3796642, Mar 15 '15 at 16:12
Ah! in that case check this as it should serve you much better: http://stackoverflow.com/questions/1964839/jquery-please-wait-loading-animation — MEOWPLATES, Mar 16 '15 at 16:37

How to display html Preloader

1 Answers1