Circular timer

A timer you set by turning a wheel. The numbers, the ticks and the time sector are three rings that share one --o-from, so changing it turns them as one.

How it's built

  • The numbers, the ticks and the sector are on three rings with the class turn. The script sets one --o-from on all three, and Orbit places their children from that angle. See rings.
  • The sector is an <o-progress max="360"> whose value is the angle set. On orbit-5 with --o-size-ratio: 10 the band reaches from the center to lane 10.
  • The numbers stand along the radius with spin-lock on the satellite and flip on the capsule.
  • The pointer and the readout are on rings that never get the new --o-from, so they stay put.
  • The whole universe is the slider: drag it, or focus it and use the arrow keys. Space starts and pauses.

After a SwiftUI original. Thanks to Andriy Tyurnikov, who proposed the challenge.

Related