TechBlogSD - Все для WordPress і WEB розробки
WEB і WordPress інструкції, новини, огляди тем та плагінів

Анімований віджет кругової діаграми прогресу для Weebly

0

Індикатори прогресу використовуються для демонстрації навичок та інших даних у зображеному вигляді, щоб користувачі могли швидко зрозуміти дані. У нашій попередній статті ми бачили, як створювати горизонтальні смуги прогресу, і в цьому підручнику давайте перевіримо спосіб створення анімованого віджета кругової діаграми прогресу для сайту Weebly. З багатьох доступних опцій простий плагін кругової діаграми – це один із простих способів створення діаграм прогресу кругових. Віджет буде виглядати приблизно так, як показано нижче, і ви можете налаштувати кольори та вміст відповідно до ваших потреб.

Анімований віджет кругової діаграми прогресу для Weebly

Завантажте вихідні файли, щоб створити цей віджет на своєму сайті.

Віджет створюється шляхом зміни безкоштовного плагіна jQuery easy pie chart та додавання до нього власного сценарію та CSS. Він має такі особливості:

  • Повністю реагує на всі пристрої.
  • Вкажіть будь -який відсоток прогресу, якщо ви не хочете, щоб символ % видалив його з файлу сценарію.
  • Налаштуйте кольори кола, анімацію прогресу та шипи.
  • Розмістіть діаграму на будь -якому місці, віджет анімуватиметься при прокручуванні.

Завантажте вихідні файли та дотримуйтесь наведених нижче покрокових інструкцій, щоб додати віджет на свій сайт Weebly. Завантажити zip -файл містить такі файли:

  • jquery.min.js – це файл jQuery, необхідний лише для демонстрації. Оскільки Weebly використовує бібліотеку jQuery за замовчуванням, цей файл не потрібен на вашому веб -сайті Weebly.
  • jquery.easypiechart.min.js – це базовий файл сценарію, і власний сценарій також додається всередину цього файлу, щоб зробити його єдиним джерелом.
  • Progress Pie Chart.html – це демонстраційна HTML -сторінка, що містить CSS та HTML -код.

Додавання віджета у Weebly

Спочатку завантажте файл jquery.easypiechart.min.js на свій сайт Weebly у розділі «Тема> Редагувати HTML / CSS > Активи». Пов’яжіть сценарій із потрібною сторінкою у розділі «Сторінки> Виберіть сторінку> Додатково> Код заголовка », додавши код нижче:

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

CSS містить три основні компоненти-контейнер, окремі кругові блоки та діаграму, керовану за допомогою .chart-container, .pr-chart-ctrl та .pr-chart відповідно.

Додайте такий CSS (доступний із діаграмою прогресу кругової діаграми.html) у розділі "Сторінки> Виберіть сторінку> Налаштування SEO> Код нижнього колонтитула".

<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>

Завершальна частина полягає в тому, щоб додати нижченаведений HTML всередині елемента " Вбудовувати код ". Ви можете замінити фіктивні відсотки та заголовки своїми.

<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>

Налаштування віджета

Файл jquery.easypiechart.min.js містить наведений нижче сценарій для керування поведінкою анімації прогресу пирога.

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) + '%');

Ви можете видалити %, щоб видалити його з дисплея діаграми, а контроль інших змінних виглядає нижче:

Змінна

Контроль

розмір Визначте розмір кола кругової діаграми.
barColor Колір анімації прогресу.
trackColor Колір круга пирога.
scaleColor Колір шипів.
scaleLength Довжина шипів.
lineWidth Ширина кола кругової діаграми прогресу.
lineCap Анімація завершення прогресу, можливі значення – круглі, квадратні та встик.

Кругова діаграма з параллаксами по всій ширині

Додавання вищезазначеного віджета за допомогою елемента вбудовування коду зробить його виглядом простим. Ви можете створити красиву паралаксну кругову діаграму, використовуючи елемент розділу, як показано нижче:

Анімований віджет кругової діаграми прогресу для Weebly

Кругова діаграма Weebly Parallax

Дотримуйтесь наведених нижче вказівок, щоб створити кругову діаграму з фоном паралаксного зображення.

  • Перетягніть елемент розділу. Натисніть на елемент розділу в області вмісту, а потім натисніть опцію «Редагувати фон».
  • Виберіть зображення як фон і встановіть ефект прокрутки як паралакс. Ви також можете встановити колірний фон, а відеодоступ доступний лише для професійних користувачів.
  • Тепер перетягніть елемент коду для вбудовування та додайте код HTML, як зазначено у розділі вище.
  • Опублікуйте свій сайт і перегляньте анімовану кругову діаграму з фоном паралаксного зображення.

Джерело запису: webnots.com
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі