предисловие
В некоторых интерфейсных проектах они будут включать функцию загрузки/выгрузки файлов.Когда файл выгружается/выгружается, как мы можем лучше предоставить пользователю обратную связь о ходе выполнения? Наши общие индикаторы — это всплывающие индикаторы выполнения, индикаторы выполнения на потолке...
Эта глава принесет ваминдикатор выполнения кнопки, и проведу вас шаг за шагом от нуля до индикатора выполнения рукописной кнопки 👨💻
Нечего сказать, сначала посмотрите на готовый продукт, а затем кодируйте
добиться эффекта
принцип
СоздаватьdivКак и вся кнопка, вставьте кнопку3индивидуальныйdiv, которые являются элементом индикатора выполнения, элементом значка и текстовым элементом. Мы устанавливаем для кнопки относительное позиционирование, а для элемента индикатора выполнения — абсолютное позиционирование, используяtopа такжеleftЗначение для управления панелью прогресса, давайте использовать код!
Реализовать с помощью кода
Закодируйте базовый стиль
<div class="button">
<span class="text">download</span>
</div>
.button {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 160px;
height: 40px;
color: black;
background: white;
border-radius: 10px;
margin: 0 15px;
font-size: 18px;
text-decoration: none;
overflow: hidden;
}
Вскоре базовый стиль нашей кнопки был написан, а затем мы сначала реализуем эффект индикатора выполнения, в.buttonСоздайте элемент подspanметка и привязать предыдущуюprogressИмя класса в качестве элемента индикатора выполнения. Псевдоэлементы здесь использовать нельзя, потому что позже нам нужно будет использоватьJavaScriptконтролировать состояние кнопки. в то время как псевдоэлементы не могут быть переданы черезJavaScriptнашел.
В будущем я опубликую статью о псевдоэлементах, подписывайтесь на меня и не теряйтесь 😉 😉
<div class="button">
<span class="text">download</span>
<span class="progress"></span>
</div>
Напишите стиль элемента индикатора выполнения
.progress {
content: '';
position: absolute;
top: 90%;
left: -100%;
width: 100%;
height: 100%;
background: #4776E6;
background: -webkit-linear-gradient(to right, #8E54E9, #4776E6);
background: linear-gradient(to right, #8E54E9, #4776E6);
transition: all 4s;
}
Давайте положимoverflowизhiddenатрибут закомментирован, теперь вы можете видеть.progressЭлемент расположен в левом нижнем углу элемента кнопки. незащищенный10%Высота кнопки отображается в видимом диапазоне кнопки. Позже мы проходимJavaScriptизAPIполучить.progressэлемент, управляющийleftЗначение может достичь эффекта индикатора выполнения!
Закодируйте эффект загрузки
Мы используемJavaScriptсерединаquerySelectorAllметод, получить.buttonа также.progressэлементы и.textэлемент.
const btn = document.querySelectorAll('.button')[0];
const pr = document.querySelectorAll('.progress')[0];
const text = document.querySelectorAll('.text')[0];
Дать.buttonЭлемент добавляет событие щелчка, когда кнопка нажата, мыleftустановлено значение0Это прогресс100%Эффект.
btn.addEventListener('click', () => {
pr.style.left = '0';
});
Затем мы помещаем элемент кнопкиoverflowсвойство установлено наhiddenВремя.
На этом этапе мы завершили создание эффекта индикатора выполнения, но сравнительный рендеринг все еще немного хуже.100%После этого нам нужно.progressэлементальtopустановлено значение0, чтобы переместить весь блок вверх. Добавьте следующий код после события клика:
setTimeout(() => {
pr.style.top = '0';
pr.style.transitionDuration = '1s';
text.style.color = 'white';
text.innerText = 'downloaded';
}, 4000);
Кроме того, в.progressКогда элемент перемещается вверх, он помещает наш.textналоженный элемент, для этого нам нужно.textуровень повышен.
.text{
z-index: 10;
}
значок импорта
существуетHTMLвведен вfont awesomeэта библиотека иконок.
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.3/css/all.css" rel="stylesheet">
Иконки, которые нам нужно использовать:
<i class="fa fa-arrow-down" aria-hidden="true"></i>
<i class="fa fa-download" aria-hidden="true"></i>
<i class="fa fa-check" aria-hidden="true"></i>
мы в.buttonвставьте это в элементiэтикетка, так что значок не покрывается элементом прогресса, также установить уровень для10.
<i class="fa fa-arrow-down" aria-hidden="true"></i>
i {
margin: 0 8px 0 0;
font-size: 16px;
z-index: 10;
}
Установите зацикливающуюся анимацию для этого значка, чтобы привлечь внимание пользователя и предложить щелкнуть по нему.
@keyframes tapDownload {
0% {
transform: translateY(2px);
}
100% {
transform: translateY(0);
}
}
.fa-arrow-down{
animation: tapDownload 1s ease infinite;
}
После добавления этого динамического эффекта пользователь будет больше кликать?
Динамически меняйте значки
Так же мы используемJavaScriptсерединаquerySelectorAllметод, получитьiconэлемент.
const icon = document.querySelectorAll('.fa')[0];
Сравнив три приведенных выше элемента значка, мы обнаружим, что все они имеют общий класс с именем fa, а разница заключается в задней части.fa-*Для этого класса при изменении состояния кнопки удалите соответствующее имя класса, а затем добавьте новое имя класса. Добавьте следующий код в событие нажатия кнопки:
btn.addEventListener('click', () => {
pr.style.left = '0';
icon.classList.remove('fa-arrow-down');
icon.classList.add('fa-download');
text.innerText = 'downloading';
setTimeout(() => {
// 忽略了一些代码
icon.style.color = 'white';
icon.classList.remove('fa-download');
icon.classList.add('fa-check');
}, 4000);
});
В процессе загрузки мы присваиваем значку загрузки значокfa-downloadКласс для привязки анимации кадра.
@keyframes downloading {
0% {
transform: scale(.7);
}
100% {
transform: scale(1);
}
}
.fa-download {
animation: downloading 1s ease infinite alternate-reverse;
}
наконец
Эта статья проведет вас от нуля до кнопки индикатора выполнения, используя интерфейс из трех частей.HTML CSS JavaScriptРазработка кнопок индикатора выполнения. также представилfont awesomeбиблиотека. Я надеюсь, что каждый сможет что-то извлечь из этого и написать более качественные и крутые анимационные эффекты,
😉 Если статья была вам полезна, ставьте лайк 😉