js+css实现可变色拖动的圆环进度条效果代码
代码语言:html
所属分类:进度条
代码描述:js+css实现可变色拖动的圆环进度条效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/animate.4.1.1.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.5.0.0.css"> <style> @import url("https://fonts.googleapis.com/css2?family=Inter:wght@200;700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Poppins:ital@1&display=swap"); :root { --purple-a: #9e4bf6; --purple-b: #f1e5ff; --blue-a: #7681f7; --blue-b: #dce3ff; --pink-a: #e93f8e; --pink-b: #fce3f1; --esmerald-a: #34d399; --esmerald-b: #d1fae5; --orange-a: #fa8735; --orange-b: #ffeacf; } /*EXTRA*/ body { display: flex; min-height: 100vh; align-items: center; justify-content: space-around; flex-direction: column; background: linear-gradient(120deg, #212230, #0f0f15); } .box { background: white; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); padding: 25px 30px; box-shadow: rgba(0, 0, 0, 0.1); border-radius: 20px; } .colors { display: flex; justify-content: space-around; } .colors li { width: 32px; height: 32px; border-radius: 100%; border: 1px solid #ccc; cursor: pointer; } .colors li[data-color=purple] { background: var(--purple-a); } .colors li[data-color=blue] { background: var(--blue-a); } .colors li[data-color=pink] { background: var(--pink-a); } .colors li[data-color=orange] { background: var(--orange-a); } .colors li[data-color=esmerald] { background: var(--esmerald-a); } .colors li.active { cursor: default; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.3), inset 0 0 0 5px rgba(255, 255, 255, 0.9); } /*Component*/ .ep-svg { --progress: 250; --stroke-width: 10px; } .ep-svg .ep-circle { transition-timing-function: ease-in-out; } .ep-svg .ep-circle--empty { transition: all 700ms ease-in-out; stroke-width: var(--stroke-width); stroke: #f6f5f8; } .ep-svg .ep-circle--label { font-family: "Inter"; font-style: normal; font-weight: 400; font-size: 0.45rem; line-height: 160%; display: flex; align-items: center; fill: #606775; flex: none; order: 1; flex-grow: 0; } .ep-svg .ep-circle--value { font-family: "Inter"; font-style: normal; font-weight: 200; font-size: 1.1rem; line-height: 140%; text-align: center; color: #1d2530; flex: none; order: 0; flex-grow: 0; } .ep-svg .ep-circle--progress { transition: all 700ms ease-in-out 0s, opacity 0.3s 0s; stroke-dashoffset: var(--progress); transform-origin: 50% 50%; opacity: 1; -webkit-animation-duration: 700ms; animation-duration: 700ms; stroke-width: var(--stroke-width); stroke: #525252; } .ep-svg[data-color=purple] .ep-circle--progress { stroke: var(--purple-a); } .ep-svg[data-color=purple] .ep-circle--empty { stroke: var(--purple-b); } .ep-svg[data-color=pink] .ep-circle--progress { stroke: var(--pink-a); } .ep-svg[data-color=pink] .ep-circle--empty { stroke: var(--pink-b); } .ep-svg[data-color=blue] .ep-circle--progress { stroke: var(--blue-a); } .ep-svg[data-color=blue] .ep-circle--empty { stroke: var(--blue-b); } .ep-svg[data-color=esmerald] .ep-circle--progress { stroke: var(--esmerald-a); } .ep-svg[data-color=esmerald] .ep-circle--empty { stroke: var(--esmerald-b); } .ep-svg[data-color=orange] .ep-circle--progress { stroke: var(--orange-a); } .ep-svg[data-color=orange] .ep-circle--empty { stroke: var(--orange-b); } /*Dev*/ .dev { font-family:.........完整代码请登录后点击上方下载按钮下载查看
网友评论0