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

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

82

Индикаторы выполнения используются для демонстрации навыков и других данных в графическом представлении, чтобы пользователи могли быстро понять данные. В нашей предыдущей статье мы увидели, как создавать горизонтальные индикаторы выполнения, а в этом руководстве мы рассмотрим способ создания анимированного виджета круговой диаграммы прогресса для сайта Weebly. Из множества доступных вариантов плагин easy pie chart – один из простых способов создания круговых диаграмм прогресса. Виджет будет выглядеть примерно так, как показано ниже, и вы можете настроить цвета и содержимое в соответствии с вашими потребностями.

Анимированный виджет круговой диаграммы прогресса для 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 (доступен в Progress Pie Chart.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 Длина шипов.
ширина линии Ширина круга круговой диаграммы прогресса.
lineCap Конец анимации выполнения, возможные значения: круглый, квадратный и торцевой.

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

Добавление вышеупомянутого виджета с использованием элемента встроенного кода сделает его простым. Вы можете создать красивую круговую диаграмму параллакса, используя элемент раздела, как показано ниже:

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

Круговая диаграмма Weebly Parallax

Следуйте приведенным ниже инструкциям, чтобы создать круговую диаграмму с фоном изображения параллакса.

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

Источник записи: www.webnots.com
Leave A Reply

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее