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

Bar Loading

4.3.1
This is an example of a navigation bar with expanding effects, designed using HTML, CSS, JavaScript, and Bootstrap framework 4. The fonts are imported to the code with its URL whereas the JavaScript functions have been used to implement the expanding function of the navigation icon. The concept of Lists has been used with UL and LI components. UL element has been used with the child elements of LI to display the child elements of the navigation bar, in an orderly manner. The body of the form is given the styles of background-color as #28363D, font-family as "Roboto", and color as #fff The button is given the styles of width and height as 50px, margin as 70px 97px, padding as 10px, and cursor style as pointer to get the hand cursor effect on a hover event. The menu container is given the styles of overflow as hidden to hide the content when inactive, background as #212121, width as 250px, box-shadow as 0 0 10px #000, and transform as translateZ(0) translateX(-100%). The child elements of the menu take the style of text-decoration as line-through, in a hover event. Source: https://codepen.io/MilanMilosev/pen/GJbGJq
This is an example of a full-screen menu layout with a toggle button, designed using HTML, CSS, JavaScript, and Bootstrap framework 4. The fonts are imported to the code with its URL, whereas the JavaScript functions have been used to implement the toggle function of the navigation button. The concept of Lists has been used with UL and LI components. UL element has been used with the child elements of LI to display the menu items in an orderly manner. The colors used and the button heights are predefined as variables. The body of the form is given a background color of #F5F5F5, and a font style as 'Roboto', sans-serif. The navigation button container has the styles of top as 5%, right as 2%, height as 27px, width as 35px, cursor as pointer to get the hand cursor effect in a hover event, and transition as opacity .25s ease. The button changes its opacity value to .7, in a hover event. The text link is given a font color of #FF5252, and a font-size of 20px. The navigation child elements are given a font color of #FFF, to appear in when the navigation button is clicked. Source: https://codepen.io/PaulVanO/pen/XJYGNQ
This is an example of a web form with a responsive and animated line chart, designed using HTML, JavaScript and Bootstrap framework 4. JavaScript functions have been used to implement the chart with the Chart.js library imported to the code with its URL. Chart labels have been defined as January, February, March, April, May, June, and July. Three datasets have been defined with separate background colors as rgba(151,187,205,0.5) for dataset 1, rgba(151,187,205,0.5) for dataset 2, and rgba(220,220,220,0.5) for dataset 3. The responsive option is set as true to optimize the chart's layout for different screen sizes through the dynamic insertion and removal of columns. The chart can be randomized by clicking on the Randomize button which dynamically adds data to the datasets array. The method myBar.update() refreshes and updates the chart after dynamically changing it. Source: https://codepen.io/chriswatts90/pen/yayoBg
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

Bar Graph

4.3.1