html - Keep ajax loader in sight in a page with much content -

html - Keep ajax loader in sight in a page with much content -

i have div functions ajax loader 'image'. it's pure css. problem i'm having is, page has lot of content , if somewhere downwards on page, won't see loader because it's displayed somewhere @ top of page (out of sight).

what need change:

<div id="floatingbarsg" style="display: none; position: absolute; top: 50%; left: 50%; padding: 2px; z-index: 99999"> <div class="blockg" id="rotateg_01"> </div> <div class="blockg" id="rotateg_02"> </div> <div class="blockg" id="rotateg_03"> </div> <div class="blockg" id="rotateg_04"> </div> <div class="blockg" id="rotateg_05"> </div> <div class="blockg" id="rotateg_06"> </div> <div class="blockg" id="rotateg_07"> </div> <div class="blockg" id="rotateg_08"> </div> </div>

tried kinds of margin options, nil worked.

try this:

#floatingbarsg { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); }

html css ajax