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. Required fields are marked *

Several Related Snippets

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