Close

CSS Loader

This is a web form with an animated CSS loader designed using pure CSS, and Bootstrap framework 4. The colors and sizes of the loader are predefined as $p: 6.25em, $r: 1.5em, $b: 20*$r, $d: 2*($b - $r), $c: /#490a3d, /*#bd1550,*/ #e97f02/*, $n: length($c), $q: 20%, and $t: 1s. The background of the form is given the styles of background color as #333, and filter as drop-shadow(2px 2px 5px rgba(#000, .5)). The body of the form is given the styles of display as grid, place-content as center, height as 100vh, and animation as fsx 4*$t steps(1) infinite. The loader switches its background color between #490a3d, and #e97f02. It is given an animation of fbg 2*$n*$t steps(1) -3*$t infinite, mov $t infinite alternate, and exp $t ease-in infinite alternate. When the mov becomes 100%, it is given a transform of translatey($r) rotate(.5turn). Source: https://codepen.io/thebabydino/pen/YzPoZyj

Post Comment or Questions

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Several Related Snippets

Lorem ut labore et dolore magna aliqua. Ut enim ad minim veniam.