Feature/Loading Indicator

[Snugug]

Loading indicator component when we don't know percent done (should use #63 when we do)

[ryanbrownhill]

@Snugug Shall we just convert this into a svg animation component or shall I design a new one?

[Snugug]

@ryanbrownhill Whichever you'd prefer.

Requirements for this:

• [ ] Single SVG
• [ ] Accessible base that gets across loading if SVGs are not available
• [ ] Less than 14kb minimized
• [ ] Customizable (especially color, but maybe speed too)

We can discuss if it's something to be applied as an inline SVG, an image tag, or as CSS once you've decided which direction to go.

If you decided to convert this to SVG, I'd like to see a couple of extra frames with the outer circle complete; right now it looks like the circle never finishes because it starts to fold in on itself so quickly.

[ryanbrownhill]

@Snugug I will start working on converting the above to an svg animation. We can discuss our accessibility options - I am under the assumption that we can use meta-tags within the svg?

[Snugug]

Accessibility will depend on how we choose to implement the loader. There are a few resources you can look at though:

• http://www.sitepoint.com/tips-accessible-svg/
• http://www.paciellogroup.com/blog/2013/12/using-aria-enhance-svg-accessibility/
• http://www.w3.org/TR/SVG-access/

[ryanbrownhill]

• [X] Export New SVG for Watson Logo (Current one isn't suitable as the strokes are outlined and which doesn't allow for animate along path.
• [X] Setup SVG for Animation (Organizing the SVG file so ready for animation)
• [X] Animate Watson Logo SVG
  • [X] Animate Dots along path
  • [X] Animate strokes drawing on
  • [x] Add easing curves
• [x] Add Scaling Animation to logo
• [x] Add additional exterior stroke & circle animation
• [x] Research CSS or SVG Masking for the resolve

[ryanbrownhill]

Current Status of the SVG Animation:

What I am currently working on:

• Still figuring out how to move the does to resolve on different locations of the stroke.
• Figuring out how to add the SVG element when its animating (the dots sit in the corner before they become animated.)
• Working on the getting the easing & timing right.
• Adding CSS or SVG masking

[Snugug]

Looking good! I like! Couple questions:

• Is there going to be an out animation or just an in one? The original one you had posted goes in and out, just curious if you plan on the same thing for this.
• Have you thought about the implementation style and other things in that comment?

[ryanbrownhill]

@Snugug

• Yes the animate out will be a mask off of the SVG.
• I have I am thinking something like this for the implementation style: <object type="image/svg+xml" data="img/WatsonAvatar.svg"><!--fallback--></object> with the maybe a fallback gif within the object?
• For accessibility I will be adding proper <title> <desc> & roles=""

[Snugug]

Cool. Sounds good! I'm excited.

[ryanbrownhill]

@Snugug - I added you to the git lab project so you can see the code as I work. Right now I am writing the CSS inside the SVG file (which is only the Scale right now). I am doing this way because I figured we don't want to add an CSS file dependence to the SVG animation. Is this how I should be doing it?

[Snugug]

That should be good.

[ryanbrownhill]

Update - Refining Timing. Going to research the masking tomorrow.

[ryanbrownhill]

• Got Masking Working!! :+1: :tada:
• Need to work on cross browser issues for animating stroke-dashoffset (Mozilla error)

[Snugug]

Awesome! Looks great!

Now I know this is going to sound like a weird question, but have you tested in IE, and if so, what version of IE? Is there a list of some of the advanced SVG features you're using so we know what we need to test for?

[ryanbrownhill]

@Snugug haven't tested in an IE - do you know how to do that without access to a PC? Also the SVG features we are using are:

• <AnimateMotion>
• <Animate>
• stroke-dashoffset
• stroke-dasharray

The - stroke-dashoffset & stroke-dasharray are causing problems in moz. The problem is not that the stroke-dashoffset & stroke-dasharray don't work. It is that they don't animate. Here a blog post some one did on the subject Animating line drawing

As far as IE - SMIL doesn't work in IE. So would it be suitable to use a GIF fallback or should we use something like Snap.svg - I know snap would add an additional dependency we don't want. Do you know of any alternatives? All I know of is GSAP and it seems that it would be even heavier than Snap.svg

[Snugug]

Snap is 73KB minified; that's too big for me, much happier to do a GIF fallback provided that we can test for those features.

[Snugug]

You can test in IE with either http://www.browserstack.com/ or Modern.ie virtual machines

[ryanbrownhill]

@Snugug What do you mean but testing for those features? - How would I go about checking if we can do that?

[Snugug]

Take a look at Modernizr. We're going to need to devise Modernizr style tests for the features we want to use so that we can enhance from our basic loading feature (which will be our gif) to the SVG.

[ryanbrownhill]

Update: Refactored my code and setup a new gulp file so that I would have SASS styling.... then I realized that all the CSS has to be inline inside the SVG... So I am just using gulp to auto-prefix any new CSS that is written then paste that inline.

Been researching fallbacks & reading up on Modernizr.

My findings: Tried <object> which has its own html fallback mechanism but doesn't seem to work. From what I understand the fallback will only trigger if SVG's as a whole is not supported not just the Animation portion of SVG's.

Will probably going this route with Modernizr trigger: An alternative would be using a background-image for both the GIF and SVG in CSS with a Modernizr trigger.

Continuing to look into Modernizr in more detail. I am going to look to see if we can test compatibility for SVG Animation with Modernizr if not we could do a browser type trigger for the SVG enhancement?

Resources: SVG Fallbacks

[Snugug]

So here's the tricky bit: we aren't going to do browser sniffing because it's not a sustainable practice and it's often (and easily) tricked. Is there a way to to use @supports to check for CSS animations? Provide a basic animation if advanced CSS animations aren't available, more advanced ones if they are. Layered levels of animation based on levels of support.

[ryanbrownhill]

@Snugug Hmmm okeys. I will look into @supports. Another tricky part is that there is two types of animation:

1. The SVG animations with <animate> & <animateMotion>
2. CSS @keyframes

[Snugug]

Yup, this'll be a challenge. Maybe @una can help

[ryanbrownhill]

Figured out the looping within SMIL I have created two versions.

1. Animates and loops the entire animation (Like the original gif above).
2. Animates the graphic on and loops a progress circle

We could figure out a trigger for the animation to resolve or build some kind of progress feature to the exterior ring that could read the actual progress. Also the second option could be used as the loading bar as well.

[Snugug]

To me the key difference between a loading indicator and a progress bar is that a progress bar shows % complete whereas a loading indicator is more like a waiting indicator where we don't know how much we have to wait.

I like both of them though. I guess the question is how much do we want going on during the waiting? Looping the whole thing will make it appear that much more is happening (cause there's more motion) but it's also more noisy? Maybe? I don't know. Anyone else have thoughts?

[ryanbrownhill]

Agreed - I think the second one might be a little bit too noisy. I think the second one would be better suited.

I can continue with the second animation and figuring out how to make this more production ready but I believe it will take me quite sometime. I am happy to continue do it but I will need someone that has more front end expertise to help me finalize this. My main front end challenge is the creating a proper fallback or enhancement as mentioned above.

[Snugug]

Modernizer v3 has a feature detect for SMIL http://v3.modernizr.com/download/

We should also connect with Marketing on this, apparently using the logo to indicate loading is against the band guidelines for the avatar

[joshkimmell]

We should connect, though technically it isn't the logo. There are no lashes.

[Snugug]

logo/avatar I'm sure they don't make a distinction. But yes, we should connect.

[bradbecker]

I thought this was for thinking and processing.

-b

On Mar 29, 2015, at 4:10 PM, Sam Richard notifications@github.com wrote:

Modernizer v3 has a feature detect for SMIL http://v3.modernizr.com/download/

We should also connect with Marketing on this, apparently using the logo to indicate loading is against the band guidelines for the avatar

— Reply to this email directly or view it on GitHub.

[Snugug]

@ryanbrownhill How's the progress on this?

[ryanbrownhill]

@Snugug @una added a javascript trigger so that the animation ends on click ( or any other javascript event ). I believe all that needs to be done is making it a gif and creating the fallback - I can chat with you or @eva about it?

Here is the link to the current SMIL animation with the Javascript trigger. https://git.design.ibm.com/rgbrownh/watson-avatar-loader/blob/master/img/WatsonAvatar-exterior.svg

[Snugug]

Awesome. Have you done any cross-browser testing yet?

[Snugug]

Also, you shouldn't bind to onclick, you should add an event listener and listen for click.

[ryanbrownhill]

@Snugug webkit browsers seem to be good. Firefox - clipping path out of place and strokes don't draw on.

[ryanbrownhill]

Added modernizr fallback, if SMIL is not supported then the GIF is shown. https://git.design.ibm.com/rgbrownh/watson-avatar-loader/tree/master

Still having issues with Firefox not supporting stroke-dasharray & stroke-offset which is a subset of SMIL.

[ryanbrownhill]

Loading indicator is up and running with fallbacks. @Snugug Let me know if there is a better way to implement the fallbacks.

Here is the codebase for the SVG: https://git.design.ibm.com/rgbrownh/watson-avatar-loader/tree/master

[ryanbrownhill]

@Snugug This is ready to become a Pull Request. Where shall I put it?

design-library/patterns/components/loading-indicator

[Snugug]

Partner with @britanyponvelle, follow the Contributing Guidelines, and build a component!

Yah, that's the place to put it