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.
3 months ago
This is just beautiful... Really digging these @Adam Whitcroft ..
Keep up the good work :)
Great work. I'd probably speed up the "Running" icon.
So beautiful, can't see anything wrong with it! :) Perhaps on hover, you could make the settings gear spin once. That'd be cute.
@Louis Bullock The settings cogs spin on hover already ;)
beautiful work! hypnotic :)
Oh man I love these subtle animations!
I'd personally increase the margin to the left of the red alert box ever so slightly as it feels slightly cramped here in comparison to the rest of the work. I really like the icons though, and the general colour tones.
Nice work :)
Continuing on oscillograph theme, shouldn't "inactive" be just a line? :)
EDIT Or a dot.
Very nice! Never thought to use something animated for this sort of thing, really adds that fine detail that is needed to make something awesome.
These look awesome, but isn't the error icon running the wrong way?
@Grant McAllister Good lord you're right. Well spotted!
This is amazing! :O
great job! so clean!
This is hot!
Love this idea! Well, executed!
i nearly fell asleep watching these.
really smart! I like this a lot.
Very unique! Lovely colors.
This is cool! Great work @Adam
love all alerts
keyboard shortcuts: ← previous shot → next shot L or F like
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–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
Follow Dribbble on Twitter