Lade-Animation "Spinner" im Tab anstatt Sanduhr-Symbol

Guck mal in diesen Thread, vielleicht hilft er Dir:

Beitrag

Loading-Spinner im Tab ändern?

Hallo!

Frage an die Firefox-Experten:
Mir sind die zwei winzigen Pünktchen, die sich im neuesten Firefox als Loading-Spinner oben im Tab einer gerade ladenden Seite drehen, zu klein für meine Augenqualität. Den alten hatte ich auch aus dem Augenwinkel immer besser im Blick und musste nicht unbedingt ausdrücklich hinstarren.

Hat jemand ne Ahnung, ob man da nachträglich einen anderen Spinner bzw. wieder den alten hinbekommen kann?
Danke!

firecamper099

22. November 2017 um 22:35

Zitat von Thunderstruck

Hat jemande eine Idee wie ich den wieder bekomme?

Teste bitte:

/*der Schatten von links nach rechts über den Tab bei Reload weg*/
.tab-loading-burst {
  opacity: 0 !important;
}

/*der schwarze Punkt im Throbber weg beim Reload*/
.tab-throbber-fallback[busy]::before,
.tab-throbber[busy]::before,
.tab-throbber[progress]::before {
  opacity: 0 !important;
}

.tab-throbber[busy] {
  background-image: url("chrome://global/skin/icons/loading.svg")!important;
  background-repeat: no-repeat !important;
  margin-top: 0px !important;
  -moz-context-properties: fill !important;
  fill: #0070ff !important;
  background-size: 18px !important;
}

Die Farbe kannst/musst du dir anpassen in Zeile 18.

Zitat von Thunderstruck

eine schöne Lade-Animation zum Beispiel den "Spinner"

Aris-t2 hat fünf Optionen, hier ist eine von ihnen Sie müssen dieses Css und zwei Bilder herunterladen, tabthrobber_fx56_connecting.png und tabthrobber_loading-ubuntu.png.

Hallo,

Zitat von Thunderstruck

ich möchte anstatt der statischen Sanduhr

Das scheinen irgendwie alle überlesen zu haben. Dass du die Sanduhr siehst, bedeutet, dass du in deinem System die Option zur Reduzierung von Animationen aktiviert hast. Die musst du abstellen.

Zitat von Thunderstruck

ich möchte anstatt der statischen Sanduhr in den Tabs eine schöne Lade-Animation zum Beispiel den "Spinner"

Ganz hübsch finde ich einen Ladebalben in der Kopfzeile des Tab.

/* Visuelle Anzeige des Seitenladezustands in der Kopfzeile der Tabs*/
/* progress-bar page loading in the tab header */
.tabbrowser-tab:not([usercontextid]) > .tab-stack > .tab-background > .tab-context-line {
   opacity: 0;
   background-color: #2A970A;
   height: 3px;	
}

.tabbrowser-tab:is([busy], [progress]) > .tab-stack > .tab-background > .tab-context-line {
   opacity: 1;
   transform-origin: left center;
   animation: 2s ease-in-out scale;
}

.tabbrowser-tab[bursting] > .tab-stack > .tab-background > .tab-context-line {
   transition: opacity 2s ease-out;
}

@keyframes scale {
   0% {transform: scaleX(0);}
   100% {transform: scaleX(1);}
}

Farbe anpassen in Zeile 5.

Oh, freut micht sehr, dass ich auch mal was helfen konnte. Aber mit fremden Lorbeeren schmücke ich mich nicht. Der Code ist natürlich nicht von mir, ich kann das garnicht. Habe ich irgendwo auf dieser Seite kopiert.

Zitat von Thunderstruck

die für mich unerwünschten Animationen von Windows aus geschaltet lassen

Die Einstellung, auf die du dich beziehst, betrifft nicht nur Windows, sondern sämtliche Anwendungen auf deinem System, welche diese Einstellung berücksichtigen. Das schließt auch Firefox ein - und zwar für weit mehr als nur diese eine Animation.

Zitat von Sören Hentzschel

Hallo,

Zitat von Thunderstruck

ich möchte anstatt der statischen Sanduhr

Das scheinen irgendwie alle überlesen zu haben. Dass du die Sanduhr siehst, bedeutet, dass du in deinem System die Option zur Reduzierung von Animationen aktiviert hast. Die musst du abstellen.

Das ist oder war zumindest mal auch eine Fx spezifische Konfiguration, die man in about:config umstellen konnte, via prefersReducedMotion - und die Sanduhr kam dann mit eben diesen reduzierten Animationen.

Edit: Hier mehr zum Thema:

Zitat

In Firefox about:config: Add a number preference called ui.prefersReducedMotion and set its value to either 0 for full animation or to 1 to indicate a preference for reduced motion. Changes to this preference take effect immediately.

