Close

Bar Graph

This is an example of a web form with appear animations, designed using HTML, CSS, and Bootstrap framework 4. The colors are pre-defined as variables which are b: #5aa8e8, b-rgba: rgba(108,90,232,0.25), b-skills: #5E95E8, and w: #fff. The transitions are defined as tr01: all .5s ease-in-out, and bezier: cubic-bezier(.17,.67,0,1). The bar values are also defined according to the percentage values. The body of the form is given a style set of background color as #5aa8e8, font-size as 100%, and font-family as sans-serif. The width for the 1st and 2nd bars is given as 90% with the 2nd bar having an animation-delay of 0.05s. The 3rd bar is given a width of 80% with an animation-delay of 0.1s. The 4th bar has a width of 70% with a delay of 0.15s. The 5th bar has a width of 75% with an animation-delay of 0.2s. The 6th bar has a width of 60% with a delay of 0.25s, whereas the 7th bar has a width of 80% with a delay of 0.3s. The 8th bar is given a width of 75% with an animation-delay of 0.35s. Source: https://codepen.io/Chaaampy/pen/mwvpGE

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.