js通过HTMLElement继承实现上传进度条组件web component效果代码
代码语言:html
所属分类:进度条
代码描述:js通过HTMLElement继承实现上传进度条组件web component效果代码
代码标签: js 通过 HTMLElement 继承 上传 进度条 组件 web component 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono&display=swap" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/all.6.0.css">
<style>
:root {
--gray: #e7e5e8;
--white: #f8f8ff;
--green: #a2b883;
--purple: #8b7499;
--darkpurple: #951aa0;
--black: #0f030f;
--height: 0;
}
.skippy-link {
color: #ffffff;
}
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
background-color: var(--purple);
font-family: "JetBrains Mono", monospace;
color: var(--white);
font-size: 16px;
padding: 16px;
}
main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
}
h1 {
font-size: 24px;
text-align: center;
}
@media (min-width: 1024px) {
h1 {
font-size: 30px;
}
}
.page-title {
padding: 16px;
text-align: center;
}
</style>
</head>
<body translate=&.........完整代码请登录后点击上方下载按钮下载查看
网友评论0