Experimental

Email Loader Animation

The below animation was created to continue my learning of SVGs and how they might be used as an interstitial loading screen.

The base color of the envelope can be easily modified using SCSS variables. This method also utilizes darken and lighten values to automatically update the tint and shade of the SVG elements.

It includes the following animation states:

enter state (the envelope emerges and wraps around letter)
waiting for data state (envelope pulses)
exit state (data load is complete)

See the Pen Email Loader v2 by Craig Mertan (@beeblezep) on CodePen.

Success Animation

An animation following some sort of successful submission to reenforce the positive outcome.

See the Pen Success Checkbox by Craig Mertan (@beeblezep) on CodePen.

Lottie Animation

Using a Lottie animation after task completion.

See the Pen confetti by Craig Mertan (@beeblezep) on CodePen.

Toast Message

A message that appears for a given period of time and automatically goes away because there is no active reason to interact with it.

See the Pen SC Next success button by Craig Mertan (@beeblezep) on CodePen.