CODEWITHSUNDEEP
htmlcssmobile-safarigif
Zachary Fallon
Zachary Fallon

Reputation: 3

How to make mobile Safari show a background gif properly

I am trying to add a loading spinner to a web application where I have been provided with an animated gif that should be used as the icon. Right now I'm doing this with a div that is initially hidden via CSS and then is shown when I want to indicate loading. I'm using the following CSS on this div so that when its shown the loading gif appears in the center of the screen


    #loader {
        position: fixed;
        left: 50%;
        top: 50%;
        z-index: 10000;
        border-radius: 50%;
        border: 5px solid #3AACE2;
        width: 128px;
        height: 128px;
        margin: -76px 0 0 -76px;
        background: url(/content/images/loader.gif);
        background-size: 128px 128px;
    }

This is working well on desktop and on android devices but in mobile Safari (on both an iPad and iPhone) the gif does not show. When the div is shown all that is visible is the border. I believe it has something to do with the fact that the div is hidden at first so the browser does not download the image. So I am not sure if there is a way to make it download the image or if perhaps there is a better way to do a loading spinner like this altogether.

Upvotes: 0

Views: 1174

Answers (1)

Weyers de Lange
Weyers de Lange

Reputation: 290

Please test in safari. i added -webkit for safari

.loader {
  position: fixed;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  width: 128px;
  height: 128px;
  margin: -76px 0 0 -76px; 
  border: 16px solid #f3f3f3;
  border-top: 16px solid #fff;
  -webkit-animation: spin 5s linear infinite;
  animation: spin 5s linear infinite;

}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

</style>
</head>
<body>


<div class="loader"><img src="https://www.w3schools.com/html/programming.gif" alt="Computer man" style="width:48px;height:48px;"></div>

</body>
</html>

Upvotes: 0

Related Questions