New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feature/Loading Indicator #65
Comments
|
@ryanbrownhill Whichever you'd prefer. Requirements for this:
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. |
@Snugug I will start working on converting the above to an svg animation. |
Accessibility will depend on how we choose to implement the loader. There are a few resources you can look at though: |
|
Looking good! I like! Couple questions:
|
|
Cool. Sounds good! I'm excited. |
@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? |
That should be good. |
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? |
@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:
The - 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 |
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. |
You can test in IE with either http://www.browserstack.com/ or Modern.ie virtual machines |
@Snugug What do you mean but testing for those features? - How would I go about checking if we can do that? |
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 |
Update: Been researching fallbacks & reading up on Modernizr. My findings: Will probably going this route with Modernizr trigger: Continuing to look into Modernizr in more detail. Resources: |
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 |
@Snugug Hmmm okeys. I will look into
|
Yup, this'll be a challenge. Maybe @una can help |
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? |
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. |
Modernizer v3 has a feature detect for SMIL We should also connect with Marketing on this, apparently using the logo to indicate loading is against the band guidelines for the avatar |
We should connect, though technically it isn't the logo. There are no lashes. |
logo/avatar I'm sure they don't make a distinction. But yes, we should connect. |
I thought this was for thinking and processing. -b
|
@ryanbrownhill How's the progress on this? |
@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. |
Awesome. Have you done any cross-browser testing yet? |
Also, you shouldn't bind to |
@Snugug webkit browsers seem to be good. |
Added modernizr fallback, if SMIL is not supported then the GIF is shown. Still having issues with Firefox not supporting |
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: |
@Snugug This is ready to become a Pull Request. Where shall I put it? design-library/patterns/components/loading-indicator |
Partner with @britanyponvelle, follow the Contributing Guidelines, and build a component! Yah, that's the place to put it |
Loading indicator component when we don't know percent done (should use #63 when we do)
The text was updated successfully, but these errors were encountered: