Some more UI elements from this thing at work.
The visualisation dashboard uses data streams to create the charts, and these are the various control states for each stream.
Once a data stream has been created, an instance is added to the dashboard sidebar in the default 'inactive' state.
Clicking on the inactive state will result in one of two outcomes:
1 - If the stream has been configured correctly, it will start running. If a running stream control is hovered, the pause icon is displayed. If a running stream control is clicked, it will return to the inactive state.
2 - If there are any errors in the stream configuration, the error state kicks in. When you open the settings (by clicking on the cog) errors will be highlighted for you to correct.
For now, these animations are just a simple .gif sprite but the aim is to draw them in SVG down the line.
Also, the labels (Inactive, Running, Pause? and Error) are just there to show states - these are actually stream names in the dashboard.
L or F like
Z toggle zoom
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2017 Dribbble Holdings Ltd. All screenshots © their respective owners.