Как добавить анимированную шкалу прогресса или навыков в Weebly?
Полосы прогресса или навыков представляют собой простые или анимированные полосы, обычно используемые для демонстрации данных с помощью горизонтальных полос. Индикаторы выполнения полезны во многих сценариях, например:
- Продемонстрируйте свои навыки на странице "Обо мне"
- Продемонстрируйте навыки члена вашей команды
- Сравнение набора атрибутов, например сравнение всех бесплатных инструментов для создания сайтов в масштабе 100%.
В этой статье мы объясним, как добавить полосу прогресса или навыков на сайт Weebly с анимацией jQuery при загрузке. Ознакомьтесь с этой статьей, если вы хотите добавить круговую диаграмму прогресса в WEebly.
Добавление анимированной панели выполнения jQuery
Индикатор выполнения будет выглядеть, как показано ниже. Он создается с помощью CSS и jQuery, которые будут автоматически анимированы до указанного процента при загрузке страницы.
Он состоит из трех основных компонентов:
- Заголовок с фиксированным цветом фона, управляемый в CSS
- Анимация индикатора выполнения, управляемая в jQuery с шириной, определенной в HTML
- Процент текста, контролируемый в HTML
Примечание. Рекомендуется размещать виджет вверху страницы, чтобы анимация была видна пользователям.
CSS для анимированной панели выполнения jQuery
Добавьте приведенный ниже CSS в раздел «Код заголовка» на странице или на уровне сайта. Вы также можете добавить код в файл «main.less» без тегов.
<style>
.progressbar {
position:relative;
display:block;
margin-bottom:15px;
width:100%;
background:#eee;
height:35px;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
-webkit-transition:0.4s linear;
-moz-transition:0.4s linear;
-ms-transition:0.4s linear;
-o-transition:0.4s linear;
transition:0.4s linear;
-webkit-transition-property:width, background-color;
-moz-transition-property:width, background-color;
-ms-transition-property:width, background-color;
-o-transition-property:width, background-color;
transition-property:width, background-color;
}
.progressbar-title {
position:absolute;
top:0;
left:0;
width:170px;
font-weight:600;
font-size:16px;
color:#ffffff;
background:#93ab3a;
-webkit-border-top-left-radius:3px;
-webkit-border-bottom-left-radius:4px;
-moz-border-radius-topleft:3px;
-moz-border-radius-bottomleft:3px;
border-top-left-radius:3px;
border-bottom-left-radius:3px;
}
.progressbar-title span {
display:block;
background:rgba(0, 0, 0, 0.1);
padding:0 20px;
height:35px;
line-height:35px;
-webkit-border-top-left-radius:3px;
-webkit-border-bottom-left-radius:3px;
-moz-border-radius-topleft:3px;
-moz-border-radius-bottomleft:3px;
border-top-left-radius:3px;
border-bottom-left-radius:3px;
}
.progressbar-bar {
height:35px;
width:0px;
background:#6adcfa;
border-radius:3px;
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
.progress-bar-percent {
position:absolute;
right:10px;
top:0;
font-size:15px;
height:35px;
line-height:35px;
color:#ffffff;
color:rgba(0, 0, 0, 0.4);
}
</style>Как упоминалось выше, фон заголовка фиксируется с помощью «background: # 93ab3a;» атрибут, определенный в классе «.progressbar-title».
Скрипт для jQuery Animated Progress Bar
Добавьте приведенный ниже сценарий в раздел «Код нижнего колонтитула» страницы, на которой вы хотите добавить индикатор выполнения.
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('.progressbar').each(function(){
jQuery(this).find('.progressbar-bar').animate({
width:jQuery(this).attr('data-percent')
},6000);
});
});
</script>Скорость анимации определяется как 6000 мс, которую можно изменить, чтобы увеличить или уменьшить скорость (чем ниже значение, тем выше скорость).
HTML для индикатора выполнения автоматической загрузки
Последняя часть – это HTML-код, добавьте следующий HTML-код в элемент «Embed Code» на своей странице Weebly:
<!-- Start of 1 progress Bar -->
<div class="progressbar clearfix " data-percent="60%">
<div class="progressbar-title"><span>SEO</span></div>
<div class="progressbar-bar" style="background: #e67e22;"></div>
<div class="progress-bar-percent">60%</div>
</div>
<!-- End of 1 progress Bar -->
<!-- Start of 2 progress Bar -->
<div class="progressbar clearfix " data-percent="75%">
<div class="progressbar-title"><span>Web Design</span></div>
<div class="progressbar-bar" style="background: #3498db;"></div>
<div class="progress-bar-percent">75%</div>
</div>
<!-- End of 2 progress Bar -->
<!-- Start of 3 progress Bar -->
<div class="progressbar clearfix " data-percent="70%">
<div class="progressbar-title"><span>Weebly Design</span></div>
<div class="progressbar-bar" style="background: #2c3e50;"></div>
<div class="progress-bar-percent">70%</div>
</div>
<!-- End of 3 progress Bar -->
<!-- Start of 4 progress Bar -->
<div class="progressbar clearfix " data-percent="60%">
<div class="progressbar-title"><span>WordPress Design</span></div>
<div class="progressbar-bar" style="background: #5a68a5;"></div>
<div class="progress-bar-percent">60%</div>
</div>
<!-- End of 4 progress Bar -->
<!-- Start of 5 progress Bar -->
<div class="progressbar clearfix " data-percent="65%">
<div class="progressbar-title"><span>Content Writing</span></div>
<div class="progressbar-bar" style="background: #525252;"></div>
<div class="progress-bar-percent">65%</div>
</div>
<!-- End of 5 progress Bar -->
<!-- Start of 6 progress Bar -->
<div class="progressbar clearfix " data-percent="100%">
<div class="progressbar-title"><span>Blog Consulting</span></div>
<div class="progressbar-bar" style="background: #2ecc71;"></div>
<div class="progress-bar-percent">100%</div>
</div>
<!-- End of 6 progress Bar -->
<!-- Start of 7 progress Bar -->
<div class="progressbar clearfix " data-percent="70%">
<div class="progressbar-title"><span>Plugin Development</span></div>
<div class="progressbar-bar" style="background: #4288d0;"></div>
<div class="progress-bar-percent">70%</div>
</div>
<!-- End of 7 progress Bar -->Каждый штрих-код выполнения закомментирован в начальном и конечном блоке, вы можете скопировать / вставить блок, чтобы добавить дополнительные полосы.
Настройка HTML-кода для индикаторов выполнения
На рисунке ниже показано, как каждая строка кода HTML влияет на компоненты индикатора выполнения:
Пояснение HTML-кода индикатора выполнения
Источник записи: www.webnots.com