TechBlogSD - Alles für WordPress und WEB-Entwicklung
WEB- und WordPress-Anleitungen, Neuigkeiten, Rezensionen zu Themes und Plugins

Animiertes Fortschritts-Kreisdiagramm-Widget für Weebly

39

Fortschrittsbalken werden verwendet, um Fähigkeiten und andere Daten in einer bildlichen Ansicht darzustellen, damit Benutzer die Daten schnell verstehen können. In unserem vorherigen Artikel hatten wir gesehen, wie man horizontale Fortschrittsbalken erstellt und in diesem Tutorial sehen wir uns an, wie man ein animiertes Fortschritts-Kreisdiagramm-Widget für die Weebly-Site erstellt. Aus vielen verfügbaren Optionen ist das einfache Tortendiagramm-Plugin eine der einfachen Möglichkeiten, Tortenverlaufsdiagramme zu erstellen. Das Widget sieht in etwa wie folgt aus und Sie können die Farben und den Inhalt nach Ihren Wünschen anpassen.

Animiertes Fortschritts-Kreisdiagramm-Widget für Weebly

Laden Sie Quelldateien herunter, um dieses Widget auf Ihrer Website zu erstellen.

Das Widget wird erstellt, indem das kostenlose jQuery Easy Tortendiagramm-Plugin modifiziert und benutzerdefiniertes Skript und CSS hinzugefügt werden. Es hat die folgenden Funktionen:

  • Vollständig reaktionsschnell auf allen Geräten.
  • Geben Sie einen beliebigen Prozentsatz für den Fortschritt an, wenn Sie nicht möchten, dass das %-Symbol aus der Skriptdatei entfernt wird.
  • Passen Sie die Farben des Kreises, der Fortschrittsanimation und der Spitzen an.
  • Legen Sie das Diagramm auf jedem beliebigen Ort, Widget auf animieren blättern.

Laden Sie die Quelldateien herunter und befolgen Sie die unten stehende Schritt-für-Schritt-Anleitung, um das Widget zu Ihrer Weebly-Site hinzuzufügen. Der Zip-Download enthält folgende Dateien:

  • jquery.min.js – Dies ist eine jQuery-Datei, die nur benötigt wird, damit die Demo funktioniert. Da Weebly standardmäßig die jQuery-Bibliothek verwendet, ist diese Datei auf Ihrer Weebly-Site nicht erforderlich.
  • jquery.easypiechart.min.js – Dies ist die Basisskriptdatei und das benutzerdefinierte Skript wird ebenfalls in diese Datei eingefügt, um es als eine einzige Quelle zu erstellen.
  • Progress Pie Chart.html – Dies ist eine Demo-HTML-Seite, die das CSS und den HTML-Code enthält.

Hinzufügen des Widgets in Weebly

Laden Sie zunächst die Datei jquery.easypiechart.min.js auf Ihre Weebly-Site unter „Theme > HTML / CSS bearbeiten > Assets” hoch. Verknüpfen Sie das Skript mit der gewünschten Seite unter „Seiten > Seite auswählen > Erweitert > Header-Code “, indem unten Code:

<script src="files/theme/jquery.easypiechart.min.js"></script>

Das CSS enthält drei Hauptkomponenten – Container, einzelne Tortenblöcke und das Diagramm, das durch die Klassen .chart-container, .pr-chart-ctrl bzw. .pr-chart gesteuert wird.

Fügen Sie das folgende CSS (verfügbar mit Progress Pie Chart.html) im Abschnitt "Seiten > Seite auswählen > SEO-Einstellungen > Fußzeilencode" hinzu.

