Neuer ioBroker-Blog online: Monatsrückblick März/April 2026

[Chiller]

Moin,
folgendes Video:

Video:
https://www.youtube.com/watch?v=ozwgydETPPs&list=WL&index=74&t=0s

Diese Kreise mit dem Hintergrundbild kann man ja mittels svg shape bewerkstelligen, denke ich mal ... nur die eigentliche Frage ... wie schaffe ich das sich dort ein kleiner Kreis rotiert im eigentlich Sekunden Takt. Das selbe auch beim Homebutton, das interessiert mich wahnsinnig.

Hoffe mir kann jemand dabei Helfen

Liebe Grüße

[Glasfaser]

@Chiller

Kannst ja hiermit Basteln ... Vorlage sieht dann so aus :

.

hier mit den Farben gespiel:

hier das CSS in Projekt hinterlegen :

Spoiler

.spinnerleft {

animation-name: spin;

animation-duration: 5000ms;

animation-iteration-count: infinite;

animation-timing-function: linear; 



}

@keyframes spin {

  from {

      transform:rotate(360deg);

  }

  to {

      transform:rotate(0deg);

  }

}

.spinnerright {

animation-name: spin2;

animation-duration: 5000ms;

animation-iteration-count: infinite;

animation-timing-function: linear; 



}

@keyframes spin2 {

  from {

      transform:rotate(0deg);

  }

  to {

      transform:rotate(360deg);

  }

}

Widget :

Spoiler

[{"tpl":"tplHqCircle","data":{"g_fixed":true,"g_visibility":false,"g_css_font_text":false,"g_css_background":true,"g_css_shadow_padding":true,"g_css_border":true,"g_gestures":false,"g_signals":false,"g_last_change":false,"visibility-cond":"==","visibility-val":1,"visibility-groups-action":"hide","oid":"","displayPrevious":true,"lc-type":"last-change","lc-is-interval":true,"lc-is-moment":false,"lc-format":"","lc-position-vert":"top","lc-position-horz":"right","lc-offset-vert":0,"lc-offset-horz":0,"lc-font-size":"12px","lc-font-family":"","lc-font-style":"","lc-bkg-color":"","lc-color":"","lc-border-width":"0","lc-border-style":"","lc-border-color":"","lc-border-radius":10,"lc-zindex":0,"g_center":true,"descriptionLeft":"active media progress","hideNumber":true,"angleOffset":"0","oid-working":"","caption":"","oid-battery":"","oid-signal":"","g_value":false,"min":"0","max":"100","digits":"0","step":"1","is_comma":"true","angleArc":"1","class":"spinnerright ","signals-cond-0":"==","signals-val-0":true,"signals-icon-0":"/vis/signals/lowbattery.png","signals-icon-size-0":0,"signals-blink-0":false,"signals-horz-0":0,"signals-vert-0":0,"signals-hide-edit-0":false,"signals-cond-1":"==","signals-val-1":true,"signals-icon-1":"/vis/signals/lowbattery.png","signals-icon-size-1":0,"signals-blink-1":false,"signals-horz-1":0,"signals-vert-1":0,"signals-hide-edit-1":false,"signals-cond-2":"==","signals-val-2":true,"signals-icon-2":"/vis/signals/lowbattery.png","signals-icon-size-2":0,"signals-blink-2":false,"signals-horz-2":0,"signals-vert-2":0,"signals-hide-edit-2":false,"g_style":true,"thickness":"0.05","color":"#8a8a8a","bgcolor":"#8a8a8a","linecap":true,"cursor":"","anticlockwise":false},"style":{"left":"669px","top":"42px","width":"240px","height":"240px","z-index":"21","box-shadow":"0px 0px 25px #8a8a8a","border-radius":"270px","border-width":"","border-style":"","margin-left":"","border-color":"","background":"","background-color":"transparent","padding-left":"","padding":"","padding-top":"","padding-bottom":"","margin-bottom":""},"widgetSet":"hqwidgets"}]

[Chiller]

@Glasfaser

Was soll ich denn genau mit dem Widget-Tab machen? Sorry ich komme vom Webdesign und das Rotate kenne ich von CSS aber das mit dem Widget, kann ich leider nichts anfangen.

[Glasfaser]

@Chiller sagte in Frage zu einem Effekt in VIS:

@Glasfaser

Was soll ich denn genau mit dem Widget-Tab machen?

Das Widget im VIS Editor einfügen :
.

und hier das CSS eintragen .

.

Sorry ich komme vom Webdesign und das Rotate kenne ich von CSS

??? kann dir leider nicht folgen was du meinst und mir damit sagen willst !?

aber das mit dem Widget, kann ich leider nichts anfangen.

Das ist das Widget im Video , halt nicht genau das gleiche , aber sollte dir ja als Vorlage dienen .

[Chiller]

@Glasfaser

Wow, sehr schön, danke für die Hilfe :D