Close

Bar Loading

This is an example of a loading bar animation, designed using HTML, CSS, Bootstrap framework 4. The body of the form is given the styles of display as flex, justify-content as center, align-items as center, height as 100vh, and background as #ECEFFC. The implementation of the loading feature has been done by giving different animations and styles into four bars. The loading container is given the styles of position as relative, width as 45px, height as 45px, and a transform value as rotate(75deg). An individual bar is given an animation of 1.5s cubic-bezier(0.645, 0.045, 0.355, 1) infinite. The first child element is given a background color of #0984e3, and an animation style of slide-bottom-top, whereas the second child element has the background color of #d63031, and animation style of slide-left-right. The third and fourth ones are given the background colors and animation styles of #fdcb6e, #00b894, slide-top-bottom, and slide-right-left, respectively. Source: https://codepen.io/alphardex/pen/abzaxBB

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.