<style> .chart-container .pr-chart-ctrl { display:block; float:left; width:25%; } .chart-container .pr-chart-ctrl .pr-chart { display:block; position:relative; width:100%; margin:0 0 20px 0; text-align:center; margin-top: 30px; } .chart-container .pr-chart-ctrl .pr-chart canvas { display:block; margin:0 auto; padding:0; vertical-align:center; } .chart-container .pr-chart-ctrl .pr-chart i { position:absolute; top:0; left:0; width:100%; height:200px; line-height:200px; font-size:48px; font-style:normal; color: #808080; } .chart-container .pr-chart-ctrl p{ margin:0; padding:0; text-transform:uppercase; color:green; } @media screen and (max-width:500px) { .chart-container .pr-chart-ctrl { width:100%; margin-bottom:50px; } } @media screen and (min-width:501px) and (max-width:900px) { .chart-container .pr-chart-ctrl { width:50%; margin-bottom:50px; } } </style>

Der letzte Teil besteht darin, den unten stehenden HTML- Code in ein " Embed Code "-Element einzufügen. Sie können die Dummy-Prozentsätze und die Titel durch Ihre eigenen ersetzen.

<ul class="chart-container"> <li class="pr-chart-ctrl"> <div class="pr-chart" data-percent="25"><i></i></div> <p>WordPress Development</p> </li> <li class="pr-chart-ctrl"> <div class="pr-chart" data-percent="50"><i></i></div> <p>Weebly Development</p> </li> <li class="pr-chart-ctrl"> <div class="pr-chart" data-percent="75"><i></i></div> <p>Search Engine Optimization</p> </li> <li class="pr-chart-ctrl"> <div class="pr-chart" data-percent="100"><i></i></div> <p>Blog Consulting</p> </li> </ul>

Anpassen des Widgets

Die Datei jquery.easypiechart.min.js enthält das folgende Skript, um das Verhalten der Tortenfortschrittsanimation zu steuern.

size: 200, barColor: '#F85656', trackColor: '#f1f1f1', scaleColor: 'violet', scaleLength: 5, lineWidth: 5, lineCap: 'square', onStep: function(from, to, percent) { $(this.el).find('i').text(Math.round(percent) + '%');

Sie können den % entfernen, um ihn aus der Diagrammanzeige zu löschen, und die Steuerung der verbleibenden Variablen ist wie folgt:

Variable

Steuerung

Größe Definieren Sie die Größe des Kreisdiagramms.
Balkenfarbe Farbe der Fortschrittsanimation.
trackColor Farbe des Tortenkreises.
SkalaFarbe Farbe der Spikes.
Skalenlänge Länge der Spikes.
Linienbreite Breite des Kreisdiagramms für den Fortschritt.
lineCap Ende der Fortschrittsanimation, mögliche Werte sind Round, Square und Butt.

Parallaxen-Kreisdiagramm in voller Breite

Wenn Sie das obige Widget mit dem Einbettungscodeelement hinzufügen, sieht es einfach aus. Sie können ein schönes Parallax- Kreisdiagramm erstellen, indem Sie das Abschnittselement wie folgt verwenden:

Animiertes Fortschritts-Kreisdiagramm-Widget für Weebly

Weebly Parallax-Kreisdiagramm

Befolgen Sie die nachstehenden Anweisungen, um ein Tortendiagramm mit Parallax-Bildhintergrund zu erstellen.

  • Ziehen Sie ein Abschnittselement per Drag & Drop. Klicken Sie auf das Abschnittselement im Inhaltsbereich und dann auf die Option „Hintergrund bearbeiten”.
  • Wählen Sie ein Bild als Hintergrund und stellen Sie den Bildlaufeffekt als Parallaxe ein. Sie können auch einen farbigen Hintergrund festlegen und der Videohintergrund ist nur für Pro-Benutzer verfügbar.
  • Ziehen Sie nun ein Einbettungscodeelement per Drag & Drop und fügen Sie den HTML-Code wie im obigen Abschnitt beschrieben hinzu.
  • Veröffentlichen Sie Ihre Site und sehen Sie sich das animierte Tortendiagramm mit Parallax-Bildhintergrund an.

Aufnahmequelle: www.webnots.com
Hinterlasse eine Antwort

Diese Website verwendet Cookies, um Ihre Erfahrung zu verbessern. Wir gehen davon aus, dass Sie damit einverstanden sind, Sie können sich jedoch abmelden, wenn Sie möchten. Annehmen Weiterlesen