How to resize a GIF that has been loaded into an image component

Anvil Q&A
1

What I’m trying to do:

I’m trying to add a small loading GIF in place of a larger image while it’s loading in my Anvil app. The challenge is that when I use the GIF as a placeholder for the image, it expands to fill the entire space designated for the larger image. I want the GIF to remain small, centered, and not scaled up, to indicate a loading state without overwhelming the UI.

What I’ve tried and what’s not working:

I attempted to control the size of the GIF using CSS, applying styles directly to the Image component to reduce its size and center it. However, the GIF still expands to fill the entire space of the larger image it’s meant to be a placeholder for. I’ve also tried setting the dimensions of the Image component programmatically when setting the GIF as the source, but the outcome remains the same.

Here are some of the CSS styles and Python code I’ve experimented with:

# Setting the source and attempting to control size via inline styles
self.image_1.source = "path/to/loading.gif"
self.image_1.attributes['style'] = "width: 50px; height: auto; margin: auto;"

# Applying a CSS class (defined in the Assets section) to the Image component
self.image_1.set_css_class('small-loading-gif')

And the corresponding CSS:

.small-loading-gif {
    width: 50px;
    height: auto;
    margin: auto;
}

Despite these attempts, the GIF still fills the entire space intended for the larger image, instead of remaining small and centered.

2

Your image component is probably set to fit the image to the size of the component. Look at the display mode property: Anvil Docs | anvil

Perhaps set it temporarily to original size?

1 Like
3

Although your question clearly says that you want to resize an image inside Image component.
However, If it’s the default anvil loading spinner you are trying to replace,

I add the following CSS in theme.css to achieve this,

/* loading spinner */
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
#loadingSpinner {
    width: 50px;
    height:50px;
  	top: calc(50% - 25px);
  	left: calc(50% - 25px);
    border-radius: 0;
    box-shadow: none;/*0px 0px 10px 10px #fcfcfc;*/
    background-color: transparent;
    background-image: url(https://github.com/******/raw/main/loader.gif) !important;
    
 	-webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}
/* end of loading spinner */
1 Like