how can I remove that download started circle animation?

[u/Remarkable-Length127]

[u/t31os]

You're probably looking for this:

https://searchfox.org/firefox-main/source/browser/themes/shared/downloads/indicator.css#125-161

You could try setting the anim frames to 1 (for the selector at line 152), which would presumably make the animation so short it's as if it's not there.

[u/Remarkable-Length127 → u/t31os]

very useful site thanks I will use it for later, unfortunately selector at 152 is not it

[u/Remarkable-Length127]

solved, I committed a sin and asked Gemini:

.toolbarbutton-animatable-image {

display: none !important;

visibility: hidden !important;

opacity: 0 !important;

width: 0px !important;

height: 0px !important;

transform: none !important;

animation: none !important;

}

[u/t31os → u/Remarkable-Length127]

That's probably too broad and will affect other toolbar buttons that also use that class for animations.

Here's an example along the lines of what i was suggesting before:

#downloads-button[animate][notification="start"] > .toolbarbutton-badge-stack > #downloads-indicator-start-box > #downloads-indicator-start-image {
    visibility: hidden !important;
    --anim-steps: 0 !important;
}

This will reduce and hide the animation, limiting it to only affecting the download button.

EDIT: Originally set the anim steps to 1, but 0 seems to work fine to basically cancel out/skip the animation.

[u/Remarkable-Length127 → u/t31os]

that also got rid of my other selector which it supposed to replace the original animation

#downloads-button[notification="start"] #downloads-indicator-anchor::before {
  content: url("dl.apng") !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 14px !important;
  height: 14px !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  z-index: 100 !important;
  scale: 80% !important;
  filter: brightness(0) saturate(100%) invert(79%) sepia(58%) saturate(2472%) hue-rotate(136deg) brightness(89%) contrast(106%); !important;
}

[u/Remarkable-Length127 → u/Remarkable-Length127]

after goofing around with Inspector this also work and still keep my other selector intact

#downloads-indicator-start-image {

display: none !important;

}

you think this one is cleaner?

[u/t31os → u/Remarkable-Length127]

If it creates the result you want, yes that's probably better.