Modul Kreiszähler

Modul Kreiszähler

Mit dem Kreiszähler-Modul kann man einfache Präsentationen von Zählwerten umsetzen. Angeben werden dabei:

1. Eine Zahl

2. Anzeige des Prozentezeichens (Ja/Nein)

3. Ein Titel bzw. ein Text unterhalb des Kreiszählers

Mit diesem einfachen Mittel lassen sich Zahlenwerte eindrucksvoll darstellen. Natürlich kann auf die HTML-Strutur per CSS zugegriffen werden.

 

Und so sieht das Modul aus…

%

Der Kreiszähler

Kreiszähler auf hellem Hintergrund

%

Beispiel 01

%

Beispiel 02

%

Beispiel 03

Beispiel 04

 

Kreiszähler auf dunklem Hintergrund

 

%

Beispiel 01

%

Beispiel 02

%

Beispiel 03

Beispiel 04

HTML Struktur

<div class=”et_pb_circle_counter container-width-change-notify et_pb_bg_layout_light” data-number-value=”100″ data-bar-bg-color=”#68140e”>
<div class=”percent”><p style=”visibility: visible;”><span class=”percent-value”>100</span></p></div>
<h3>Der Kreiszähler ohne %</h3>
<canvas height=”225″ width=”225″></canvas>
</div>

CSS Struktur

.et_pb_circle_counter .percent p {
font-size: 40px;
font-weight: 500;
line-height: 225px;
}