Kreisförmige Prozentanzeige mit CSS3, keine Grafiken, kein JS

Percentage CSS3 Circle

Inspiriert duch bereits viele verfügbare jQuery Plugins für eine schicke und dynamische Prozentanzeige, habe ich mal eine rein auf CSS basierende Lösung für solche kreisförmigen Prozentanzeigen umgesetzt.

Browser Support

Moderne Browser können die runde Anzeige inkl. hover-Transitions korrekt darstellen. Im Detail sollte das Ganze im Firefox ab Version 4, Chrome ab Version 14, IE ab Version 9 (ohne Transition) und im Safari ab der Version 5.1 laufen. Auch in modernen mobilen Browsern schaut das Ganze sehr gut aus.
Demo CSS3 circle

Markup

Das Markup für die Anzeige ist recht einfach strukturiert, hier mal ein Beispiel:


<div class="c100 p50">
 <span>50%</span>
 <div class="slice">
  <div class="bar"></div>
  <div class="fill"></div>
 </div>
</div>

Stylesheets

Die entscheidenen und wichtigen Passagen und CSS-Techniken werde ich hier kurz erläutern.

Kreise per CSS erzeugen

Ein Element per CSS in Kreisform darzustellen ist denkbar einfach, hierfür setzt man den border-radius einfach auf 50%.


  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;

Runder Prozentbalken

Etwas schwieriger wird es bei der eigentlichen Anzeige des Prozent-Fortschritts als runder Balken. Hierfür kommt die CSS-Eigenschaft clip zum Einsatz. Mit clip kann man quasi den anzuzeigenden Ausschnitt eines Elementes bestimmen bzw. einschränken.

css-clip-view

Durch geschickte Positionierung, Überlagerung und Rotation des Kreises für die einzelnen Stufen, erhält man die Visualisierung der einzelnen Prozentschritte (0-100). Wie auf der Demo-Grafik zu erkennen, wird ein Kreis (div mit border-radius: 50%) über die clip Eigenschaft nur als Halbkreis dargestellt (pink). Dieser Halbkreis ist bei den ersten 50 Schritten (Prozent 0-50) immer nur auf der rechten Hälfte des Gesamtkreises (liegt im Hintergrund) sichtbar, dies geschieht ebenfalls über clip, und wird hierbei entsprechend rotiert.

Für alle Werte über 50% wird das Gleiche nun auf der linken Halbseite gemacht, zusätzlich wird rechts ein zweiter Halbkreis dargestellt der quais die Werte 1%-50% füllt.

Inspiration

Neben einigen interessanten und ziemlich coolen jQuery (Canvas) Lösungen wie z.B. Knob sollte hier noch die CSS Lösungen von Atomic Noggin Enterprises als Inspiration und Lösungsansatz erwähnt werden.

Dann viel Spass beim ausprobieren. Die Dateien (HTML/CSS/SASS) zum Download findet ihr auf der Demo-Seite.

Veröffentlicht von

FrontEnd-Entwickler bei der Lovion GmbH in Dortmund. Schwerpunkte sind neben HTML, CSS, JavaScript und CMS vor allem UI/UX und Grafikdesign/Marketing.

8 Kommentare » Schreibe einen Kommentar

  1. hallo, wie kann man einen zeilenumbruch machen, dh wenn ich in der mitt 33% schreiben will und gleich unter den 33% moöchte ich zum Beispiel Bananen stehen haben….wie geht das?? mit funktioniert es nicht

    • Bei der jetzigen Umsetzung ist das so erstmal nicht vorgesehen. Am besten fügst Du im Markup einfach noch ein span mit einer Klasse (z.B. label) hinzu, und positionierst das dann nochmal separat per CSS.

  2. Wow das ist der absolute Hammer! Das war mit Sicherheit unglaublich viel Arbeit, aber es macht wirklich Spaß, sich solche Knobelaufgaben auszuarbeiten!

    Viel Erfolg noch und Danke =)

  3. Brilliant code but having problems compiling from SASS. Line 10 //@import „compass“; – this file isn’t included in the source code.

  4. Hello,
    And super css work.
    I have a question I would like to remove the white background to add transparency and that I just have the gray border and then the color of the percentage come over.

    Thank you

Schreibe einen Kommentar

Pflichtfelder sind mit * markiert.