Как добавить в Weebly анимированный прогресс или панель навыков? »WebNots

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

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

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

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

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

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

• Заголовок с фиксированным цветом фона, управляемый в CSS
• Анимация индикатора выполнения, управляемая в jQuery с шириной, определенной в HTML
• Процент текста, контролируемый в HTML