react实现任务进度明细子任务状态改变效果代码
代码语言:html
所属分类:进度条
代码描述:react实现任务进度明细子任务状态改变效果代码
代码标签: react 任务 进度 明细 子任务 状态 改变
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,100..1000&display=swap'>
<style>
* {
border: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--hue: 223;
--white: hsl(0,0%,100%);
--gray1: hsl(var(--hue),10%,90%);
--gray2: hsl(var(--hue),10%,70%);
--gray3: hsl(var(--hue),10%,50%);
--gray4: hsl(var(--hue),10%,30%);
--gray5: hsl(var(--hue),10%,10%);
--black: hsl(0,0%,0%);
--bg: var(--white);
--fg: var(--gray5);
--focus: var(--gray3);
--success: hsl(163,90%,40%);
--trans-dur: 0.3s;
--ease-in-out: cubic-bezier(0.65,0,0.35,1);
font-size: calc(12px + (20 - 12) * (100vw - 240px) / (1920 - 240));
}
body,
button {
font: 1em/1.5 "DM Sans", sans-serif;
}
body {
background-color: var(--bg);
color: var(--fg);
display: flex;
height: 100vh;
transition: background-color var(--trans-dur), color var(--trans-dur);
}
button {
outline: transparent;
transition: background-color var(--trans-dur), color var(--trans-dur), box-shadow var(--trans-dur);
-webkit-appearance: none;
appearance: none;
-webkit-tap-highlight-color: transparent;
}
main {
display: flex;
overflow-x: hidden;
padding: 1.5em 0;
width: 100vw;
height: 100vh;
}
svg polyline {
transition: stroke var(--trans-dur);
}
.onboarding {
margin: auto;
position: relative;
width: 100%;
max-width: 24em;
}
.onboarding h2 {
font-size: 1.25em;
line-height: 1.2;
}
.onboarding p {
color: var(--gray4);
transition: color var(--trans-dur);
}
.onboarding__button {
background-color: var(--gray5);
border-radius: 1.5em;
box-shadow: 0 0 0 0.25em transparent;
color: var(--bg);
cursor: pointer;
padding: 0.75em 1.875em;
}
.onboarding__button:focus-visible, .onboarding__button:hover {
background-color: var(--black);
}
.onboarding__button:focus-visible {
box-shadow: 0 0 0 0.25em var(--focus);
}
.onboarding__icon, .onboarding__progress {
display: block;
overflow: visible;
transition: opacity var(--trans-dur);
}
.onboarding__icon {
width: 1em;
height: 1em;
}
.onboarding__icon--success {
color: var(--success);
}
.onboarding__progress {
width: 1.5em;
height: 1.5em;
}
.onboarding__progress-track {
stroke: var(--gray1);
transition: stroke var(--trans-dur);
}
.onboarding__finish-step {
position: relative;
}
.onboarding__finish-step-phase {
display: flex;
gap: 1.5em;
transition: visibility var(--trans-dur) step-start;
}
.onboarding__finish-step-phase ~ .onboarding__finish-step-phase {
position: absolute;
inset: 0;
}
.onboarding__finish-step-text {
opacity: 0.5;
transition: opacity var(--trans-dur);
}
.onboarding__finish-step--current .onboarding__finish-step-phase:nth-child(2), .onboarding__finish-step--done .onboarding__finish-step-phase:nth-child(1), .onboarding__finish-step--waiting .onboarding__finish-step-phase:nth-child(2) {
visibility: hidden;
transition-timing-function: step-end;
}
.onboarding__finish-step--current .onboarding__finish-step-phase:nth-child(2) svg, .onboarding__finish-step--current .onboarding__finish-step-phase:nth-child(2) .onboarding__finish-step-text, .onboarding__finish-step--done .onboarding__finish-step-phase:nth-child(1) svg, .onboarding__finish-step--done .onboarding__finish-step-phase:nth-child(1) .onboarding__finish-step-text, .onboarding__finish-step--waiting .onboarding__finish-step-phase:nth-child(2) svg, .onboarding__finish-step--waiting .onboarding__finish-step-phase:nth-child(2) .onboarding__finish-step-text {
opacity: 0;
}
.onboarding__finish-step--current .onboarding__finish-step-phase:nth-child(1) svg, .onboarding__finish-step--current .onboarding__finish-step-phase:nth-child(1) .onboarding__finish-step-text {
opacity: 1;
}
.onboarding__finish-steps {
display: grid;
gap: 3em;
padding: 1.5em;
}
.onboarding__finish-steps--done {
animation: fade var(--trans-dur) linear forwards;
}
.onboarding__finish-steps .onboarding__icon {
margin: 0.25em;
}
.onboarding__finished {
animation: fade var(--trans-dur) linear forwards reverse;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 1.5em 3em;
position: absolute;
inset: 0;
text-align: center;
visibility: hidden;
}
.onboarding__finished h2 {
margin-bottom: 0.75rem;
}
.onboarding__finished p {
margin-bottom: 2.25em;
}
.onboarding__finished .onboarding__icon {
margin-bottom: 1.75em;
width: 2em;
height: 2em;
}
.onboarding--resetting .onboarding__icon, .onboarding--resetting .onboarding__progress, .onboarding--resetting .onboarding__finish-step-text {
transition-duration: 0s;
}
/* Dark theme */
@media (prefers-color-scheme: dark) {
:root {
--bg: var(--gray5);
--fg: var(--gray1);
}
.onboarding p {
color: var(--gray2);
}
.onboardin.........完整代码请登录后点击上方下载按钮下载查看
网友评论0