In order to create a progress bar with pure HTML and CSS, follow the steps below:
HTML:
```
In the above HTML code, a `div` element with class name `progress-bar` is created for the progress bar and a `div` element with class name `filler` is created to display the progress.
The width of the filler div represents the current progress. `50%` means the progress is halfway.
CSS:
```
.progress-bar {
width: 100%;
background-color: #f3f3f3;
border-radius: 5px;
box-shadow: 0 1px 1px #a9a9a9;
}
.filler {
height: 20px;
background: #66DE93;
border-radius: inherit;
transition: width .2s ease-in;
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.15) inset;
}
```
In the above CSS code, the progress bar is given a gray background and a border radius for rounded corners. The filler is given a green background.
The transition property on the filler is used to animate the width change so that it doesn’t change abruptly. The inset box-shadow on the filler is for some inner glow for a nicer effect.
The width of the filler div can be changed to update the progress.
