Advice Request Firefox downloading animation css

Please provide comments and solutions that are helpful to the author of this topic.

n8chavez

Level 16
Thread author
Well-known
Feb 26, 2021
785
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?
 
  • Like
Reactions: upnorth

n8chavez

Level 16
Thread author
Well-known
Feb 26, 2021
785
I found one. It's okay. But anyone have anything better?

Code:
/* 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;
}
 

About us

  • MalwareTips is a community-driven platform providing the latest information and resources on malware and cyber threats. Our team of experienced professionals and passionate volunteers work to keep the internet safe and secure. We provide accurate, up-to-date information and strive to build a strong and supportive community dedicated to cybersecurity.

User Menu

Follow us

Follow us on Facebook or Twitter to know first about the latest cybersecurity incidents and malware threats.

Top