CodePen: A simple progressbar with CSS.

A simple test with CSS about how to create two simple progress bars. The code source of this example - https://codepen.io/catafest/pen/rNjmdwa show us about the cascading source code in CSS and how this works pe properties in CSS. This difference of the source code in CSS change the speed of the animation:

 animation: animate 6s ease-in-out infinite;
...
 animation: animate 1s ease-in-out infinite;

Some changes to the CSS source code are not allowed because they have no effect on the end result or must be used in order to complete the base code and have the end result. Another good example is flex:

display: flex;

On the parent element also changes how width and height work. CSS codes defines have no effect on a flex container. ... I can tell you that it is not very easy to change a project based on CSS, so the steps of designing and building a website are very important.

See the Pen CSS excample 001 by Cătălin George Feștilă (@catafest) on CodePen.