Lazy loading Spinner size is too big

Hello @gerwyn32
Can you be more specific of what is the issue?
Also, please provide me a report ID, can be generated from LSC => Toolbox => Report => click on “Send to Litespeed”

Thank you!

ID: ETFQLGKD

I provided 2 screenshots above. I think you haven’t seen the second screenshot. Basically the size of the loading spinner is absolutely MASSIVE. I want to change the size of it but fail to. (first screenshot).

Yes, I saw the screenshots(both)
I see that you are modifying 2 different things:
– https://docs.litespeedtech.com/lscache/lscwp/pageopt/#lqip-minimum-dimensions which is related to LQIP
– https://docs.litespeedtech.com/lscache/lscwp/pageopt/#responsive-placeholder-svg which seems to be the correct settign to change. To resize a SVG you will need to change viewBox too. Take a look here: https://css-tricks.com/scale-svg/#aa-the-svg-scaling-toolbox

So this is what I came up with… but its still massive…

<svg width="6" height="6" viewBox="0 0 12 12" xmlns="https://www.w3.org/2000/svg">
  <style>
    .spinner_ajPY {
      transform-origin: center;
      animation: spinner_AtaB 0.75s infinite linear;
    }
    @keyframes spinner_AtaB {
      100% {
        transform: rotate(360deg);
      }
    }
  </style>
  <path d="M6 0.5a5.5 5.5 0 1 0 5.5 5.5A5.5 5.5 0 0 0 6 0.5m0 9.5a4 4 0 1 1 4 -4 4 4 0 0 1 -4 4" opacity=".25"/>
  <path d="M5.07 0.58a5.5 5.5 0 0 0 -4.5 4.46A0.795 0.795 0 0 0 1.23 6a0.76 0.76 0 0 0 0.825 -0.65 4 4 0 0 1 3.33 -3.305A0.71 0.71 0 0 0 6 1.345a0.785 0.785 0 0 0 -0.93 -0.765" class="spinner_ajPY"/>
</svg>

I tried viewing here: https://www.svgviewer.dev/

Looks like it does get smaller on the svgviewer website but still… on the website its still just as large. I tried matching the viewBox with the width and height but it only messes things up. I think its because circles position itself from the middle of itself when projecting onto the viewBox meanwhile rectangles/squares position from the top left of itself.

• This reply was modified 1 month, 3 weeks ago by gerwyn32.

Still so huge:

huge loading spinners

• This reply was modified 1 month, 3 weeks ago by gerwyn32.

Did you disabled LSC on your site?

Yes for the time being. Do you know how to render a smaller svg spinner?

Try adding custom CSS that will resize the loader.
Please send a up to date report. Create a new one and share the number generated. Seems like the placeholder in the report is different than what you have on site now

In placehodler, you can use {width}?and?{height} to add the size that is specific to that image.

Also there is a layout shift, this can be resolved with use of CCSS.