Iris Indicator

This is a demonstration page for the Iris loading indicator, a visual loading- state indicator implemented using WebGL. Feel free to change and adjust the settings for the indicator to see how it changes appearance. You can find the source code here. For technical details and motivation, read the article.

Settings

Seconds per rotation:
(higher number = slower rotation)

Ray movement speed (in seconds):
(higher number = slower movement)

Enable MSAA:
(Multi-Sample Anti-Aliasing)

Enable Bloom Effect:
(large performance impact)

Bloom intensity:
(moderate performance impact)

Rendering resolution:
(moderate performance impact)

Segment adjustment step duration:
(how fast the segments will move to their target ratio)

Segments

Segment 1

Segment 2

Segment 3

Segment 4

Simulate state change:
(automatically animates segments 1-3)

FPS

Rendering speed: 0 fps

FPS Limit:
(Limit will rarely be reached)

Enable FPS Limiter:
(if off, will synchronize with the display's refresh rate)