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

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

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

Виджет создается путем модификации бесплатного плагина jQuery easy pie chart и добавления в него пользовательского скрипта и CSS. Он имеет следующие особенности:

• Полностью отзывчивый на всех устройствах.
• Укажите любой процент для прогресса, если вы не хотите, чтобы символ% удалял его из файла сценария.
• Настройте цвета круга, анимацию прогресса и шипы.
• Поместите график в любое место, виджет будет анимироваться при прокрутке.

Загрузите исходные файлы и следуйте пошаговой инструкции ниже, чтобы добавить виджет на свой сайт Weebly. ZIP-архив содержит следующие файлы:

• jquery.min.js — это файл jQuery, необходимый только для работы демонстрации. Поскольку Weebly по умолчанию использует библиотеку jQuery, этот файл не требуется на вашем сайте Weebly.
• jquery.easypiechart.min.js — это базовый файл сценария, и пользовательский сценарий также добавляется в этот файл, чтобы сделать его единым источником.
• Круговая диаграмма прогресса.html — это демонстрационная HTML-страница, содержащая CSS и HTML-код.

Добавление виджета в Weebly

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

<script src="https://www.webnots.com/animated-progress-pie-chart-widget-for-weebly/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) + '%');

Вы можете удалить%, чтобы удалить его с отображения диаграммы, а управление оставшимися переменными выглядит следующим образом:

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

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

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

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

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