Um einen Fortschrittsbalken mit CSS zu erstellen, benötigst du eine Kombination aus HTML und CSS. Hier ist ein einfaches Beispiel:
HTML:
```html
CSS:
```css
.progress-bar {
width: 100%;
background-color: #f3f3f3;
border-radius: 5px;
box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}
.progress {
height: 20px;
background-color: #4caf50;
border-radius: 5px;
}
```
In diesem Beispiel haben wir einen äußeren `div` mit der Klasse `.progress-bar` und einen inneren `div` mit der Klasse `.progress`. Der innere `div` stellt den derzeitigen Fortschritt dar und seine Breite kann durch die Änderung des `width` Styles geändert werden. In diesem Fall ist es auf 70% gesetzt.
Das zugehörige CSS gibt dem Fortschrittsbalken sein Aussehen. Die `.progress-bar` Klasse gibt dem äußeren `div` seine Breite, Hintergrundfarbe, Eckenradius und seinen Schatten. Die `.progress` Klasse gibt dem inneren `div` seine Höhe, Hintergrundfarbe und Eckenradius.
Sie können natürlich die Werte ändern, um den Fortschrittsbalken an Ihre Bedürfnisse anzupassen. Zum Beispiel können Sie die `height` ändern, um die Dicke des Balkens anzupassen, oder die `background-color`, um die Farbe des Balkens zu ändern.
