While building the refreshable lists feature of the Ninja Forms THREE newsletter action, I wanted to provide some visual feedback while awaiting the response from the server with the new list content. I’m normally the PHP developer at the office, with James as the CSS developer, so I reached out to him to add the CSS for a spinning dashicon.
Instead of just writing the CSS, James walked me through the basics of CSS Animations and how to apply it to a dashicon. Below is a mockup of the interaction for refreshable lists:
The animation is broken down into two parts:
- The Selector Usage ex.
animation: dashicons-spin 1s infinite;
- The Keyframe Declaration ex.
The animation’s keyframes are declared separate from its usage, with a
@keyframes declaration, followed by an animation name, then the individual frame properties. Each frame property is marked with a percent, indicating the point of progress, with styles for that point in the animation.
dashicon-spin example is a simple animation, which rotating the dashicon from a starting point (0%) of 0 degrees (0deg) to an end point (100%) of 360 degrees (360deg).
Note: For a continuous animation, I had to specify an timing function of ‘linear’, as the animation uses some ease by default.
- Keyframe Animation Syntax via CSS-Tricks (Chris Coyier)