raulbaros raulbaros - 2 months ago 5x
HTML Question

Position and style ajax loader

I am trying to position (always in page center for all devices) and style (color, size, etc.) my ajax loader gif. For position I use @media-queries and I am trying to specify a div id inside my javascript. I tried inline styling but that doesnt really work. Is my goal possible to do?

$("#list").html("<img src='/images/ajax-loader.gif' width='200'>");


Without knowing what you mean by "doesn't reall work", we're kind of guessing here. However inline styles should work just fine for centering

$("#list").html("<img src='/images/ajax-loader.gif' width='200' style='position:fixed; left:50%; top:50%;transform: translate(-50%, -50%);'>");

I would suggest moving this into a class in your css though:

.loader {
     transform: translate(-50%, -50%);

Then just apply it:

      $("#list").html("<img src='/images/ajax-loader.gif' width='200' class='loader'>");