Advice Request Firefox downloading animation css

[n8chavez]

Does anyone know of, or now where I can find a custom CSS animation that shows the downloading status using the icon on the toolbar? Waterfox uses one, but now I'm trying Firefox 100 and I like that feature?

 

[n8chavez]

I found one. It's okay. But anyone have anything better?

/* Hide unwanted bits */
#downloads-indicator-start-box, #downloads-indicator-start-image > *,
#downloads-indicator-finish-box, #downloads-indicator-finish-image > * {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Bar graphics and width driver */
#downloads-indicator-progress-outer {
  background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3crect x='0' y='3' width='16' height='10' stroke='%23888' fill='%23f4f4f4' stroke-width='1'/%3e%3c/svg%3e") center no-repeat !important;
}
#downloads-indicator-progress-inner {
  background: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3e%3crect x='0' y='3' width='16' height='10' stroke='%233c9af8' fill='%233c9af8' stroke-width='1' style='opacity:0.7' /%3e%3c/svg%3e") left no-repeat !important;
  max-width: var(--download-progress-pcent);
}
#downloads-button[animate][notification="finish"] #downloads-indicator-progress-inner {
  max-width: 100% !important;
  width: 100% !important;
}

/* Fix visibility, shape, and alignment */
#downloads-button[animate][notification="start"] > .toolbarbutton-badge-stack > #downloads-indicator-progress-outer,
#downloads-button[progress] > .toolbarbutton-badge-stack > #downloads-indicator-progress-outer,
#downloads-button[animate][notification="finish"] > .toolbarbutton-badge-stack > #downloads-indicator-progress-outer {
  visibility: visible !important;
  border-radius: 0 !important;
  border: none !important;
  align-items: left !important;
  justify-content: left !important;
}

#downloads-button[animate][notification="start"] #downloads-indicator-progress-inner,
#downloads-button[progress] #downloads-indicator-progress-inner,
#downloads-button[animate][notification="finish"] #downloads-indicator-progress-inner {
  visibility: visible !important;
  border-radius: 0 !important;
  border: none !important;
}