Recently, the Centro team realized that the data-heavy parts of our application were not loading immediately. Because we didn’t want users to think something was wrong, we decided to employ a familiar pattern and add a loading animation to the app:
We needed the animation to be flexible, as it would be used full-screen and in variable-sized containers. Our preference was for a code-based solution (instead of a static asset like an image) so we could maintain a finer level of control over behavior and usage.
Our application uses React and its animation library so we started by
creating a custom component. Below we use our default
h1 styling then add some
span tags around the word “Loading” and each period after it:
The React animation library applies classes to elements when they are added or removed from the DOM, so we tell our loader component how to behave when it enters and leaves:
Then we style our dots by adding some animation instructions for duration, count and timing. We want linear timing in this case for steady, even pacing from the beginning-to-end:
Now we create animation keyframes that tell each of our dots how to behave at certain points in the animation:
In the case of our first ellipses dot, it will be invisible from 0–25% of the timeline, transitioning to visible from 25%–35%, and then remaining visible until the end. From here it will start over because we chose a count of infinite.
We do the same for the other two but sequentially stagger the timing. The second dot will start its transition at 50%, and the third at 75%. Notice how the same amount of timeline (10%) is used between the second and third keyframes so the dots fade in consistently:
Lastly, we assign these keyframes to each dot with the
And there you have it: a React-based, text-only, loading screen animated sequentially with CSS.