Skip to content
  • Home
  • Recent
  • Tags
  • 0 Unread 0
  • Categories
  • Unreplied
  • Popular
  • GitHub
  • Docu
  • Hilfe
Skins
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor

  • Default (No Skin)
  • No Skin
Collapse
ioBroker Logo

Community Forum

donate donate
  1. ioBroker Community Home
  2. Deutsch
  3. Tester
  4. jarvis v2.2.0 - just another remarkable vis

NEWS

  • Jahresrückblick 2025 – unser neuer Blogbeitrag ist online! ✨
    BluefoxB
    Bluefox
    17
    1
    2.5k

  • Neuer Blogbeitrag: Monatsrückblick - Dezember 2025 🎄
    BluefoxB
    Bluefox
    13
    1
    993

  • Weihnachtsangebot 2025! 🎄
    BluefoxB
    Bluefox
    25
    1
    2.3k

jarvis v2.2.0 - just another remarkable vis

Scheduled Pinned Locked Moved Tester
jarvismaterialmaterial uimaterialdesignvisvisualisierungvisualization
6.1k Posts 316 Posters 4.3m Views 273 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • M MCU

    @skb Ja ist ja kein Problem. Du willst ja mit der Dropdownliste nur steuern. Du kannst ja zusätzlich den command Wert als secondary anzeigen lassen. Dann weißt du was gesendet wurde, ob vom Handy oder jarvis.

    Ansonsten gibt es auch noch die Möglichkeit ein Script zu nutzen, um den DP runCommand zu schreiben, falls sich der Wert command verändert und nicht initator:script / jarvis ist.

    SKBS Offline
    SKBS Offline
    SKB
    Developer Most Active
    wrote on last edited by
    #5201

    @mcu Habe es nun mit einem Hilfsdatenpunkt gemacht. Danke für die Inspiration ;)

    Vielleicht hast Du noch eine Idee. Ich habe hier einen DP, der Sekunden anzeigt. Kann man die in V2 auch in HH:MM(ggf. SS) formatieren?

    Danke!

    ... wer nicht mit der Zeit geht, geht mit der Zeit ...

    Aktuelle Entwicklung: Energiefluss - erweitert (https://forum.iobroker.net/topic/64734)

    M 1 Reply Last reply
    0
    • SKBS SKB

      @mcu Habe es nun mit einem Hilfsdatenpunkt gemacht. Danke für die Inspiration ;)

      Vielleicht hast Du noch eine Idee. Ich habe hier einen DP, der Sekunden anzeigt. Kann man die in V2 auch in HH:MM(ggf. SS) formatieren?

      Danke!

      M Online
      M Online
      MCU
      wrote on last edited by MCU
      #5202

      @skb Aber nur für die Anzeige in jarvis?
      Vermutlich ja

      {"value":"val => formatDate(val,'hhmm')"}
      

      Versuch mal in Datenpunkt Eigenschaften

      NUC i7 64GB mit Proxmox ---- Jarvis Infos Aktualisierungen der Doku auf Instagram verfolgen -> mcuiobroker Instagram
      Wenn Euch mein Vorschlag geholfen hat, bitte rechts "^" klicken.

      SKBS 1 Reply Last reply
      1
      • M MCU

        @skb Aber nur für die Anzeige in jarvis?
        Vermutlich ja

        {"value":"val => formatDate(val,'hhmm')"}
        

        Versuch mal in Datenpunkt Eigenschaften

        SKBS Offline
        SKBS Offline
        SKB
        Developer Most Active
        wrote on last edited by
        #5203

        @mcu Genau. Der Datenpunkt liefert Sekunden und ich würde gerne in Jarvis HH:MM oder HH:MM:SS haben.
        Geht das ohne "Hilfs"-DP?

        ... wer nicht mit der Zeit geht, geht mit der Zeit ...

        Aktuelle Entwicklung: Energiefluss - erweitert (https://forum.iobroker.net/topic/64734)

        M 1 Reply Last reply
        0
        • SKBS SKB

          @mcu Genau. Der Datenpunkt liefert Sekunden und ich würde gerne in Jarvis HH:MM oder HH:MM:SS haben.
          Geht das ohne "Hilfs"-DP?

          M Online
          M Online
          MCU
          wrote on last edited by
          #5204

          @skb sonst musst du im Internet nach Format date

          NUC i7 64GB mit Proxmox ---- Jarvis Infos Aktualisierungen der Doku auf Instagram verfolgen -> mcuiobroker Instagram
          Wenn Euch mein Vorschlag geholfen hat, bitte rechts "^" klicken.

          SKBS 1 Reply Last reply
          0
          • M MCU

            @skb sonst musst du im Internet nach Format date

            SKBS Offline
            SKBS Offline
            SKB
            Developer Most Active
            wrote on last edited by
            #5205

            @mcu Klappt mit:

            {
              "value": "val => new Date(val * 1000).toISOString().substr(11, 8)"
            }
            

            DP: 1067 (Sekunden)
            Ausgabe: 00:17:47

            ... wer nicht mit der Zeit geht, geht mit der Zeit ...

            Aktuelle Entwicklung: Energiefluss - erweitert (https://forum.iobroker.net/topic/64734)

            1 Reply Last reply
            1
            • M MCU

              @smart81 Nein, da ja das displayImage einen festen Wert haben möchte. Dann müsste man immer den gleichen Bildnamen verwenden. Da ich aber in v3 damit Probleme hatte, habe ich es wieder auf den "filename" umgestellt.
              Ja man kann es auch auf ein Bildnamen einstellen, wie gesagt in v3 gab es damit Probleme.
              Wird denn jetzt ein Bild in jarvis angezeigt?

              S Offline
              S Offline
              Smart81
              wrote on last edited by
              #5206

              @mcu

              Nein , ich weiß nicht wie ich das Script mit Jarvis verwende :(

              Hab jetzt ein JavaScript erstellt und deinen Code reinkopiert und gestartet.

              Nur wie bekomme ich das jetzt mittels Blockly in Jarvis?

              Muss ich ja dann mit den CustomHMTL Widget irgendwie hinbekommen 🤔

              1 Reply Last reply
              0
              • M Online
                M Online
                MCU
                wrote on last edited by
                #5207

                @smart81 Du musst doch nur noch Dein DP "0_userdata.0.Camera" in jarvis mit customHTML anzeigen lassen.

                NUC i7 64GB mit Proxmox ---- Jarvis Infos Aktualisierungen der Doku auf Instagram verfolgen -> mcuiobroker Instagram
                Wenn Euch mein Vorschlag geholfen hat, bitte rechts "^" klicken.

                S 1 Reply Last reply
                1
                • M MCU

                  @smart81 Du musst doch nur noch Dein DP "0_userdata.0.Camera" in jarvis mit customHTML anzeigen lassen.

                  S Offline
                  S Offline
                  Smart81
                  wrote on last edited by Smart81
                  #5208

                  @mcu

                  Oh !

                  Ok das hab ich mir komplizierter vorgestellt :)

                  Ich schau mal

                  edit: FUNKTIONIERT :)

                  Vielen Dank

                  1 Reply Last reply
                  0
                  • M Online
                    M Online
                    MCU
                    wrote on last edited by
                    #5209

                    @RkcCorian
                    Hier das Programm zur Analyse der DPs in v3

                    let devices = getState('jarvis.0.devices').val;
                    devices = JSON.parse(devices);
                    
                    let anz=0;
                    for (let key in devices){
                       let devicesArr = devices[key];
                       for (let key2 in devicesArr){
                           let devicesStates =devicesArr[key2].states;
                           for (let key3 in devicesStates){
                               if (existsState(devicesStates[key3].state)== false) {
                                   if (devicesStates[key3].state == undefined){
                                       log('Das Gerät '+ devicesArr[key2].name + ' ist mit dem DP '+ key3 + ' angelegt, hat aber keinen Datenpunkt (Anzeige)!')
                                   }else{
                                       log('ID ' + devicesStates[key3].state + ' im Gerät '+ devicesArr[key2].name +' nicht vorhanden Geräte-DP: '+ key3);
                                       if (getObject(devicesStates[key3].state)){
                                           log('ID ist vorhanden, hat aber einen NULL Wert in ioBroker');
                                       }
                                   }
                                   
                                   
                               }
                           
                           }
                       }
                    }
                    

                    NUC i7 64GB mit Proxmox ---- Jarvis Infos Aktualisierungen der Doku auf Instagram verfolgen -> mcuiobroker Instagram
                    Wenn Euch mein Vorschlag geholfen hat, bitte rechts "^" klicken.

                    R 1 Reply Last reply
                    1
                    • DiginixD Offline
                      DiginixD Offline
                      Diginix
                      wrote on last edited by
                      #5210

                      Hat schon mal jemand eine Animation mit 3 Icons gebaut?
                      Ich hätte gern eine Ladeanimation vom Akku mit diesen Icons:
                      188ef731-0c6d-4d22-a3a0-858f3797ca6a-image.png

                      Sollte sich bestimmt mit CSS/JSON bauen lassen.

                      ..:: So long! Tom ::..

                      NUC7i3 (Ubuntu Proxmox VM) | Echo Dots 2+3. Gen | Xiaomi Sensoren | Mi Robot 1S | Yeelight | Sonoff | Shelly | H801 RGB | Gosund SP1 | NodeMCU+ESP32 | Kostal Plenticore PV+BYD | openWB

                      M 2 Replies Last reply
                      0
                      • DiginixD Diginix

                        Hat schon mal jemand eine Animation mit 3 Icons gebaut?
                        Ich hätte gern eine Ladeanimation vom Akku mit diesen Icons:
                        188ef731-0c6d-4d22-a3a0-858f3797ca6a-image.png

                        Sollte sich bestimmt mit CSS/JSON bauen lassen.

                        M Online
                        M Online
                        MCU
                        wrote on last edited by
                        #5211

                        @diginix Was soll die Animation machen?

                        NUC i7 64GB mit Proxmox ---- Jarvis Infos Aktualisierungen der Doku auf Instagram verfolgen -> mcuiobroker Instagram
                        Wenn Euch mein Vorschlag geholfen hat, bitte rechts "^" klicken.

                        DiginixD 1 Reply Last reply
                        0
                        • M MCU

                          @diginix Was soll die Animation machen?

                          DiginixD Offline
                          DiginixD Offline
                          Diginix
                          wrote on last edited by Diginix
                          #5212

                          @mcu 3 Icons hintereinander anzeigen wie beim Smartphone wenn der Akku lädt. Erst das mit nur einem Balken, dann das mit 2, dann das mit 3 und wieder von vorn.
                          Sprich das Icon muss nach x Millisek gewechselt werden als loop.

                          Bisher färbe ich die Icons für Laden bzw. Entladen nur anhand der Leistung pro Datenpunkt
                          224f1687-64ab-4893-a334-5e66ef971889-image.png
                          Wenn Wert >0 dann grün und pulsierend mittels "animation":"fader 1.5s linear infinite"

                          ..:: So long! Tom ::..

                          NUC7i3 (Ubuntu Proxmox VM) | Echo Dots 2+3. Gen | Xiaomi Sensoren | Mi Robot 1S | Yeelight | Sonoff | Shelly | H801 RGB | Gosund SP1 | NodeMCU+ESP32 | Kostal Plenticore PV+BYD | openWB

                          S 1 Reply Last reply
                          0
                          • M MCU

                            @RkcCorian
                            Hier das Programm zur Analyse der DPs in v3

                            let devices = getState('jarvis.0.devices').val;
                            devices = JSON.parse(devices);
                            
                            let anz=0;
                            for (let key in devices){
                               let devicesArr = devices[key];
                               for (let key2 in devicesArr){
                                   let devicesStates =devicesArr[key2].states;
                                   for (let key3 in devicesStates){
                                       if (existsState(devicesStates[key3].state)== false) {
                                           if (devicesStates[key3].state == undefined){
                                               log('Das Gerät '+ devicesArr[key2].name + ' ist mit dem DP '+ key3 + ' angelegt, hat aber keinen Datenpunkt (Anzeige)!')
                                           }else{
                                               log('ID ' + devicesStates[key3].state + ' im Gerät '+ devicesArr[key2].name +' nicht vorhanden Geräte-DP: '+ key3);
                                               if (getObject(devicesStates[key3].state)){
                                                   log('ID ist vorhanden, hat aber einen NULL Wert in ioBroker');
                                               }
                                           }
                                           
                                           
                                       }
                                   
                                   }
                               }
                            }
                            

                            R Offline
                            R Offline
                            RkcCorian
                            wrote on last edited by
                            #5213

                            @mcu Dankeeeee!

                            1 Reply Last reply
                            0
                            • DiginixD Diginix

                              @mcu 3 Icons hintereinander anzeigen wie beim Smartphone wenn der Akku lädt. Erst das mit nur einem Balken, dann das mit 2, dann das mit 3 und wieder von vorn.
                              Sprich das Icon muss nach x Millisek gewechselt werden als loop.

                              Bisher färbe ich die Icons für Laden bzw. Entladen nur anhand der Leistung pro Datenpunkt
                              224f1687-64ab-4893-a334-5e66ef971889-image.png
                              Wenn Wert >0 dann grün und pulsierend mittels "animation":"fader 1.5s linear infinite"

                              S Offline
                              S Offline
                              Smart81
                              wrote on last edited by
                              #5214

                              @diginix

                              Grüß dich 🤗

                              Das pulsieren und einfärben machst du direkt über Jarvis? 🤔

                              SKBS DiginixD 2 Replies Last reply
                              0
                              • S Smart81

                                @diginix

                                Grüß dich 🤗

                                Das pulsieren und einfärben machst du direkt über Jarvis? 🤔

                                SKBS Offline
                                SKBS Offline
                                SKB
                                Developer Most Active
                                wrote on last edited by
                                #5215

                                @smart81 Genau. Geht im CSS Reiter. Gibt Beispiele weiter oben - für Farbe und blink.

                                ... wer nicht mit der Zeit geht, geht mit der Zeit ...

                                Aktuelle Entwicklung: Energiefluss - erweitert (https://forum.iobroker.net/topic/64734)

                                1 Reply Last reply
                                0
                                • S Smart81

                                  @diginix

                                  Grüß dich 🤗

                                  Das pulsieren und einfärben machst du direkt über Jarvis? 🤔

                                  DiginixD Offline
                                  DiginixD Offline
                                  Diginix
                                  wrote on last edited by
                                  #5216

                                  @smart81 Ja, einfärben auch animiert usw geht alles. Aber das Icon selbst lässt sich nur bei Werteänderung tauschen. Ich hätte aber gern das 3 Icons als Animation rotieren. So wie früher animierte GIFs.
                                  Man könnte sicher das Ansteigen der Akkufüllung mit CSS bauen, aber das ist Fummelarbeit. Daher war meine Frage ob man nicht über CSS keyframes 3 Icons infinit loopen lassen könnte.

                                  ..:: So long! Tom ::..

                                  NUC7i3 (Ubuntu Proxmox VM) | Echo Dots 2+3. Gen | Xiaomi Sensoren | Mi Robot 1S | Yeelight | Sonoff | Shelly | H801 RGB | Gosund SP1 | NodeMCU+ESP32 | Kostal Plenticore PV+BYD | openWB

                                  R 1 Reply Last reply
                                  0
                                  • DiginixD Diginix

                                    @smart81 Ja, einfärben auch animiert usw geht alles. Aber das Icon selbst lässt sich nur bei Werteänderung tauschen. Ich hätte aber gern das 3 Icons als Animation rotieren. So wie früher animierte GIFs.
                                    Man könnte sicher das Ansteigen der Akkufüllung mit CSS bauen, aber das ist Fummelarbeit. Daher war meine Frage ob man nicht über CSS keyframes 3 Icons infinit loopen lassen könnte.

                                    R Offline
                                    R Offline
                                    Renegade 0
                                    wrote on last edited by
                                    #5217

                                    Moin,
                                    da ich ja Jarvis auf einem Smart-Mirror anzeigen lasse, will ich den Bildschirm in schwarz haben und nur um die einzelnen Tabs einen Rand in der Farbe vom Dark theme.

                                    Kann mir da wer helfen bei den Styles?
                                    Die Leiste und die Tabs hab ich schon schwarz. Der Hintergrund (tabpanel) und die kleine Leiste rechts, wenn man die Topbar ausblendet fehlen mir noch.
                                    Und die Border.

                                    mfG
                                    Rene

                                    1 Reply Last reply
                                    0
                                    • M Online
                                      M Online
                                      MCU
                                      wrote on last edited by MCU
                                      #5218

                                      @renegade-0 Zeig mal bitte wie es jetzt schon aussieht.
                                      F12 -Elemente
                                      0ad52344-b6a0-44b1-b79f-a10f01114a37-image.png
                                      Falls es auch bei Dir die gleiche Klasse ist, dann

                                      .jss19{
                                        background-color:black;
                                      }
                                      

                                      0ebe05f5-5bc2-42da-a829-4787aa5fb2b9-image.png

                                      Fürs TabPanel:

                                      .jarvis-TabPanel{
                                        background-color: black;
                                      }
                                      

                                      NUC i7 64GB mit Proxmox ---- Jarvis Infos Aktualisierungen der Doku auf Instagram verfolgen -> mcuiobroker Instagram
                                      Wenn Euch mein Vorschlag geholfen hat, bitte rechts "^" klicken.

                                      R 1 Reply Last reply
                                      0
                                      • DiginixD Diginix

                                        Hat schon mal jemand eine Animation mit 3 Icons gebaut?
                                        Ich hätte gern eine Ladeanimation vom Akku mit diesen Icons:
                                        188ef731-0c6d-4d22-a3a0-858f3797ca6a-image.png

                                        Sollte sich bestimmt mit CSS/JSON bauen lassen.

                                        M Online
                                        M Online
                                        MCU
                                        wrote on last edited by MCU
                                        #5219

                                        @diginix Man holt sich die svg-URLs von iconify und setzt diese mit einer @keyframe-Animation zeitlich aneinander:

                                        Möchte man die Animation in einer anderen Farbe haben, so ersetzt man bei den 5 url die currentColor durch die Farbe, die man haben möchte: blue :

                                        fill%3D%22currentColor%22%20fill-rule
                                        
                                        ersetzen durch: blue
                                        
                                        fill%3D%22blue%22%20fill-rule
                                        

                                        .charge{
                                          color:transparent;
                                          animation: charging 3s infinite;
                                        }
                                        @keyframes charging{
                                          0% {
                                            background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2017%2017%22%3E%3Cpath%20d%3D%22M12.306%201h-1.307V.016H8V1H6.77C5.834%201%205%201.721%205%202.646v11.679C5%2015.249%205.834%2016%206.77%2016h5.536c.936%200%201.694-.751%201.694-1.675V2.646C14%201.721%2013.241%201%2012.306%201zM13%2014c0%20.516-.484%201-1%201H7c-.515%200-1.011-.484-1.011-1V3c0-.514.496-1.051%201.011-1.051h5c.516%200%201%20.536%201%201.051v11z%22%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E');
                                          }
                                          25%{
                                            background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2017%2016%22%3E%3Cg%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M7.062%2013.508c0%20.248.21.451.467.451h3.912c.255%200%20.559-.203.559-.451v-2.407l-4.938%202.056v.351z%22%2F%3E%3Cpath%20d%3D%22M12.252%201H11V.016H8.023V1H6.715c-.936%200-1.694.658-1.694%201.583v11.742c0%20.924.759%201.675%201.694%201.675h5.536c.936%200%201.694-.751%201.694-1.675V2.583C13.946%201.658%2013.188%201%2012.252%201zM13%2014c0%20.516-.484%201-1%201H7c-.515%200-1.064-.484-1.064-1V3c0-.514.55-1.051%201.064-1.051h5c.516%200%201%20.536%201%201.051v11z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
                                          } 
                                          50%{
                                            background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2017%2016%22%3E%3Cg%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M7.062%2013.472a.48.48%200%200%200%20.471.487h3.936a.48.48%200%200%200%20.47-.487V8.094l-4.876%202.065v3.313h-.001z%22%2F%3E%3Cpath%20d%3D%22M12.252%201H11V0H8.023v1H6.715c-.936%200-1.694.492-1.694%201.417v12.125c0%20.924.759%201.458%201.694%201.458h5.536c.936%200%201.748-.535%201.748-1.458V2.417C14%201.492%2013.188%201%2012.252%201zM13%2014c0%20.516-.484%201-1%201H7c-.515%200-1-.484-1-1V3c0-.514.485-1%201-1h5c.516%200%201%20.485%201%201v11z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
                                          }
                                          75%{
                                            background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2017%2016%22%3E%3Cg%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M7%2013.448c0%20.281.272.511.529.511h3.912c.255%200%20.559-.229.559-.511V5.069L7%208.281v5.167z%22%2F%3E%3Cpath%20d%3D%22M12.252%201H11V.016H8.023V1H6.715c-.936%200-1.694.575-1.694%201.5v11.825c0%20.924.759%201.675%201.694%201.675h5.536c.936%200%201.694-.751%201.694-1.675V2.5c.001-.925-.757-1.5-1.693-1.5zM13%2014c0%20.516-.484%201-1%201H7c-.515%200-1-.484-1-1V3c0-.514.485-1.051%201-1.051h5c.516%200%201%20.536%201%201.051v11z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
                                          }
                                          100% {
                                            background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M10.446%203H6.534C6.279%203%206%203.301%206%203.58v9.902c0%20.273.278.497.535.497h3.912c.254%200%20.553-.224.553-.497V3.58c0-.279-.297-.58-.554-.58z%22%2F%3E%3Cpath%20d%3D%22M11.306%201.021H9.999V.005H7v1.016H5.77c-.936%200-1.694.766-1.694%201.709v11.562c0%20.942.759%201.709%201.694%201.709h5.536c.936%200%201.694-.767%201.694-1.709V2.73c0-.944-.759-1.709-1.694-1.709zM12%2014c0%20.525-.494%201-1%201H6c-.506%200-1.011-.475-1.011-1V3c0-.523.505-1%201.011-1h5c.506%200%201%20.476%201%201v11z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
                                        }
                                        
                                        }
                                        

                                        css-charging-black-svg.gif

                                        css-charging-blue-svg.gif

                                        Anderes Beispiel:

                                        .charge{
                                          color:transparent;
                                          animation: charging 3s infinite;
                                        }
                                        @keyframes charging{
                                          0% {
                                            background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cg%20fill%3D%22%23CFD8DC%22%3E%3Cpath%20d%3D%22M34%2044H14c-1.1%200-2-.9-2-2V8c0-1.1.9-2%202-2h20c1.1%200%202%20.9%202%202v34c0%201.1-.9%202-2%202z%22%2F%3E%3Cpath%20d%3D%22M28%2013h-8c-.6%200-1-.4-1-1V5c0-.6.4-1%201-1h8c.6%200%201%20.4%201%201v7c0%20.6-.4%201-1%201z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
                                          }
                                          25%{
                                            background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cg%20fill%3D%22%23CFD8DC%22%3E%3Cpath%20d%3D%22M34%2044H14c-1.1%200-2-.9-2-2V8c0-1.1.9-2%202-2h20c1.1%200%202%20.9%202%202v34c0%201.1-.9%202-2%202z%22%2F%3E%3Cpath%20d%3D%22M28%2013h-8c-.6%200-1-.4-1-1V5c0-.6.4-1%201-1h8c.6%200%201%20.4%201%201v7c0%20.6-.4%201-1%201z%22%2F%3E%3C%2Fg%3E%3Cpath%20fill%3D%22%238BC34A%22%20d%3D%22M34%2044H14c-1.1%200-2-.9-2-2v-9h24v9c0%201.1-.9%202-2%202z%22%2F%3E%3C%2Fsvg%3E');
                                          } 
                                          50%{
                                            background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cg%20fill%3D%22%23CFD8DC%22%3E%3Cpath%20d%3D%22M34%2044H14c-1.1%200-2-.9-2-2V8c0-1.1.9-2%202-2h20c1.1%200%202%20.9%202%202v34c0%201.1-.9%202-2%202z%22%2F%3E%3Cpath%20d%3D%22M28%2013h-8c-.6%200-1-.4-1-1V5c0-.6.4-1%201-1h8c.6%200%201%20.4%201%201v7c0%20.6-.4%201-1%201z%22%2F%3E%3C%2Fg%3E%3Cpath%20fill%3D%22%238BC34A%22%20d%3D%22M34%2044H14c-1.1%200-2-.9-2-2V23h24v19c0%201.1-.9%202-2%202z%22%2F%3E%3C%2Fsvg%3E');
                                          }
                                          75%{
                                            background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cg%20fill%3D%22%23CFD8DC%22%3E%3Cpath%20d%3D%22M34%2044H14c-1.1%200-2-.9-2-2V8c0-1.1.9-2%202-2h20c1.1%200%202%20.9%202%202v34c0%201.1-.9%202-2%202z%22%2F%3E%3Cpath%20d%3D%22M28%2013h-8c-.6%200-1-.4-1-1V5c0-.6.4-1%201-1h8c.6%200%201%20.4%201%201v7c0%20.6-.4%201-1%201z%22%2F%3E%3C%2Fg%3E%3Cpath%20fill%3D%22%238BC34A%22%20d%3D%22M34%2044H14c-1.1%200-2-.9-2-2V13h24v29c0%201.1-.9%202-2%202z%22%2F%3E%3C%2Fsvg%3E');
                                          }
                                          100% {
                                            background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cg%20fill%3D%22%238BC34A%22%3E%3Cpath%20d%3D%22M34%2044H14c-1.1%200-2-.9-2-2V8c0-1.1.9-2%202-2h20c1.1%200%202%20.9%202%202v34c0%201.1-.9%202-2%202z%22%2F%3E%3Cpath%20d%3D%22M28%2013h-8c-.6%200-1-.4-1-1V5c0-.6.4-1%201-1h8c.6%200%201%20.4%201%201v7c0%20.6-.4%201-1%201z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
                                        }
                                         
                                        }
                                        

                                        css-charging-greenOther-svg.gif

                                        Oder der "running Man"

                                        .run{
                                          color:transparent;
                                          animation: running 3s infinite;
                                        }
                                        @keyframes running{
                                          0% {
                                            background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M13.5%205.5c1.1%200%202-.9%202-2s-.9-2-2-2s-2%20.9-2%202s.9%202%202%202zM9.8%208.9L7%2023h2.1l1.8-8l2.1%202v6h2v-7.5l-2.1-2l.6-3C14.8%2012%2016.8%2013%2019%2013v-2c-1.9%200-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1c-.3%200-.5.1-.8.1L6%208.3V13h2V9.6l1.8-.7%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
                                          }
                                          25%{
                                            background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M13.49%205.48c1.1%200%202-.9%202-2s-.9-2-2-2s-2%20.9-2%202s.9%202%202%202zm-3.6%2013.9l1-4.4l2.1%202v6h2v-7.5l-2.1-2l.6-3c1.3%201.5%203.3%202.5%205.5%202.5v-2c-1.9%200-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1c-.3%200-.5.1-.8.1l-5.2%202.2v4.7h2v-3.4l1.8-.7l-1.6%208.1l-4.9-1l-.4%202l7%201.4z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
                                          } 
                                          50%{
                                            background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M13.5%205.5c1.1%200%202-.9%202-2s-.9-2-2-2s-2%20.9-2%202s.9%202%202%202zM9.8%208.9L7%2023h2.1l1.8-8l2.1%202v6h2v-7.5l-2.1-2l.6-3C14.8%2012%2016.8%2013%2019%2013v-2c-1.9%200-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1c-.3%200-.5.1-.8.1L6%208.3V13h2V9.6l1.8-.7%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
                                          }
                                          75%{
                                            background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M13.49%205.48c1.1%200%202-.9%202-2s-.9-2-2-2s-2%20.9-2%202s.9%202%202%202zm-3.6%2013.9l1-4.4l2.1%202v6h2v-7.5l-2.1-2l.6-3c1.3%201.5%203.3%202.5%205.5%202.5v-2c-1.9%200-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1c-.3%200-.5.1-.8.1l-5.2%202.2v4.7h2v-3.4l1.8-.7l-1.6%208.1l-4.9-1l-.4%202l7%201.4z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
                                          }
                                          100% {
                                            background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M13.5%205.5c1.1%200%202-.9%202-2s-.9-2-2-2s-2%20.9-2%202s.9%202%202%202zM9.8%208.9L7%2023h2.1l1.8-8l2.1%202v6h2v-7.5l-2.1-2l.6-3C14.8%2012%2016.8%2013%2019%2013v-2c-1.9%200-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1c-.3%200-.5.1-.8.1L6%208.3V13h2V9.6l1.8-.7%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
                                           }
                                         
                                        }
                                        
                                        

                                        css-charging-black-svg-runningMan.gif

                                        Drehende Uhr

                                        .clockrunning{
                                          color:transparent;
                                          animation: turning 7s infinite;
                                        }
                                        
                                        @keyframes turning{
                                          0% {
                                            background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%201537%201537%22%3E%3Cpath%20d%3D%22M0%20770q0-209%20103.5-386.5T384%20103T769%200q156%200%20298%2061t245%20164t164%20245.5t61%20299.5q0%20156-61%20298.5t-164%20245t-245%20163t-298%2060.5q-157%200-299.5-61T224%201312T60.5%201067.5T0%20770zm169%200q0%20243%20177%20422q177%20177%20423%20177q162%200%20300-80.5t219-218.5t81-300t-81-300.5t-219-219T769%20170t-300%2080.5t-219%20219T169%20770zm541%200q0%2023%2016.5%2040t40.5%2017q23%200%2040-17t17-40V315q0-24-17-40.5T767%20258q-24%200-40.5%2016.5T710%20315v455z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
                                          }
                                          9%{
                                            background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%201537%201537%22%3E%3Cpath%20d%3D%22M0%20770q0-209%20103.5-386.5T384%20103T769%200q156%200%20298%2061t245%20164t164%20245.5t61%20299.5q0%20156-61%20298.5t-164%20245t-245%20163t-298%2060.5q-157%200-299.5-61T224%201312T60.5%201067.5T0%20770zm169%200q0%20243%20177%20422q177%20177%20423%20177q162%200%20300-80.5t219-218.5t81-300t-81-300.5t-219-219T769%20170t-300%2080.5t-219%20219T169%20770zm541%200V315q0-24%2016.5-40.5T767%20258q23%200%2040%2016.5t17%2040.5v241l51-89q12-20%2035.5-26t43.5%206q20%2011%2026.5%2034t-5.5%2043L819%20791q-13%2036-52%2036q-24%200-40.5-16.5T710%20770z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
                                          } 
                                          18%{
                                            background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%201537%201537%22%3E%3Cpath%20d%3D%22M0%20770q0-209%20103.5-386.5T384%20103T769%200q156%200%20298%2061t245%20164t164%20245.5t61%20299.5q0%20156-61%20298.5t-164%20245t-245%20163t-298%2060.5q-157%200-299.5-61T224%201312T60.5%201067.5T0%20770zm169%200q0%20243%20177%20422q177%20177%20423%20177q162%200%20300-80.5t219-218.5t81-300t-81-300.5t-219-219T769%20170t-300%2080.5t-219%20219T169%20770zm541%200V315q0-24%2016.5-40.5T767%20258t40.5%2016.5T824%20315v356l190-107q20-12%2043-6t34%2028q12%2020%205.5%2043t-26.5%2035L805%20812q-17%2015-38%2015q-24%200-40.5-16.5T710%20770z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
                                          }
                                          27%{
                                            background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%201537%201537%22%3E%3Cpath%20d%3D%22M0%20770q0-209%20103.5-386.5T384%20103T769%200q156%200%20298%2061t245%20164t164%20245.5t61%20299.5q0%20156-61%20298.5t-164%20245t-245%20163t-298%2060.5q-157%200-299.5-61T224%201312T60.5%201067.5T0%20770zm169%200q0%20243%20177%20422q177%20177%20423%20177q162%200%20300-80.5t219-218.5t81-300t-81-300.5t-219-219T769%20170t-300%2080.5t-219%20219T169%20770zm541%200V315q0-24%2016.5-40.5T767%20258t40.5%2016.5T824%20315v397h258q24%200%2040.5%2016.5T1139%20769q0%2023-16.5%2040t-40.5%2017H779q-3%201-12%201q-24%200-40.5-16.5T710%20770z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
                                          }
                                          36%{
                                            background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%201537%201537%22%3E%3Cpath%20d%3D%22M0%20770q0-209%20103.5-386.5T384%20103T769%200q156%200%20298%2061t245%20164t164%20245.5t61%20299.5q0%20156-61%20298.5t-164%20245t-245%20163t-298%2060.5q-157%200-299.5-61T224%201312T60.5%201067.5T0%20770zm169%200q0%20243%20177%20422q177%20177%20423%20177q162%200%20300-80.5t219-218.5t81-300t-81-300.5t-219-219T769%20170t-300%2080.5t-219%20219T169%20770zm541%200V315q0-24%2016.5-40.5T767%20258t40.5%2016.5T824%20315v420l245%20143q20%2012%2026%2034.5t-6%2042.5q-16%2029-49%2029q-17%200-29-8L750%20824q-17-5-28.5-20T710%20770z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
                                          }
                                          45%{
                                            background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%201537%201537%22%3E%3Cpath%20d%3D%22M0%20770q0-209%20103.5-386.5T384%20103T769%200q156%200%20298%2061t245%20164t164%20245.5t61%20299.5q0%20156-61%20298.5t-164%20245t-245%20163t-298%2060.5q-157%200-299.5-61T224%201312T60.5%201067.5T0%20770zm169%200q0%20243%20177%20422q177%20177%20423%20177q162%200%20300-80.5t219-218.5t81-300t-81-300.5t-219-219T769%20170t-300%2080.5t-219%20219T169%20770zm541%200V315q0-24%2016.5-40.5T767%20258t40.5%2016.5T824%20315v438l147%20262q12%2022%205.5%2044.5T950%201094q-11%206-28%206q-34%200-50-28L722%20806q-12-15-12-36z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
                                          }
                                          54% {
                                            background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%201537%201537%22%3E%3Cpath%20d%3D%22M0%20770q0-209%20103.5-386.5T384%20103T769%200q156%200%20298%2061t245%20164t164%20245.5t61%20299.5q0%20156-61%20298.5t-164%20245t-245%20163t-298%2060.5q-157%200-299.5-61T224%201312T60.5%201067.5T0%20770zm169%200q0%20243%20177%20422q177%20177%20423%20177q162%200%20300-80.5t219-218.5t81-300t-81-300.5t-219-219T769%20170t-300%2080.5t-219%20219T169%20770zm541%20314V315q0-24%2016.5-40.5T767%20258t40.5%2016.5T824%20315v769q0%2024-16.5%2041t-40.5%2017t-40.5-17t-16.5-41z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
                                        }
                                        63% {
                                            background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%201537%201537%22%3E%3Cpath%20d%3D%22M0%20770q0-209%20103.5-386.5T384%20103T769%200q156%200%20298%2061t245%20164t164%20245.5t61%20299.5q0%20156-61%20298.5t-164%20245t-245%20163t-298%2060.5q-157%200-299.5-61T224%201312T60.5%201067.5T0%20770zm169%200q0%20243%20177%20422q177%20177%20423%20177q162%200%20300-80.5t219-218.5t81-300t-81-300.5t-219-219T769%20170t-300%2080.5t-219%20219T169%20770zm387.5%20289.5Q550%201037%20562%201015l148-262V315q0-24%2016.5-40.5T767%20258t40.5%2016.5T824%20315v455q0%2020-13%2036l-149%20266q-16%2028-51%2028q-16%200-27-6q-21-12-27.5-34.5z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
                                        }
                                        72% {
                                            background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%201537%201537%22%3E%3Cpath%20d%3D%22M0%20770q0-209%20103.5-386.5T384%20103T769%200q156%200%20298%2061t245%20164t164%20245.5t61%20299.5q0%20156-61%20298.5t-164%20245t-245%20163t-298%2060.5q-157%200-299.5-61T224%201312T60.5%201067.5T0%20770zm169%200q0%20243%20177%20422q177%20177%20423%20177q162%200%20300-80.5t219-218.5t81-300t-81-300.5t-219-219T769%20170t-300%2080.5t-219%20219T169%20770zm270%20142.5q6-22.5%2026-34.5l245-143V315q0-24%2016.5-40.5T767%20258t40.5%2016.5T824%20315v455q0%2019-11.5%2034T784%20824L522%20976q-12%208-28%208q-33%200-49-29q-12-20-6-42.5z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
                                        }
                                        81% {
                                            background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%201537%201537%22%3E%3Cpath%20d%3D%22M0%20770q0-209%20103.5-386.5T384%20103T769%200q156%200%20298%2061t245%20164t164%20245.5t61%20299.5q0%20156-61%20298.5t-164%20245t-245%20163t-298%2060.5q-157%200-299.5-61T224%201312T60.5%201067.5T0%20770zm169%200q0%20243%20177%20422q177%20177%20423%20177q162%200%20300-80.5t219-218.5t81-300t-81-300.5t-219-219T769%20170t-300%2080.5t-219%20219T169%20770zm225-1q0-24%2016.5-40.5T451%20712h259V315q0-24%2016.5-40.5T767%20258t40.5%2016.5T824%20315v455q0%2024-16.5%2040.5T767%20827q-10%200-13-1H451q-24%200-40.5-17T394%20769z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
                                        }
                                        90% {
                                            background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%201537%201537%22%3E%3Cpath%20d%3D%22M0%20770q0-209%20103.5-386.5T384%20103T769%200q156%200%20298%2061t245%20164t164%20245.5t61%20299.5q0%20156-61%20298.5t-164%20245t-245%20163t-298%2060.5q-157%200-299.5-61T224%201312T60.5%201067.5T0%20770zm169%200q0%20243%20177%20422q177%20177%20423%20177q162%200%20300-80.5t219-218.5t81-300t-81-300.5t-219-219T769%20170t-300%2080.5t-219%20219T169%20770zm268-141q-7-23%205-43q11-20%2034.5-27t43.5%205l190%20107V315q0-24%2016.5-40.5T767%20258t40.5%2016.5T824%20315v455q0%2024-16.5%2040.5T767%20827q-21%200-38-15L464%20664q-20-12-27-35z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
                                        }
                                        100% {
                                            background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%201537%201537%22%3E%3Cpath%20d%3D%22M0%20770q0-209%20103.5-386.5T384%20103T769%200q156%200%20298%2061t245%20164t164%20245.5t61%20299.5q0%20156-61%20298.5t-164%20245t-245%20163t-298%2060.5q-157%200-299.5-61T224%201312T60.5%201067.5T0%20770zm169%200q0%20243%20177%20422q177%20177%20423%20177q162%200%20300-80.5t219-218.5t81-300t-81-300.5t-219-219T769%20170t-300%2080.5t-219%20219T169%20770zm384-289q6-23%2026-34q20-12%2043.5-6t34.5%2026l53%2089V315q0-24%2016.5-40.5T767%20258t40.5%2016.5T824%20315v455q0%2024-16.5%2040.5T767%20827q-41%200-54-36L559%20524q-12-20-6-43z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
                                        }
                                         
                                        }
                                        

                                        css-drehende-Uhr-svg.gif

                                        Rainbowing Icons

                                        .rainbowing{
                                         /*color:transparent;*/
                                         animation: rainbow 4s infinite;
                                        }
                                        
                                        @keyframes rainbow{
                                           	100%,0%{
                                           		color: rgb(255,0,0);
                                           	}
                                           	8%{
                                           		color: rgb(255,127,0);
                                           	}
                                           	16%{
                                           		color: rgb(255,255,0);
                                           	}
                                           	25%{
                                           		color: rgb(127,255,0);
                                           	}
                                           	33%{
                                           		color: rgb(0,255,0);
                                           	}
                                           	41%{
                                           		color: rgb(0,255,127);
                                           	}
                                           	50%{
                                           		color: rgb(0,255,255);
                                           	}
                                           	58%{
                                           		color: rgb(0,127,255);
                                           	}
                                           	66%{
                                           		color: rgb(0,0,255);
                                           	}
                                           	75%{
                                           		color: rgb(127,0,255);
                                           	}
                                           	83%{
                                           		color: rgb(255,0,255);
                                           	}
                                           	91%{
                                           		color: rgb(255,0,127);
                                           	}
                                        }
                                        
                                        

                                        css-rainbowing-icon.gif

                                        Lime Loading Battery

                                        .charge{
                                         color:transparent;
                                         animation: charging 4s infinite;
                                        }
                                        @keyframes charging{
                                         0% {
                                            background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%221em%22%20height%3D%221em%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M16%2020H8V6h8m.67-2H15V2H9v2H7.33A1.33%201.33%200%200%200%206%205.33v15.34C6%2021.4%206.6%2022%207.33%2022h9.34A1.33%201.33%200%200%200%2018%2020.67V5.33C18%204.6%2017.4%204%2016.67%204z%22%20fill%3D%22lime%22%2F%3E%3C%2Fsvg%3E') no-repeat center center / contain;
                                            }
                                         33% {
                                           background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%221em%22%20height%3D%221em%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M16%2020H8V6h8m.67-2H15V2H9v2H7.33C6.6%204%206%204.6%206%205.33v15.34C6%2021.4%206.6%2022%207.33%2022h9.34c.74%200%201.33-.59%201.33-1.33V5.33C18%204.6%2017.4%204%2016.67%204M15%2016H9v3h6v-3%22%20fill%3D%22lime%22%2F%3E%3C%2Fsvg%3E') no-repeat center center / contain;
                                         } 
                                         66%{
                                           background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%221em%22%20height%3D%221em%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M16%2020H8V6h8m.67-2H15V2H9v2H7.33C6.6%204%206%204.6%206%205.33v15.34C6%2021.4%206.6%2022%207.33%2022h9.34c.74%200%201.33-.59%201.33-1.33V5.33C18%204.6%2017.4%204%2016.67%204M15%2016H9v3h6v-3m0-4.5H9v3h6v-3z%22%20fill%3D%22lime%22%2F%3E%3C%2Fsvg%3E') no-repeat center center / contain;
                                         }  
                                         100% {
                                           background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%221em%22%20height%3D%221em%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M16%2020H8V6h8m.67-2H15V2H9v2H7.33C6.6%204%206%204.6%206%205.33v15.34C6%2021.4%206.6%2022%207.33%2022h9.34c.74%200%201.33-.59%201.33-1.33V5.33C18%204.6%2017.4%204%2016.67%204M15%2016H9v3h6v-3m0-9H9v3h6V7m0%204.5H9v3h6v-3z%22%20fill%3D%22lime%22%2F%3E%3C%2Fsvg%3E') no-repeat center center / contain;
                                        }
                                        

                                        css-batteryLoad-svg-lime.gif

                                        Red discharge Battery

                                        .discharge{
                                         color:transparent;
                                         animation: discharging 4s infinite;
                                        }
                                        
                                        
                                        
                                        @keyframes discharging{
                                         100% {
                                            background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%221em%22%20height%3D%221em%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M16%2020H8V6h8m.67-2H15V2H9v2H7.33A1.33%201.33%200%200%200%206%205.33v15.34C6%2021.4%206.6%2022%207.33%2022h9.34A1.33%201.33%200%200%200%2018%2020.67V5.33C18%204.6%2017.4%204%2016.67%204z%22%20fill%3D%22red%22%2F%3E%3C%2Fsvg%3E') no-repeat center center / contain;
                                            }
                                         66% {
                                           background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%221em%22%20height%3D%221em%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M16%2020H8V6h8m.67-2H15V2H9v2H7.33C6.6%204%206%204.6%206%205.33v15.34C6%2021.4%206.6%2022%207.33%2022h9.34c.74%200%201.33-.59%201.33-1.33V5.33C18%204.6%2017.4%204%2016.67%204M15%2016H9v3h6v-3%22%20fill%3D%22red%22%2F%3E%3C%2Fsvg%3E') no-repeat center center / contain;
                                         } 
                                         33%{
                                           background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%221em%22%20height%3D%221em%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M16%2020H8V6h8m.67-2H15V2H9v2H7.33C6.6%204%206%204.6%206%205.33v15.34C6%2021.4%206.6%2022%207.33%2022h9.34c.74%200%201.33-.59%201.33-1.33V5.33C18%204.6%2017.4%204%2016.67%204M15%2016H9v3h6v-3m0-4.5H9v3h6v-3z%22%20fill%3D%22red%22%2F%3E%3C%2Fsvg%3E') no-repeat center center / contain;
                                         }  
                                         0% {
                                           background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%221em%22%20height%3D%221em%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M16%2020H8V6h8m.67-2H15V2H9v2H7.33C6.6%204%206%204.6%206%205.33v15.34C6%2021.4%206.6%2022%207.33%2022h9.34c.74%200%201.33-.59%201.33-1.33V5.33C18%204.6%2017.4%204%2016.67%204M15%2016H9v3h6v-3m0-9H9v3h6V7m0%204.5H9v3h6v-3z%22%20fill%3D%22red%22%2F%3E%3C%2Fsvg%3E') no-repeat center center / contain;
                                        }
                                        
                                        

                                        css-batterydecharge-svg-red.gif

                                        NUC i7 64GB mit Proxmox ---- Jarvis Infos Aktualisierungen der Doku auf Instagram verfolgen -> mcuiobroker Instagram
                                        Wenn Euch mein Vorschlag geholfen hat, bitte rechts "^" klicken.

                                        DiginixD 1 Reply Last reply
                                        2
                                        • M MCU

                                          @diginix Man holt sich die svg-URLs von iconify und setzt diese mit einer @keyframe-Animation zeitlich aneinander:

                                          Möchte man die Animation in einer anderen Farbe haben, so ersetzt man bei den 5 url die currentColor durch die Farbe, die man haben möchte: blue :

                                          fill%3D%22currentColor%22%20fill-rule
                                          
                                          ersetzen durch: blue
                                          
                                          fill%3D%22blue%22%20fill-rule
                                          

                                          .charge{
                                            color:transparent;
                                            animation: charging 3s infinite;
                                          }
                                          @keyframes charging{
                                            0% {
                                              background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2017%2017%22%3E%3Cpath%20d%3D%22M12.306%201h-1.307V.016H8V1H6.77C5.834%201%205%201.721%205%202.646v11.679C5%2015.249%205.834%2016%206.77%2016h5.536c.936%200%201.694-.751%201.694-1.675V2.646C14%201.721%2013.241%201%2012.306%201zM13%2014c0%20.516-.484%201-1%201H7c-.515%200-1.011-.484-1.011-1V3c0-.514.496-1.051%201.011-1.051h5c.516%200%201%20.536%201%201.051v11z%22%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E');
                                            }
                                            25%{
                                              background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2017%2016%22%3E%3Cg%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M7.062%2013.508c0%20.248.21.451.467.451h3.912c.255%200%20.559-.203.559-.451v-2.407l-4.938%202.056v.351z%22%2F%3E%3Cpath%20d%3D%22M12.252%201H11V.016H8.023V1H6.715c-.936%200-1.694.658-1.694%201.583v11.742c0%20.924.759%201.675%201.694%201.675h5.536c.936%200%201.694-.751%201.694-1.675V2.583C13.946%201.658%2013.188%201%2012.252%201zM13%2014c0%20.516-.484%201-1%201H7c-.515%200-1.064-.484-1.064-1V3c0-.514.55-1.051%201.064-1.051h5c.516%200%201%20.536%201%201.051v11z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
                                            } 
                                            50%{
                                              background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2017%2016%22%3E%3Cg%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M7.062%2013.472a.48.48%200%200%200%20.471.487h3.936a.48.48%200%200%200%20.47-.487V8.094l-4.876%202.065v3.313h-.001z%22%2F%3E%3Cpath%20d%3D%22M12.252%201H11V0H8.023v1H6.715c-.936%200-1.694.492-1.694%201.417v12.125c0%20.924.759%201.458%201.694%201.458h5.536c.936%200%201.748-.535%201.748-1.458V2.417C14%201.492%2013.188%201%2012.252%201zM13%2014c0%20.516-.484%201-1%201H7c-.515%200-1-.484-1-1V3c0-.514.485-1%201-1h5c.516%200%201%20.485%201%201v11z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
                                            }
                                            75%{
                                              background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2017%2016%22%3E%3Cg%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M7%2013.448c0%20.281.272.511.529.511h3.912c.255%200%20.559-.229.559-.511V5.069L7%208.281v5.167z%22%2F%3E%3Cpath%20d%3D%22M12.252%201H11V.016H8.023V1H6.715c-.936%200-1.694.575-1.694%201.5v11.825c0%20.924.759%201.675%201.694%201.675h5.536c.936%200%201.694-.751%201.694-1.675V2.5c.001-.925-.757-1.5-1.693-1.5zM13%2014c0%20.516-.484%201-1%201H7c-.515%200-1-.484-1-1V3c0-.514.485-1.051%201-1.051h5c.516%200%201%20.536%201%201.051v11z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
                                            }
                                            100% {
                                              background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2016%2016%22%3E%3Cg%20fill%3D%22currentColor%22%20fill-rule%3D%22evenodd%22%3E%3Cpath%20d%3D%22M10.446%203H6.534C6.279%203%206%203.301%206%203.58v9.902c0%20.273.278.497.535.497h3.912c.254%200%20.553-.224.553-.497V3.58c0-.279-.297-.58-.554-.58z%22%2F%3E%3Cpath%20d%3D%22M11.306%201.021H9.999V.005H7v1.016H5.77c-.936%200-1.694.766-1.694%201.709v11.562c0%20.942.759%201.709%201.694%201.709h5.536c.936%200%201.694-.767%201.694-1.709V2.73c0-.944-.759-1.709-1.694-1.709zM12%2014c0%20.525-.494%201-1%201H6c-.506%200-1.011-.475-1.011-1V3c0-.523.505-1%201.011-1h5c.506%200%201%20.476%201%201v11z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
                                          }
                                          
                                          }
                                          

                                          css-charging-black-svg.gif

                                          css-charging-blue-svg.gif

                                          Anderes Beispiel:

                                          .charge{
                                            color:transparent;
                                            animation: charging 3s infinite;
                                          }
                                          @keyframes charging{
                                            0% {
                                              background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cg%20fill%3D%22%23CFD8DC%22%3E%3Cpath%20d%3D%22M34%2044H14c-1.1%200-2-.9-2-2V8c0-1.1.9-2%202-2h20c1.1%200%202%20.9%202%202v34c0%201.1-.9%202-2%202z%22%2F%3E%3Cpath%20d%3D%22M28%2013h-8c-.6%200-1-.4-1-1V5c0-.6.4-1%201-1h8c.6%200%201%20.4%201%201v7c0%20.6-.4%201-1%201z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
                                            }
                                            25%{
                                              background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cg%20fill%3D%22%23CFD8DC%22%3E%3Cpath%20d%3D%22M34%2044H14c-1.1%200-2-.9-2-2V8c0-1.1.9-2%202-2h20c1.1%200%202%20.9%202%202v34c0%201.1-.9%202-2%202z%22%2F%3E%3Cpath%20d%3D%22M28%2013h-8c-.6%200-1-.4-1-1V5c0-.6.4-1%201-1h8c.6%200%201%20.4%201%201v7c0%20.6-.4%201-1%201z%22%2F%3E%3C%2Fg%3E%3Cpath%20fill%3D%22%238BC34A%22%20d%3D%22M34%2044H14c-1.1%200-2-.9-2-2v-9h24v9c0%201.1-.9%202-2%202z%22%2F%3E%3C%2Fsvg%3E');
                                            } 
                                            50%{
                                              background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cg%20fill%3D%22%23CFD8DC%22%3E%3Cpath%20d%3D%22M34%2044H14c-1.1%200-2-.9-2-2V8c0-1.1.9-2%202-2h20c1.1%200%202%20.9%202%202v34c0%201.1-.9%202-2%202z%22%2F%3E%3Cpath%20d%3D%22M28%2013h-8c-.6%200-1-.4-1-1V5c0-.6.4-1%201-1h8c.6%200%201%20.4%201%201v7c0%20.6-.4%201-1%201z%22%2F%3E%3C%2Fg%3E%3Cpath%20fill%3D%22%238BC34A%22%20d%3D%22M34%2044H14c-1.1%200-2-.9-2-2V23h24v19c0%201.1-.9%202-2%202z%22%2F%3E%3C%2Fsvg%3E');
                                            }
                                            75%{
                                              background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cg%20fill%3D%22%23CFD8DC%22%3E%3Cpath%20d%3D%22M34%2044H14c-1.1%200-2-.9-2-2V8c0-1.1.9-2%202-2h20c1.1%200%202%20.9%202%202v34c0%201.1-.9%202-2%202z%22%2F%3E%3Cpath%20d%3D%22M28%2013h-8c-.6%200-1-.4-1-1V5c0-.6.4-1%201-1h8c.6%200%201%20.4%201%201v7c0%20.6-.4%201-1%201z%22%2F%3E%3C%2Fg%3E%3Cpath%20fill%3D%22%238BC34A%22%20d%3D%22M34%2044H14c-1.1%200-2-.9-2-2V13h24v29c0%201.1-.9%202-2%202z%22%2F%3E%3C%2Fsvg%3E');
                                            }
                                            100% {
                                              background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2048%2048%22%3E%3Cg%20fill%3D%22%238BC34A%22%3E%3Cpath%20d%3D%22M34%2044H14c-1.1%200-2-.9-2-2V8c0-1.1.9-2%202-2h20c1.1%200%202%20.9%202%202v34c0%201.1-.9%202-2%202z%22%2F%3E%3Cpath%20d%3D%22M28%2013h-8c-.6%200-1-.4-1-1V5c0-.6.4-1%201-1h8c.6%200%201%20.4%201%201v7c0%20.6-.4%201-1%201z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
                                          }
                                           
                                          }
                                          

                                          css-charging-greenOther-svg.gif

                                          Oder der "running Man"

                                          .run{
                                            color:transparent;
                                            animation: running 3s infinite;
                                          }
                                          @keyframes running{
                                            0% {
                                              background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M13.5%205.5c1.1%200%202-.9%202-2s-.9-2-2-2s-2%20.9-2%202s.9%202%202%202zM9.8%208.9L7%2023h2.1l1.8-8l2.1%202v6h2v-7.5l-2.1-2l.6-3C14.8%2012%2016.8%2013%2019%2013v-2c-1.9%200-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1c-.3%200-.5.1-.8.1L6%208.3V13h2V9.6l1.8-.7%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
                                            }
                                            25%{
                                              background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M13.49%205.48c1.1%200%202-.9%202-2s-.9-2-2-2s-2%20.9-2%202s.9%202%202%202zm-3.6%2013.9l1-4.4l2.1%202v6h2v-7.5l-2.1-2l.6-3c1.3%201.5%203.3%202.5%205.5%202.5v-2c-1.9%200-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1c-.3%200-.5.1-.8.1l-5.2%202.2v4.7h2v-3.4l1.8-.7l-1.6%208.1l-4.9-1l-.4%202l7%201.4z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
                                            } 
                                            50%{
                                              background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M13.5%205.5c1.1%200%202-.9%202-2s-.9-2-2-2s-2%20.9-2%202s.9%202%202%202zM9.8%208.9L7%2023h2.1l1.8-8l2.1%202v6h2v-7.5l-2.1-2l.6-3C14.8%2012%2016.8%2013%2019%2013v-2c-1.9%200-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1c-.3%200-.5.1-.8.1L6%208.3V13h2V9.6l1.8-.7%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
                                            }
                                            75%{
                                              background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M13.49%205.48c1.1%200%202-.9%202-2s-.9-2-2-2s-2%20.9-2%202s.9%202%202%202zm-3.6%2013.9l1-4.4l2.1%202v6h2v-7.5l-2.1-2l.6-3c1.3%201.5%203.3%202.5%205.5%202.5v-2c-1.9%200-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1c-.3%200-.5.1-.8.1l-5.2%202.2v4.7h2v-3.4l1.8-.7l-1.6%208.1l-4.9-1l-.4%202l7%201.4z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
                                            }
                                            100% {
                                              background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M13.5%205.5c1.1%200%202-.9%202-2s-.9-2-2-2s-2%20.9-2%202s.9%202%202%202zM9.8%208.9L7%2023h2.1l1.8-8l2.1%202v6h2v-7.5l-2.1-2l.6-3C14.8%2012%2016.8%2013%2019%2013v-2c-1.9%200-3.5-1-4.3-2.4l-1-1.6c-.4-.6-1-1-1.7-1c-.3%200-.5.1-.8.1L6%208.3V13h2V9.6l1.8-.7%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
                                             }
                                           
                                          }
                                          
                                          

                                          css-charging-black-svg-runningMan.gif

                                          Drehende Uhr

                                          .clockrunning{
                                            color:transparent;
                                            animation: turning 7s infinite;
                                          }
                                          
                                          @keyframes turning{
                                            0% {
                                              background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%201537%201537%22%3E%3Cpath%20d%3D%22M0%20770q0-209%20103.5-386.5T384%20103T769%200q156%200%20298%2061t245%20164t164%20245.5t61%20299.5q0%20156-61%20298.5t-164%20245t-245%20163t-298%2060.5q-157%200-299.5-61T224%201312T60.5%201067.5T0%20770zm169%200q0%20243%20177%20422q177%20177%20423%20177q162%200%20300-80.5t219-218.5t81-300t-81-300.5t-219-219T769%20170t-300%2080.5t-219%20219T169%20770zm541%200q0%2023%2016.5%2040t40.5%2017q23%200%2040-17t17-40V315q0-24-17-40.5T767%20258q-24%200-40.5%2016.5T710%20315v455z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
                                            }
                                            9%{
                                              background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%201537%201537%22%3E%3Cpath%20d%3D%22M0%20770q0-209%20103.5-386.5T384%20103T769%200q156%200%20298%2061t245%20164t164%20245.5t61%20299.5q0%20156-61%20298.5t-164%20245t-245%20163t-298%2060.5q-157%200-299.5-61T224%201312T60.5%201067.5T0%20770zm169%200q0%20243%20177%20422q177%20177%20423%20177q162%200%20300-80.5t219-218.5t81-300t-81-300.5t-219-219T769%20170t-300%2080.5t-219%20219T169%20770zm541%200V315q0-24%2016.5-40.5T767%20258q23%200%2040%2016.5t17%2040.5v241l51-89q12-20%2035.5-26t43.5%206q20%2011%2026.5%2034t-5.5%2043L819%20791q-13%2036-52%2036q-24%200-40.5-16.5T710%20770z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
                                            } 
                                            18%{
                                              background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%201537%201537%22%3E%3Cpath%20d%3D%22M0%20770q0-209%20103.5-386.5T384%20103T769%200q156%200%20298%2061t245%20164t164%20245.5t61%20299.5q0%20156-61%20298.5t-164%20245t-245%20163t-298%2060.5q-157%200-299.5-61T224%201312T60.5%201067.5T0%20770zm169%200q0%20243%20177%20422q177%20177%20423%20177q162%200%20300-80.5t219-218.5t81-300t-81-300.5t-219-219T769%20170t-300%2080.5t-219%20219T169%20770zm541%200V315q0-24%2016.5-40.5T767%20258t40.5%2016.5T824%20315v356l190-107q20-12%2043-6t34%2028q12%2020%205.5%2043t-26.5%2035L805%20812q-17%2015-38%2015q-24%200-40.5-16.5T710%20770z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
                                            }
                                            27%{
                                              background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%201537%201537%22%3E%3Cpath%20d%3D%22M0%20770q0-209%20103.5-386.5T384%20103T769%200q156%200%20298%2061t245%20164t164%20245.5t61%20299.5q0%20156-61%20298.5t-164%20245t-245%20163t-298%2060.5q-157%200-299.5-61T224%201312T60.5%201067.5T0%20770zm169%200q0%20243%20177%20422q177%20177%20423%20177q162%200%20300-80.5t219-218.5t81-300t-81-300.5t-219-219T769%20170t-300%2080.5t-219%20219T169%20770zm541%200V315q0-24%2016.5-40.5T767%20258t40.5%2016.5T824%20315v397h258q24%200%2040.5%2016.5T1139%20769q0%2023-16.5%2040t-40.5%2017H779q-3%201-12%201q-24%200-40.5-16.5T710%20770z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
                                            }
                                            36%{
                                              background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%201537%201537%22%3E%3Cpath%20d%3D%22M0%20770q0-209%20103.5-386.5T384%20103T769%200q156%200%20298%2061t245%20164t164%20245.5t61%20299.5q0%20156-61%20298.5t-164%20245t-245%20163t-298%2060.5q-157%200-299.5-61T224%201312T60.5%201067.5T0%20770zm169%200q0%20243%20177%20422q177%20177%20423%20177q162%200%20300-80.5t219-218.5t81-300t-81-300.5t-219-219T769%20170t-300%2080.5t-219%20219T169%20770zm541%200V315q0-24%2016.5-40.5T767%20258t40.5%2016.5T824%20315v420l245%20143q20%2012%2026%2034.5t-6%2042.5q-16%2029-49%2029q-17%200-29-8L750%20824q-17-5-28.5-20T710%20770z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
                                            }
                                            45%{
                                              background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%201537%201537%22%3E%3Cpath%20d%3D%22M0%20770q0-209%20103.5-386.5T384%20103T769%200q156%200%20298%2061t245%20164t164%20245.5t61%20299.5q0%20156-61%20298.5t-164%20245t-245%20163t-298%2060.5q-157%200-299.5-61T224%201312T60.5%201067.5T0%20770zm169%200q0%20243%20177%20422q177%20177%20423%20177q162%200%20300-80.5t219-218.5t81-300t-81-300.5t-219-219T769%20170t-300%2080.5t-219%20219T169%20770zm541%200V315q0-24%2016.5-40.5T767%20258t40.5%2016.5T824%20315v438l147%20262q12%2022%205.5%2044.5T950%201094q-11%206-28%206q-34%200-50-28L722%20806q-12-15-12-36z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
                                            }
                                            54% {
                                              background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%201537%201537%22%3E%3Cpath%20d%3D%22M0%20770q0-209%20103.5-386.5T384%20103T769%200q156%200%20298%2061t245%20164t164%20245.5t61%20299.5q0%20156-61%20298.5t-164%20245t-245%20163t-298%2060.5q-157%200-299.5-61T224%201312T60.5%201067.5T0%20770zm169%200q0%20243%20177%20422q177%20177%20423%20177q162%200%20300-80.5t219-218.5t81-300t-81-300.5t-219-219T769%20170t-300%2080.5t-219%20219T169%20770zm541%20314V315q0-24%2016.5-40.5T767%20258t40.5%2016.5T824%20315v769q0%2024-16.5%2041t-40.5%2017t-40.5-17t-16.5-41z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
                                          }
                                          63% {
                                              background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%201537%201537%22%3E%3Cpath%20d%3D%22M0%20770q0-209%20103.5-386.5T384%20103T769%200q156%200%20298%2061t245%20164t164%20245.5t61%20299.5q0%20156-61%20298.5t-164%20245t-245%20163t-298%2060.5q-157%200-299.5-61T224%201312T60.5%201067.5T0%20770zm169%200q0%20243%20177%20422q177%20177%20423%20177q162%200%20300-80.5t219-218.5t81-300t-81-300.5t-219-219T769%20170t-300%2080.5t-219%20219T169%20770zm387.5%20289.5Q550%201037%20562%201015l148-262V315q0-24%2016.5-40.5T767%20258t40.5%2016.5T824%20315v455q0%2020-13%2036l-149%20266q-16%2028-51%2028q-16%200-27-6q-21-12-27.5-34.5z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
                                          }
                                          72% {
                                              background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%201537%201537%22%3E%3Cpath%20d%3D%22M0%20770q0-209%20103.5-386.5T384%20103T769%200q156%200%20298%2061t245%20164t164%20245.5t61%20299.5q0%20156-61%20298.5t-164%20245t-245%20163t-298%2060.5q-157%200-299.5-61T224%201312T60.5%201067.5T0%20770zm169%200q0%20243%20177%20422q177%20177%20423%20177q162%200%20300-80.5t219-218.5t81-300t-81-300.5t-219-219T769%20170t-300%2080.5t-219%20219T169%20770zm270%20142.5q6-22.5%2026-34.5l245-143V315q0-24%2016.5-40.5T767%20258t40.5%2016.5T824%20315v455q0%2019-11.5%2034T784%20824L522%20976q-12%208-28%208q-33%200-49-29q-12-20-6-42.5z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
                                          }
                                          81% {
                                              background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%201537%201537%22%3E%3Cpath%20d%3D%22M0%20770q0-209%20103.5-386.5T384%20103T769%200q156%200%20298%2061t245%20164t164%20245.5t61%20299.5q0%20156-61%20298.5t-164%20245t-245%20163t-298%2060.5q-157%200-299.5-61T224%201312T60.5%201067.5T0%20770zm169%200q0%20243%20177%20422q177%20177%20423%20177q162%200%20300-80.5t219-218.5t81-300t-81-300.5t-219-219T769%20170t-300%2080.5t-219%20219T169%20770zm225-1q0-24%2016.5-40.5T451%20712h259V315q0-24%2016.5-40.5T767%20258t40.5%2016.5T824%20315v455q0%2024-16.5%2040.5T767%20827q-10%200-13-1H451q-24%200-40.5-17T394%20769z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
                                          }
                                          90% {
                                              background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%201537%201537%22%3E%3Cpath%20d%3D%22M0%20770q0-209%20103.5-386.5T384%20103T769%200q156%200%20298%2061t245%20164t164%20245.5t61%20299.5q0%20156-61%20298.5t-164%20245t-245%20163t-298%2060.5q-157%200-299.5-61T224%201312T60.5%201067.5T0%20770zm169%200q0%20243%20177%20422q177%20177%20423%20177q162%200%20300-80.5t219-218.5t81-300t-81-300.5t-219-219T769%20170t-300%2080.5t-219%20219T169%20770zm268-141q-7-23%205-43q11-20%2034.5-27t43.5%205l190%20107V315q0-24%2016.5-40.5T767%20258t40.5%2016.5T824%20315v455q0%2024-16.5%2040.5T767%20827q-21%200-38-15L464%20664q-20-12-27-35z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
                                          }
                                          100% {
                                              background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%2224%22%20height%3D%2224%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%201537%201537%22%3E%3Cpath%20d%3D%22M0%20770q0-209%20103.5-386.5T384%20103T769%200q156%200%20298%2061t245%20164t164%20245.5t61%20299.5q0%20156-61%20298.5t-164%20245t-245%20163t-298%2060.5q-157%200-299.5-61T224%201312T60.5%201067.5T0%20770zm169%200q0%20243%20177%20422q177%20177%20423%20177q162%200%20300-80.5t219-218.5t81-300t-81-300.5t-219-219T769%20170t-300%2080.5t-219%20219T169%20770zm384-289q6-23%2026-34q20-12%2043.5-6t34.5%2026l53%2089V315q0-24%2016.5-40.5T767%20258t40.5%2016.5T824%20315v455q0%2024-16.5%2040.5T767%20827q-41%200-54-36L559%20524q-12-20-6-43z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
                                          }
                                           
                                          }
                                          

                                          css-drehende-Uhr-svg.gif

                                          Rainbowing Icons

                                          .rainbowing{
                                           /*color:transparent;*/
                                           animation: rainbow 4s infinite;
                                          }
                                          
                                          @keyframes rainbow{
                                             	100%,0%{
                                             		color: rgb(255,0,0);
                                             	}
                                             	8%{
                                             		color: rgb(255,127,0);
                                             	}
                                             	16%{
                                             		color: rgb(255,255,0);
                                             	}
                                             	25%{
                                             		color: rgb(127,255,0);
                                             	}
                                             	33%{
                                             		color: rgb(0,255,0);
                                             	}
                                             	41%{
                                             		color: rgb(0,255,127);
                                             	}
                                             	50%{
                                             		color: rgb(0,255,255);
                                             	}
                                             	58%{
                                             		color: rgb(0,127,255);
                                             	}
                                             	66%{
                                             		color: rgb(0,0,255);
                                             	}
                                             	75%{
                                             		color: rgb(127,0,255);
                                             	}
                                             	83%{
                                             		color: rgb(255,0,255);
                                             	}
                                             	91%{
                                             		color: rgb(255,0,127);
                                             	}
                                          }
                                          
                                          

                                          css-rainbowing-icon.gif

                                          Lime Loading Battery

                                          .charge{
                                           color:transparent;
                                           animation: charging 4s infinite;
                                          }
                                          @keyframes charging{
                                           0% {
                                              background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%221em%22%20height%3D%221em%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M16%2020H8V6h8m.67-2H15V2H9v2H7.33A1.33%201.33%200%200%200%206%205.33v15.34C6%2021.4%206.6%2022%207.33%2022h9.34A1.33%201.33%200%200%200%2018%2020.67V5.33C18%204.6%2017.4%204%2016.67%204z%22%20fill%3D%22lime%22%2F%3E%3C%2Fsvg%3E') no-repeat center center / contain;
                                              }
                                           33% {
                                             background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%221em%22%20height%3D%221em%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M16%2020H8V6h8m.67-2H15V2H9v2H7.33C6.6%204%206%204.6%206%205.33v15.34C6%2021.4%206.6%2022%207.33%2022h9.34c.74%200%201.33-.59%201.33-1.33V5.33C18%204.6%2017.4%204%2016.67%204M15%2016H9v3h6v-3%22%20fill%3D%22lime%22%2F%3E%3C%2Fsvg%3E') no-repeat center center / contain;
                                           } 
                                           66%{
                                             background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%221em%22%20height%3D%221em%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M16%2020H8V6h8m.67-2H15V2H9v2H7.33C6.6%204%206%204.6%206%205.33v15.34C6%2021.4%206.6%2022%207.33%2022h9.34c.74%200%201.33-.59%201.33-1.33V5.33C18%204.6%2017.4%204%2016.67%204M15%2016H9v3h6v-3m0-4.5H9v3h6v-3z%22%20fill%3D%22lime%22%2F%3E%3C%2Fsvg%3E') no-repeat center center / contain;
                                           }  
                                           100% {
                                             background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%221em%22%20height%3D%221em%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M16%2020H8V6h8m.67-2H15V2H9v2H7.33C6.6%204%206%204.6%206%205.33v15.34C6%2021.4%206.6%2022%207.33%2022h9.34c.74%200%201.33-.59%201.33-1.33V5.33C18%204.6%2017.4%204%2016.67%204M15%2016H9v3h6v-3m0-9H9v3h6V7m0%204.5H9v3h6v-3z%22%20fill%3D%22lime%22%2F%3E%3C%2Fsvg%3E') no-repeat center center / contain;
                                          }
                                          

                                          css-batteryLoad-svg-lime.gif

                                          Red discharge Battery

                                          .discharge{
                                           color:transparent;
                                           animation: discharging 4s infinite;
                                          }
                                          
                                          
                                          
                                          @keyframes discharging{
                                           100% {
                                              background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%221em%22%20height%3D%221em%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M16%2020H8V6h8m.67-2H15V2H9v2H7.33A1.33%201.33%200%200%200%206%205.33v15.34C6%2021.4%206.6%2022%207.33%2022h9.34A1.33%201.33%200%200%200%2018%2020.67V5.33C18%204.6%2017.4%204%2016.67%204z%22%20fill%3D%22red%22%2F%3E%3C%2Fsvg%3E') no-repeat center center / contain;
                                              }
                                           66% {
                                             background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%221em%22%20height%3D%221em%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M16%2020H8V6h8m.67-2H15V2H9v2H7.33C6.6%204%206%204.6%206%205.33v15.34C6%2021.4%206.6%2022%207.33%2022h9.34c.74%200%201.33-.59%201.33-1.33V5.33C18%204.6%2017.4%204%2016.67%204M15%2016H9v3h6v-3%22%20fill%3D%22red%22%2F%3E%3C%2Fsvg%3E') no-repeat center center / contain;
                                           } 
                                           33%{
                                             background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%221em%22%20height%3D%221em%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M16%2020H8V6h8m.67-2H15V2H9v2H7.33C6.6%204%206%204.6%206%205.33v15.34C6%2021.4%206.6%2022%207.33%2022h9.34c.74%200%201.33-.59%201.33-1.33V5.33C18%204.6%2017.4%204%2016.67%204M15%2016H9v3h6v-3m0-4.5H9v3h6v-3z%22%20fill%3D%22red%22%2F%3E%3C%2Fsvg%3E') no-repeat center center / contain;
                                           }  
                                           0% {
                                             background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%221em%22%20height%3D%221em%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M16%2020H8V6h8m.67-2H15V2H9v2H7.33C6.6%204%206%204.6%206%205.33v15.34C6%2021.4%206.6%2022%207.33%2022h9.34c.74%200%201.33-.59%201.33-1.33V5.33C18%204.6%2017.4%204%2016.67%204M15%2016H9v3h6v-3m0-9H9v3h6V7m0%204.5H9v3h6v-3z%22%20fill%3D%22red%22%2F%3E%3C%2Fsvg%3E') no-repeat center center / contain;
                                          }
                                          
                                          

                                          css-batterydecharge-svg-red.gif

                                          DiginixD Offline
                                          DiginixD Offline
                                          Diginix
                                          wrote on last edited by Diginix
                                          #5220

                                          @mcu Super geil. Vielen Dank! Funktioniert perfekt.

                                          Ich würde gern weiterhin die Icons von https://materialdesignicons.com/ nutzen. Aber wenn ich die von dort als SVG downloade und nach base64 codiere sind die immer schwarz. Das geht mir auch so wenn ich von anderen Websites SVG Icons nutzen will. Wie bekommt man die so dass sie sich neutral verhalten und dem Style von Jarvis anpassen?

                                          ..:: So long! Tom ::..

                                          NUC7i3 (Ubuntu Proxmox VM) | Echo Dots 2+3. Gen | Xiaomi Sensoren | Mi Robot 1S | Yeelight | Sonoff | Shelly | H801 RGB | Gosund SP1 | NodeMCU+ESP32 | Kostal Plenticore PV+BYD | openWB

                                          M 1 Reply Last reply
                                          0
                                          Reply
                                          • Reply as topic
                                          Log in to reply
                                          • Oldest to Newest
                                          • Newest to Oldest
                                          • Most Votes


                                          Support us

                                          ioBroker
                                          Community Adapters
                                          Donate

                                          698

                                          Online

                                          32.6k

                                          Users

                                          82.3k

                                          Topics

                                          1.3m

                                          Posts
                                          Community
                                          Impressum | Datenschutz-Bestimmungen | Nutzungsbedingungen | Einwilligungseinstellungen
                                          ioBroker Community 2014-2025
                                          logo
                                          • Login

                                          • Don't have an account? Register

                                          • Login or register to search.
                                          • First post
                                            Last post
                                          0
                                          • Home
                                          • Recent
                                          • Tags
                                          • Unread 0
                                          • Categories
                                          • Unreplied
                                          • Popular
                                          • GitHub
                                          • Docu
                                          • Hilfe