Polish Loading component

[trevordmiller]

Vojta has proposed some changes to the Loading component in his latest styleguide mocks: https://egghead.invisionapp.com/d/main#/console/10384631/225150686/comments/79600739

Current

http://styleguide.egghead.io/?selectedKind=Loading&selectedStory=Info&full=0&down=1&left=1&panelRight=0

This is used as a stand-alone component, and also as the default fallback in Request when a request is running but data hasn't yet been returned.

Proposed changes

• Change from spinning "refresh" icon to spinning circle with orange section

[joelhooks]

https://github.com/eggheadio/egghead-rails/blob/master/client/app/bundles/legacy/components/checklist/CircularStatusMeter.js

[trevordmiller]

@joelhooks Thanks for the link - that would work well maybe for a separate LoadingProgress component, but this is just a Loading component to indicate something is happening (maily for the Request fallback, where there isn't specific progress). @vojtaholik designs link to a Codepen which is just a spinning version, not a progressing status: http://codepen.io/aurer/pen/jEGbA

This can easily be done with a CSS transform of a static SVG with what I am already doing with the Loading icon currently.

Later, if the need arises to promote a LoadingProgress component, we could reuse the SVG, and just increase it's stroke with the logic you linked to, but I don't think that should be promoted yet and is a separate thing.

[trevordmiller]

@vojtaholik Can I get an SVG of the ring? I can animate it to spin from there; it would be good if the ring itself was translucent so it will work over both dark and light backgrounds - is that possible?

[vojtaholik]

Sure thing @trevordmiller; this should do it:

svg - http://cloud.egghead.io/0K0I3P072801 hint - http://cloud.egghead.io/0k2O431J1Z33

[trevordmiller]

Thanks Vojta