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.

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.