I am in need of creating a circular countdown timer that is divided into 4 quarters, with each quarter further divided into segments. Each quarter will have its own unique background color or image.
The purpose of this circle timer is for each segment to last approximately 5 seconds (refer to the attached image for the visual concept I am aiming for). The timer should only begin once a JavaScript command is initiated (with options to pause and rewind as well).
The transition between segments does not necessarily have to be a smooth animation; switching to a new segment can simply involve the previous segment's background color fading to white.
There are some considerations to keep in mind:
- The number of segments within each quadrant may vary, requiring flexible segment sizing
- The order of the quadrants can change dynamically (e.g., instead of blue, orange, red, green... it could be orange, red, purple, etc.)
- Compatibility with iPhone and older Android devices is crucial (initial research led me to Raphael and SVG, but they do not seem to be supported on older Android models)
I am currently unsure of the best approach to tackle this challenge, so any suggestions or examples would be greatly appreciated (as I have been unable to find any relevant resources thus far).