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

Как добавить анимированную шкалу прогресса или навыков в Weebly?

24

Полосы прогресса или навыков представляют собой простые или анимированные полосы, обычно используемые для демонстрации данных с помощью горизонтальных полос. Индикаторы выполнения полезны во многих сценариях, например:

  • Продемонстрируйте свои навыки на странице "Обо мне"
  • Продемонстрируйте навыки члена вашей команды
  • Сравнение набора атрибутов, например сравнение всех бесплатных инструментов для создания сайтов в масштабе 100%.

В этой статье мы объясним, как добавить полосу прогресса или навыков на сайт Weebly с анимацией jQuery при загрузке. Ознакомьтесь с этой статьей, если вы хотите добавить круговую диаграмму прогресса в WEebly.

Добавление анимированной панели выполнения jQuery

Индикатор выполнения будет выглядеть, как показано ниже. Он создается с помощью CSS и jQuery, которые будут автоматически анимированы до указанного процента при загрузке страницы.

Как добавить анимированную шкалу прогресса или навыков в Weebly?

Он состоит из трех основных компонентов:

  • Заголовок с фиксированным цветом фона, управляемый в 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 влияет на компоненты индикатора выполнения:

Как добавить анимированную шкалу прогресса или навыков в Weebly?

Пояснение HTML-кода индикатора выполнения

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

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