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