js+css实现漂亮带进度的文件上传对话框弹出层代码
代码语言：html
所属分类：上传
代码描述：js+css实现漂亮带进度的文件上传对话框弹出层代码
代码标签： js css 漂亮 进度 文件 上传 对话框 弹出层 代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
* {
border: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--hue: 223;
--bg: hsl(var(--hue),10%,85%);
--fg: hsl(var(--hue),10%,5%);
--trans-dur: 0.3s;
font-size: calc(16px + (20 - 16) * (100vw - 320px) / (2560 - 320));
}
body,
button {
font: 1em/1.5 Nunito, Helvetica, sans-serif;
}
body {
background-color: var(--bg);
color: var(--fg);
height: 100vh;
display: grid;
place-items: center;
transition:
background-color var(--trans-dur),
color var(--trans-dur);
}
.modal {
background-color: hsl(var(--hue),10%,95%);
border-radius: 1em;
box-shadow: 0 0.75em 1em hsla(var(--hue),10%,5%,0.3);
color: hsl(var(--hue),10%,5%);
width: calc(100% - 3em);
max-width: 34.5em;
overflow: hidden;
position: relative;
transition:
background-color var(--trans-dur),
color var(--trans-dur);
}
.modal:before {
background-color: hsl(223,90%,60%);
border-radius: 50%;
content: "";
filter: blur(60px);
opacity: 0.15;
position: absolute;
top: -8em;
right: -15em;
width: 25em;
height: 25em;
z-index: 0;
transition: background-color var(--trans-dur);
}
.modal__actions {
animation-delay: 0.2s;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.modal__body,
.modal__header {
position: relative;
z-index: 1;
}
.modal__body {
display: flex;
flex-direction: column;
padding: 0 2em 1.875em 1.875em;
}
.modal__button,
.modal__close-button {
color: currentColor;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.modal__button {
background-color: hsla(var(--hue),10%,50%,0.2);
border-radius: 0.25rem;
font-size: 0.75em;
padding: 0.5rem 2rem;
transition:
background-color var(--trans-dur),
border-color var(--trans-dur),
opacity var(--trans-dur);
width: 100%;
}
.modal__button + .modal__button {
margin-top: 0.75em;
}
.modal__button:disabled {
opacity: 0.5;
}
.modal__button:focus,
.modal__close-button:focus {
outline: transparent;
}
.modal__button:hover,
.modal__button:focus-visible {
background-color: hsla(var(--hue),10%,60%,0.2);
}
.modal__button--upload {
background-color: transparent;
border: 0.125rem dashed hsla(var(--hue),10%,50%,0.4);
flex: 1;
padding: 0.375rem 2rem;
}
.modal__col + .modal__col {
flex: 1;
margin-top: 1.875em;
}
.modal__close-button,
.modal__message,
.modal__progress-value {
color: hsl(var(--hue),10%,30%);
transition: color var(--trans-dur);
}
.modal__close-button {
background-color: transparent;
display: flex;
width: 1.5em;
height: 1.5em;
transition: color var(--trans-dur);
}
.modal__close-button:hover,
.modal__close-button:focus-visible {
color: hsl(var(--hue),10%,40%);
}
.modal__close-icon {
display: block;
margin: auto;
pointer-events: none;
width: 50%;
height: auto;
}
.modal__content > * {
/* don’t use shorthand syntax, or actions delay will be overridden */
animation-name: fadeSlideIn;
animation-duration: 0.5s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
opacity: 0;
}
.modal__file {
flex: 1;
font-size: 0.75em;
font-weight: 700;
margin-right: 0.25rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.modal__file ~ .modal__button {
margin-top: 1.5em;
}
.modal__file-icon {
color: hsl(var(--hue),10%,50%);
display: block;
margin-right: 0.75em;
width: 1.5em;
height: 1.5em;
transition: color var(--trans-dur);
}
.modal__header {
display: flex;
justify-content: flex-end;
align-items: center;
height: 2.5em;
padding: 0.5em;
}
.modal__icon {
display: block;
margin: auto;
width: 2.25em;
height: 2.25em;
}
.modal__icon--blue g {
stroke: hsl(223,90%,50%);
}
.modal__icon--red g {
stroke: hsl(3,90%,50%);
}
.modal__icon--green g {
stroke: hsl(138,90%,40%);
}
.modal__icon circle,
.modal__icon line,
.modal__icon polyline {
animation: sdo 0.25s ease-in-out forwards;
transition: stroke var(--trans-dur);
}
.modal__icon :nth-child(2) {
animation-delay: 0.25s;
}
.modal__icon :nth-child(3) {
animation-delay: 0.5s;
}
.modal__icon-sdo10 {
stroke-dashoffset: 10;
}
.modal__icon-sdo14 {
stroke-dashoffset: 14.2;
}
.modal__icon-sdo69 {
stroke-dashoffset: 69.12;
transform: rotate(-90deg);
transform-origin: 12px 12px;
}
.modal__message {
animation-delay: 0.1s;
font-size: 1em;
margin-bottom: 1.5em;
min-height: 3em;
}
.modal__progress {
flex: 1;
}
.modal__progress + .modal__button {
margin-top: 1.75em;
}
.modal__progress-bar {
background-image: linear-gradient(90deg,hsl(var(--hue),90%,50%),hsl(var(--hue),90%,70%));
border-radius: 0.2em;
overflow: hidden;
width: 100%;
height: 0.4em;
transform: translate3d(0,0,0);
}
.modal__progress-fill {
background-color: hsl(var(--hue),10%,90%);
width: inherit;
height: inherit;
transition: transform 0.1s ease-in-out;
}
.modal__progress-value {
font-size: 0.75em;
font-weight: 700;
line-height: 1.333;
text-align: right;
}
.modal__sr {
overflow: hidden;
position: absolute;
width: 1px;
height: 1px;
}
.modal__title {
font-size: 1.25em;
font-weight: 500;
line-height: 1.2;
margin-bottom: 1.5rem;
text-align: center;
}
/* state change */
[data-state="2"]:before {
background-color: hsl(3,90%,60%);
}
[data-state="3"]:before {
background-color: hsl(138,90%,60%);
}
.modal__icon + .modal__icon,
[data-state="1"] .modal__icon:first-child,
[data-state="2"] .modal__icon:first-child,
[data-state="3"] .modal__icon:first-child,
.modal__content + .modal__content,
[data-state="1"] .modal__content:first-child,
[data-state="2"] .modal__content:first-child,
[data-state="3"] .modal__content:first-child {
display: none;
}
[data-state="1"] .modal__icon:first-child,
[data-state="2"] .modal__icon:nth-child(2),
[data-state="3"] .modal__icon:nth-child(3),
[data-state="1"] .modal__content:nth-child(2),
[data-state="2"] .modal__content:nth-child(3),
[data-state="3"] .modal__content:nth-child(4) {
display: block;
}
[data-ready="false"] .modal__content:first-child .modal__actions:nth-of-type(2),
[data-ready="true"] .modal__content:first-child .modal__actions:first-of-type {
display: none;
}
[data-ready="true"] .modal__content:first-child .modal__actions:nth-of-type(2) {
display: flex;
}
/* Dark theme */
@media (prefers-color-scheme: dark) {
:root {
--bg: hsl(var(--hue),10%,35%);
--fg: hsl(var(--hue),10%,95%);
}
.modal {
background-color: hsl(var(--hue),10%,10%);
color: hsl(var(--hue),10%,95%);
}
.modal__close-button,
.modal__message,
.modal__progress-value {
color: hsl(var(--hue),10%,70%);
}
.modal__close-button:hover,
.modal__close-button:focus-visible {
color: hsl(var(--hue),10%,80%);
}
.modal__file-icon {
color: hsl(var(--hue),10%,60%);
}
.modal__icon--blue g {
stroke: hsl(223,90%,60%);
}
.modal__icon--red g {
stroke: hsl(3,90%,60%);
}
.modal__icon--green g {
stroke: hsl(138,90%,60%);
}
.modal__progress-fill {
background-color: hsl(var(--hue),10%,20%);
}
}
/* Animations */
@keyframes fadeSlideIn {
from { opacity: 0; transform: translateY(33%); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes sdo {
to { stroke-dashoffset: 0; }
}
/* Beyond mobile */
@media (min-width: 768px) {
.modal__actions--center {
justify-content: center;
margin-left: -4.125em;
}
.modal__body {
flex-direction: row;
align-items: center;
}
.modal__button {
width: auto;
}
.modal__button + .modal__button {
margin-top: 0;
margin-left: 1.5rem;
}
.modal__file ~ .modal__button {
margin-top: 0;
}
.modal__file ~ .modal__close-button {
margin-right: 1.5rem;
}
.modal__progress {
margin-right: 2em;
}
.modal__progress + .modal__button {
margin-top: 0;
}
.modal__col + .modal__col {
margin-top: 0;
margin-left: 1.875em;
}
.modal__title {
text-align: left;
}
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<div id="upload" class="modal" data-state="0" data-ready="false">
<div class="modal__header">
<button class="modal__close-button" type="button">
<svg class="modal__close-icon" viewBox="0 0 16 16" width="16px" height="16px" aria-hidden="true">
<g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round">
<polyline points="1,1 15,15" />
<polyline points="15,1 1,15" />
</g>
</svg>
<span class="modal__sr">Close</span>
</button>
</div>
<div class="modal__body">
<div class="modal__col">
<!-- up -->
<svg class="modal__icon modal__icon--blue" viewBox="0 0 24 24" width="24px" height="24px" aria-hidden="true">
<g fill="none" stroke="hsl(223,90%,50%)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle class="modal__icon-sdo69" cx="12" cy="12" r="11" stroke-dasharray="69.12 69.12" />
<polyline class="modal__icon-sdo14" points="7 12 12 7 17 12" stroke-dasharray="14.2 14.2" />
<line class="modal__icon-sdo10" x1="12" y1="7" x2="12" y2="17" stroke-dasharray="10 10" />
</g>
</svg>
<!-- error -->
<svg class="modal__icon modal__icon--red" viewBox="0 0 24 24" width="24px" height="24px" aria-hidden="true" display="none">
<g fill="none" stroke="hsl(3,90%,50%)" stroke-width="2" stroke-linecap="round">
<circle class=&.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0