vue实现概念进度条效果
代码语言:html
所属分类:加载滚动
代码描述:vue实现概念进度条效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Oswald"); .progress-arc { pointer-events: none; position: relative; max-width: 35vw; font-family: "Oswald", sans-serif; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; } .progress-arc svg { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .progress-arc--value { fill: var(--color); text-anchor: middle; dominant-baseline: central; font-size: 50%; } .progress-arc--value--bg { fill: none; stroke: var(--color); stroke-width: 2.5; } .progress-arc--value--mask { fill: black; stroke: black; stroke-width: 0; } .progress-arc--ring { fill: none; stroke: var(--color); opacity: .3; stroke-linecap: round; stroke-width: 6; -webkit-transform: rotate(-35deg); transform: rotate(-35deg); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; } .progress-arc--ring--current { opacity: 1; } .local-content { padding: 20%; font-size: 2vw; } .local-content * { margin: 0; } input { font-family: inherit; font-size: inherit; background: none; color: inherit; border: 0; } input + input { margin-left: 1em; } input[type="text"] { width: 100%; } input[type="text"], input[type="number"] { background: rgba(255, 255, 255, 0.3); .........完整代码请登录后点击上方下载按钮下载查看
网友评论0