Arsen und Thunderstruck

Man kann den Ladebalken auch noch ein bisschen anpassen:

/* Fortschrittsanzeige für das Laden der Seite */

	.tabbrowser-tab:not([usercontextid]) > .tab-stack > .tab-background > .tab-context-line {
    opacity: 0;
    background-color: #00ff00;
    height: 6px;
	margin-inline: 8px;
    margin-top: 2px;
	border-radius: 90px;
	}
	.tabbrowser-tab:is([busy], [progress]) > .tab-stack > .tab-background > .tab-context-line {
    opacity: 1;
    transform-origin: left center;
    animation: 2s ease-in-out scale;
	}
	.tabbrowser-tab[bursting] > .tab-stack > .tab-background > .tab-context-line {
    transition: opacity 2s ease-out;
	}
	@keyframes scale {
    0% {transform: scaleX(0);}
    100% {transform: scaleX(1);}
	}

Ggf. Zeilen 5-9 anpassen

Zitat von Boersenfeger

Man kann den Ladebalken auch noch ein bisschen anpassen:

ich habe das und die CSS aus Beitrag #3 von 2002Andreas zusammengefügt, aber glaube nur das von 2002Andreas funktioniert.

Hier die zusammengefügte CSS:

/*der Schatten von links nach rechts über den Tab bei Reload weg*/
.tab-loading-burst {
  opacity: 0 !important;
}

/*der schwarze Punkt im Throbber weg beim Reload*/
.tab-throbber-fallback[busy]::before,
.tab-throbber[busy]::before,
.tab-throbber[progress]::before {
  opacity: 0 !important;
}

.tab-throbber[busy] {
  background-image: url("chrome://global/skin/icons/loading.svg")!important;
  background-repeat: no-repeat !important;
  margin-top: 0px !important;
  -moz-context-properties: fill !important;
  fill: #ffffff !important;
  background-size: 18px !important;
}

/* Fortschrittsanzeige für das Laden der Seite */

.tabbrowser-tab:not([usercontextid]) > .tab-stack > .tab-background > .tab-context-line {
  opacity: 0;
  background-color: #ffff00;
  height: 6px;
  margin-inline: 8px;
  margin-top: 2px;
  border-radius: 90px;
}
.tabbrowser-tab:is([busy], [progress]) > .tab-stack > .tab-background > .tab-context-line {
  opacity: 1;
  transform-origin: left center;
  animation: 2s ease-in-out scale;
}
.tabbrowser-tab[bursting] > .tab-stack > .tab-background > .tab-context-line {
  transition: opacity 2s ease-out;
}
@keyframes scale {
  0% {transform: scaleX(0);}
  100% {transform: scaleX(1);}
}

Kann mir evtl. Jemand helfen und testen ob es beim Ihm/Ihr das funkt oder nicht?

Zitat von omar1979

beim Ihm/Ihr das funkt oder nicht?

So sieht das hier mit dem Code aus:

Zitat von 2002Andreas

So sieht das hier mit dem Code aus:

Danke dir.. Evtl. sind meine Tabs klein und ich muss mit den Zahlen spielen.. Keine Ahnung im Moment. Danke dir.

2002Andreas kann es sein, dass das nur bei den "inaktiven Tab's" funktioniert?

bei mir zeigts nur bei den inaktiven tab's an..

Zitat von omar1979

dass das nur bei den "inaktiven Tab's" funktioniert?

Nein.

Siehe meinen Screenshot oben, da ist es der aktive Tab wenn er neu geladen wird.

Zitat von omar1979

bei mir zeigts nur bei den inaktiven tab's an..

Was sind das für Webseiten, werden die automatisch neu geladen

Zitat von 2002Andreas

Was sind das für Webseiten, werden die automatisch neu geladen

Ja die hab ich in dem Script autoreload eingetragen und laden automatisch.

Beid dem aktiven tab wenn ich reloade, zeigt es den gelben Balken nicht an.

Zitat von omar1979

zeigt es den gelben Balken nicht an.

Auch dann nicht, wenn du nur einen Tab offen hast?

Evtl. funkt dir dann ein anderes Skript oder CSS-Code dazwischen

Zitat von 2002Andreas

Auch dann nicht, wenn du nur einen Tab offen hast?

Evtl. funkt dir dann ein anderes Skript oder CSS-Code dazwischen

Hab jetzt in einem neuen Profil getestet. Keine andere CSS und nur 2 Scripte.

diese 2 Scripte und das 1e CSS

Zitat von omar1979

Hab jetzt in einem neuen Profil getestet.

Hast du das erst ganz neu erstellt?

Wenn ja, dann auch den config Eintrag für CSS-Codes angepasst?