Project based Learning using HTML CSS JS - Day 15

Today's day 15 Goal is to Build and learn by creating a gradient loading bar in Html & CSS from YT Tutorial. Successfully completed leading bar project by building and learning.

HTML

-

CSS

1. What is ::before pseudo element selector in CSS?

1. Before pseudo selector in CSS places content before a class element.

.loader::before {}

2. How to get linear gradient in CSS?

1. Write the following code.

background: linear-gradient(
    90deg,
    rgb(64, 169, 222),
    rgb(147, 183, 110),
    rgb(91, 12, 156),
    rgba(203, 78, 111, 0.333)
  );

3. How how to give animation in CSS?

1. Write the following code.

animation: animate 20 s linear infinite;

4. How to animate in css using keyframes?

1. Write the following code.

@keyframes animate
{
  0%{
    background-position: 0 0;
  }
  0%{
    background-position: 500% 0;
  }
}

JavaScript

-

Conclusion

1. ::before pseudo element selector in CSS.

2. Linear gradient in CSS.

3. Animation property.

4. Animate using keyframes.

5. Successfully completed leading bar project by building and learning.

My Code:

Source: YT

Author: Dheeraj.y