Loader component

[avelinet]

Another variation of a CSS loader. This one is four horizontal dots that animate. Made with multiple elements.

Status: Ready for review

Reviewers: @nastiatikk @cole-sanderson @mlworks @jeffkamo @ry5n @kpeatt

Minor work todo

• [x] Add class="c-fixture-body" to the body element in the index.html test file
• [x] Remove unused example classes from the stylesheet.

[jeffkamo]

Would be great, for added customization, to be able to set how many dots there are.

That way you could use a for loop to generate all the classes, delays and build the animation keyframes.

$loading__numberOfDots: 4 !default;

Note that using the animation-delay does not work as expected (buggy) on older Android devices. On one project, we had to ditch it and resort to building new sets of animation keyframes to simulate the effect. You may want to look into that too.

[ry5n]

I think we can do the number of dots as a different variation. This is a great start. Two little things and this is good to merge:

1. In visual test index.html, the body needs class="c-fixture-body" otherwise it’s 100% of the viewport.
2. I think we should remove the unused modifier and sub-component classes.

+1

[jeffkamo]

Oh, I just realized you're using animation delay to achieve your pulsating effect... (oh I forgot I mentioned this earlier above...) this is actually broken on older Android devices. For example, the animation delays actually fire completely at random, and desync across each other.

So instead of having a nice smooth pulsing animation from left to right, you get dots growing and shrinking at the correct rate, but starting at different times from each other.

At the very least, Android 4.1.2 and under.

The solution is very unsatisfying, unfortunately... you have to not use animation delay, and instead create unique keyframes that are basically the same animation, but with the timings shifted to simulate the delay effect...

We've had a few projects that have had to do this already.

[ry5n]

So, this still needs work?

[jeffkamo]

if we want to support 4.1.2 and under, yes. If not, then no.

Thoughts on what platforms we support on Stencil? @ry5n @avelinet @kpeatt

[ry5n]

Gotta be what we support for Adaptive sites. Usually that’s Android 4.0+, iOS 6+ unless I’m mistaken.

[avelinet]

@jeffkamo did you have a project with an example of the keyframes approach?

[jeffkamo]

@avelinet, will send you a PM

[yourpalsonja]

Hey @jeffkamo and @ry5n , @avelinet and I removed the delay and have the dots running on separate animations.

Tested on Android 4.1.1 and it's running well.

[avelinet]

+1 🌟

[ry5n]

@yourpalsonja @avelinet That’s awesome, well done! Can we add a comment explaining why the animation is implemented the way it is (because Android)? Then we’re good to merge!

[yourpalsonja]

@ry5n done!

[yourpalsonja]

Hey all, at the suggestion of @avelinet , I also removed the attribution to https://github.com/tobiasahlin/SpinKit, since our new animation doesn't build on that at all.

[ry5n]

Yay!