在上传(Upload)按钮上动画显示文件上传状态提示
作者:admin 时间:2023-2-2 16:57:13 浏览:在上传(Upload)按钮上面动画显示文件上传状态，这种设计比较新颖，比较少人使用，但这种设计挺有趣的，本文便给大家介绍一个实例。
实例介绍
点击Upload按钮时，按钮以动画方式显示“正在上传”的状态，待上传完毕（可用JS判断），按钮上显示“Done”的文字。
HTML代码
HTML使用一个button标签作为按钮，样式使用的类是upload-button。
button按钮标签内部使用了两个svg代码，第一个svg实现上传完毕后的提示，第二个svg是该按钮的画布。
class="default"这个div是默认状态显示；class="success"这个div是上传完毕状态显示；class="dots"这个div是上传过程状态提示。
<button class="upload-button">
<div class="default">
<div>Upload</div>
</div>
<div class="success">
<svg viewBox="0 0 13 10">
<path d="M1 5L4.66667 9L12 1" />
</svg>
<div>Done</div>
</div>
<div class="dots">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<svg viewBox="0 0 132 52">
<path
d="M2 11C2 7.13401 5.13401 4 9 4C12.866 4 39.7401 4 66 4C92.2599 4 119.134 4 123 4C126.866 4 130 7.13401 130 11V41C130 44.866 126.866 48 123 48C119.134 48 92.2599 48 66 48C39.7401 48 12.866 48 9 48C5.13401 48 2 44.866 2 41V11Z"
/>
</svg>
</button>
CSS代码
CSS代码主要是包含一个.upload-button的样式设计，包含各种状态的样式，如默认(.default)样式、成功(.success)样式、进行时(.dots)样式，还有svg画布的样式等等。
.upload-button {
font-family: "Poppins", Arial;
font-size: 16px;
font-weight: 600;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
color: #fff;
background: none;
border: none;
outline: none;
cursor: pointer;
width: 128px;
padding: 0;
margin: 0;
text-align: center;
line-height: 20px;
position: relative;
filter: drop-shadow(0px 4px 12px rgba(118, 70, 215, 0.1));
transform: translateZ(0);
}
.upload-button > svg {
display: block;
width: 132px;
height: 52px;
fill: #7646d7;
pointer-events: none;
margin: -4px -2px;
transition: fill 0.2s, transform 0.1s;
transform: translateZ(0);
}
.upload-button:hover > svg {
fill: #6f3bda;
}
.upload-button:active > svg {
transform: scale(0.975) translateZ(0);
}
.upload-button .default,
.upload-button .success {
top: 12px;
bottom: 12px;
left: 0;
right: 0;
position: absolute;
display: block;
z-index: 1;
}
.upload-button .default > div,
.upload-button .success > div {
display: inline-block;
vertical-align: top;
}
.upload-button .default > div > div span,
.upload-button .success > div > div span {
display: inline-block;
vertical-align: top;
transform-origin: 50% 100%;
transform: translateZ(0);
}
.upload-button .success svg {
width: 13px;
height: 10px;
fill: none;
stroke: currentColor;
stroke-linejoin: round;
stroke-linecap: round;
stroke-width: 2;
display: inline-block;
vertical-align: top;
margin: 5px 4px 5px 0;
stroke-dasharray: 17px;
stroke-dashoffset: 17px;
transform: translateZ(0);
}
.upload-button .success > div > div span {
opacity: 0;
transform: scale(0.25) translateZ(0);
}
.upload-button .dots {
top: 19px;
bottom: 19px;
left: 0;
right: 0;
position: absolute;
display: flex;
justify-content: center;
z-index: 1;
}
.upload-button .dots span {
display: block;
width: 6px;
height: 6px;
border-radius: 50%;
background-color: currentColor;
margin: 0 3px;
transform: translateY(6px) scale(0);
}JavaScript代码
该实例需要用到JS配合实现，还需要引用两个JS库文件（库文件已经包含在源码下载压缩包里）。
<script src='gsap.min.js'></script>
<script src='MorphSVGPlugin3.min.js'></script>
const { to, set } = gsap;
gsap.registerPlugin(MorphSVGPlugin);
document.querySelectorAll(".upload-button").forEach(button => {
const path = button.querySelector(":scope > svg path");
const dots = button.querySelectorAll(".dots span");
button.
querySelectorAll(".default > div, .success > div").
forEach(
(state) =>
state.innerHTML =
"<div><span>" +
state.textContent.trim().split("").join("</span><span>") +
"</span></div>");
const defaultLetters = button.querySelectorAll(".default span");
const successLetters = button.querySelectorAll(".success span");
const successTick = button.querySelector(".success svg");
const reset = () => {
to(successTick, {
strokeDashoffset: "17px",
duration: 0.15 });
to(successLetters, {
stagger: 0.075,
scale: 0.25,
opacity: 0,
duration: 0.15,
onComplete: () => {
to(defaultLetters, {
stagger: 0.075,
scale: 1,
opacity: 1,
duration: 0.15,
onComplete: () => button.active = false });
} });
};
button.addEventListener("click", () => {
if (button.active) {
return;
}
button.active = true;
to([...defaultLetters].reverse(), {
stagger: 0.075,
keyframes: [
{
scale: 1.075,
duration: 0.15 },
{
scale: 0.2,
opacity: 0,
duration: 0.2 }],
onComplete: () => {
to(dots, {
stagger: 0.075,
keyframes: [
{
y: -5,
scale: 1,
duration: 0.25 },
{
y: 5,
duration: 0.25 },
{
y: -5,
duration: 0.25 },
{
y: 5,
duration: 0.25 },
{
y: -5,
duration: 0.25 },
{
y: 5,
scale: 0,
duration: 0.25 }] });
to(path, {
keyframes: [
{
duration: 0.25,
morphSVG:
"M2 11C2 7.13405 5.13401 5.00004 9 4.00004C12.866 3.00004 39.7401 -1.99996 66 4.00004C92.2599 10 119.134 5.00004 123 4.00004C126.866 3.00004 130 7.13405 130 11V41C130 44.866 126.866 47 123 48C119.134 49 92.2599 54 66 48C39.7401 42 12.866 47 9 48C5.13401 49 2 44.866 2 41V11Z" },
{
duration: 0.25,
morphSVG:
"M2 11C2 7.13405 5.13401 3.00004 9 4.00004C12.866 5.00004 39.7401 10 66 4.00004C92.2599 -1.99996 119.134 3.00004 123 4.00004C126.866 5.00004 130 7.13405 130 11V41C130 44.866 126.866 49 123 48C119.134 47 92.2599 42 66 48C39.7401 54 12.866 49 9 48C5.13401 47 2 44.866 2 41V11Z" },
{
duration: 0.25,
morphSVG:
"M2 11C2 7.13405 5.13401 5.00004 9 4.00004C12.866 3.00004 39.7401 -1.99996 66 4.00004C92.2599 10 119.134 5.00004 123 4.00004C126.866 3.00004 130 7.13405 130 11V41C130 44.866 126.866 47 123 48C119.134 49 92.2599 54 66 48C39.7401 42 12.866 47 9 48C5.13401 49 2 44.866 2 41V11Z" },
{
duration: 0.25,
morphSVG:
"M2 11C2 7.13405 5.13401 3.00004 9 4.00004C12.866 5.00004 39.7401 10 66 4.00004C92.2599 -1.99996 119.134 3.00004 123 4.00004C126.866 5.00004 130 7.13405 130 11V41C130 44.866 126.866 49 123 48C119.134 47 92.2599 42 66 48C39.7401 54 12.866 49 9 48C5.13401 47 2 44.866 2 41V11Z" },
{
duration: 0.25,
morphSVG:
"M2 11C2 7.13405 5.13401 5.00004 9 4.00004C12.866 3.00004 39.7401 -1.99996 66 4.00004C92.2599 10 119.134 5.00004 123 4.00004C126.866 3.00004 130 7.13405 130 11V41C130 44.866 126.866 47 123 48C119.134 49 92.2599 54 66 48C39.7401 42 12.866 47 9 48C5.13401 49 2 44.866 2 41V11Z" },
{
duration: 0.25,
morphSVG:
"M2 11C2 7.13401 5.13401 4 9 4C12.866 4 39.7401 4 66 4C92.2599 4 119.134 4 123 4C126.866 4 130 7.13401 130 11V41C130 44.866 126.866 48 123 48C119.134 48 92.2599 48 66 48C39.7401 48 12.866 48 9 48C5.13401 48 2 44.866 2 41V11Z" }],
onComplete: () => {
to(successTick, {
strokeDashoffset: "0px",
duration: 0.2,
onComplete: () => {
to(successLetters, {
stagger: 0.075,
keyframes: [
{
scale: 1.1,
opacity: 1,
duration: 0.15 },
{
scale: 1,
duration: 0.15 }],
onComplete: () => {
to(button, {
keyframes: [
{
scale: 1.05,
duration: 0.15 },
{
scale: 1,
duration: 0.1,
clearProps: true }],
onComplete: () => {
setTimeout(reset, 2000);
} });
} });
} });
} });
} });
});
});总结
本文介绍了在上传(Upload)按钮上动画显示文件上传状态提示，喜欢的朋友可以收藏，或下载源码直接使用。
相关文章
标签: 文件上传按钮
相关文章
x
- 站长推荐
