Animierter Fortschrittsbalken mit CSS

Es gibt durchaus Situationen bei denen es sinnvoll ist, den aktuellen Fortschritt obenrein grafisch darzustellen. Dazu nutzt man häufig einen Fortschrittsbalken. Einleuchtend ist die Anzeige eines Fortschrittsbalkens bspw. bei der Installation eines Programms oder einer App. Hier dürfte dabei jeder schon mal einen solchen Balken gesehen haben.

Aber auch beim Ausfüllen langer Formulare oder während eines Bestellvorgangs kann der aktuelle Fortschritt grafisch dargestellt werden. Hierzu gibt es mit CSS auch eine einfache Möglichkeit, dies zu tun.

Wie genau du mit CSS einen animierten Fortschrittsbalken in deine Website einfügen kannst, zeige ich dir dabei in diesem Artikel.

 

Animierter Fortschrittsbalken mit CSS

Wenn du etwas auf deiner Website darstellen möchtest, bietet CSS dazu viele Möglichkeiten zur Gestaltung. Ein animierter Fortschrittsbalken fehlt dabei natürlich nicht. Auf der Website cssflow.com habe ich hierzu ein hübsches Beispiel für eine solche Anzeige gefunden. Diese möchte ich dir dabei auf keinen Fall vorenthalten.

Um den animierten Fortschrittsbalken wie im Live-Beispiel (siehe weiter unten) darzustellen reicht es nicht ganz aus, lediglich die nachstehenden Code Snippets in deine Website einzubauen. Du musst dazu vorher noch ein paar Grafiken hochladen. Alle benötigten Bestandteile findest du dabei aber in der (ebenfalls weiter unten) verlinkten ZIP-Datei.

 

Code Snippets

Beispiel (HTML):

<body>
  <section class="container">
    <input type="radio" class="radio" name="progress" value="five" id="five">
    <label for="five" class="label">5%</label>

    <input type="radio" class="radio" name="progress" value="twentyfive" id="twentyfive" checked>
    <label for="twentyfive" class="label">25%</label>

    <input type="radio" class="radio" name="progress" value="fifty" id="fifty">
    <label for="fifty" class="label">50%</label>

    <input type="radio" class="radio" name="progress" value="seventyfive" id="seventyfive">
    <label for="seventyfive" class="label">75%</label>

    <input type="radio" class="radio" name="progress" value="onehundred" id="onehundred">
    <label for="onehundred" class="label">100%</label>

    <div class="progress">
      <div class="progress-bar"></div>
    </div>
  </section>
</body>

 

Beispiel (CSS):

/*
 * Copyright (c) 2012-2013 Thibaut Courouble
 * http://www.cssflow.com
 *
 * Licensed under the MIT License:
 * http://www.opensource.org/licenses/mit-license.php
 */

body {
  font: 13px/20px 'Lucida Grande', Tahoma, Verdana, sans-serif;
  color: #404040;
  background: #2a2a2a url('../img/bg.png') 0 0 repeat;
}

.container {
  margin: 80px auto;
  width: 640px;
  text-align: center;

  .progress {
    margin: 0 auto;
    width: 400px;
  }
}

.progress {
  padding: 4px;
  background: rgba(black, .25);
  border-radius: 6px;
  @include box-shadow(inset 0 1px 2px rgba(black, .25),
                      0 1px rgba(white, .08));
}

.progress-bar {
  position: relative;
  height: 16px;
  border-radius: 4px;
  @include transition(.4s linear);
  @include transition-property(width, background-color);
  @include box-shadow(0 0 1px 1px rgba(black, .25),
                      inset 0 1px rgba(white, .1));

  &:before, &:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }

  &:before {
    bottom: 0;
    background: url('../img/stripes.png') 0 0 repeat;
    border-radius: 4px 4px 0 0;
  }

  &:after {
    z-index: 2;
    bottom: 45%;
    border-radius: 4px;
    @include linear-gradient(top, rgba(white, .3), rgba(white, .05));
  }
}

/*
 * Note: using adjacent or general sibling selectors combined with
 *       pseudo classes doesn't work in Safari 5.0 and Chrome 12.
 *       See this article for more info and a potential fix:
 *       http://css-tricks.com/webkit-sibling-bug/
 */

#five:checked ~ .progress > .progress-bar,  {
  width: 5%;
  background-color: #f63a0f;
}

#twentyfive:checked ~ .progress > .progress-bar {
  width: 25%;
  background-color: #f27011;
}

#fifty:checked ~ .progress > .progress-bar {
  width: 50%;
  background-color: #f2b01e;
}

#seventyfive:checked ~ .progress > .progress-bar {
  width: 75%;
  background-color: #f2d31b;
}

#onehundred:checked ~ .progress > .progress-bar {
  width: 100%;
  background-color: #86e01e;
}

.radio { display: none; }

.label {
  display: inline-block;
  margin: 0 5px 20px;
  padding: 3px 8px;
  color: #aaa;
  text-shadow: 0 1px black;
  border-radius: 3px;
  cursor: pointer;

  .radio:checked + & {
    color: white;
    background: rgba(black, .25);
  }
}

 

Live-Beispiel

 

Weitere Informationen & Download

Allgemeine Infos

Mit dem oben stehenden Code kannst du somit ganz einfach einen animierten Fortschrittsbalken erstellen. Das Beispiel zeigt dabei zunächst nur die Möglichkeit, die dieses CSS Snippet bietet.

Der sinnvolle Einsatz auf deiner Website ist jedoch nicht schwierig. Nehmen wir bspw. mal an, dass du ein mehrseitiges Bestellformular besitzt, auf dem du den Fortschrittsbalken anzeigen möchtest. Du könntest dazu nun auf jeder Seite des Formulars den Balken mit einem gestiegenen Prozentwert darstellen. Das stellt dabei die einfachste Variante dar.

Eine andere Möglichkeit wäre es, den passenden Radio Button dabei mit einem Script zu aktivieren. Dadurch könntest du den Fortschrittsbalken dynamisch ändern lassen.

 

Download

Mit dem folgenden Link kannst du dir das Script dabei als ZIP-Datei herunterladen. Diese beinhaltet dazu alle Scripte und Grafiken, damit du das oben dargestellte Beispiel nachbauen kannst.

Download: animierter-fortschrittsbalken.zip (19 KB)

 

Ergänzende Artikel

Mit CSS lassen sich jedoch noch viele weitere Dinge erstellen. Du kannst bspw. ein Tabreiter-System mit CSS erstellen. Diese könntest du dabei durchaus mit den hier vorgestellten animierten Fortschrittsbalken verknüpfen.

Auf ansprechende Überschriften musst du dabei ebenfalls nicht verzichten. Das im genannten Artikel gezeigte Beispiel passt weiterhin grafisch ebenso zum hier gezeigten CSS Snippet.

 

Browser-Test

Das Snippet habe ich dabei in folgenden Browsern getestet:

  • Google Chrome 61
  • Mozilla Firefox 55
  • Microsoft Edge 40.15063
  • Internet Explorer 11
  • Google Chrome 60 (Android)

In den genannten Browsern funktionierte das Script dabei einwandfrei. Jedoch kann ich darüber hinaus leider nicht versichern, dass das Snippet auch mit älteren Browsern funktioniert. Ebenso kann ich leider nicht sagen, wie es mit hier nicht aufgelisteten Browsern aussieht.


Dir gefällt dieser Artikel?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.