javascript - 我需要制作一个带有圆形末端的圆形进度条
问题描述
我需要创建一个圆形进度条。突出显示的段有一个轮廓,端点是圆形的,如下所示:
我做了这个,但我无法创建进度段线的圆形边缘。
.pie {
display: inline-block;
margin: .5em;
width: 8em;
height: 8em;
position: relative;
border-radius: 50%;
}
.pie:after {
border-radius: 50%;
display: block;
content: "";
background: #fff;
position: absolute;
left: .5em;
top: .5em;
height: 7em;
width: 7em;
}
.p1 {
background-image: linear-gradient(-30deg, #ddd 50%, transparent 50%),
linear-gradient(90deg, #ddd 50%, steelblue 50%);
}
<div class="pie p1"></div>
解决方案
简单的方法使用svg和circle。圆圈具有stroke-linecap: round
您所需要的属性。并且可以使用属性控制进度条stroke-dashoffset
。
*,
::after,
::before {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
'Open Sans', 'Helvetica Neue', sans-serif;
}
body {
width: 100vw;
height: 100vh;
display: grid;
place-items: center;
color: hsl(231, 9%, 16%);
background-color: hsl(240, 20%, 98%);
position: relative;
}
section {
display: flex;
flex-flow: column;
align-items: center;
gap: .5rem;
}
h3,
span {
line-height: 1;
}
section span {
font-size: 2em;
font-weight: 500;
}
div {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
h3 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 2.5em;
}
svg {
height: 150px;
width: 150px;
transform: rotate(0deg);
}
#progress,
#progress-border,
#track,
#border-track {
fill: transparent;
}
#progress {
stroke: hsl(161, 100%, 43%);
stroke-width: 14px;
stroke-linecap: round;
stroke-dasharray: 440;
stroke-dashoffset: 140; /* Change number value to shift progress bar */
}
#progress-border {
stroke: hsl(161, 100%, 37%);
stroke-width: 10px;
stroke-linecap: round;
stroke-dasharray: 440;
stroke-dashoffset: 140; /* Change number value to shift progress bar */
}
#track {
stroke: hsl(0, 0%, 100%);
stroke-width: 10px;
}
#border-track {
stroke: hsl(0, 0%, 93%);
stroke-width: 12px;
}
<section>
<div>
<h3>Text</h3>
<svg>
<circle id="border-track" cx="75" cy="75" r="65"></circle>
<circle id="track" cx="75" cy="75" r="65"></circle>
<circle id="progress" cx="75" cy="75" r="65"></circle>
<circle id="progress-border" cx="75" cy="75" r="65"></circle>
</svg>
</div>
<span>70%</span>
</section>
推荐阅读
- android - Android 创建一个两个应用程序可以读取的文件
- sorting - 你如何分析这个排序算法的时间复杂度?
- react-native - VirtualizedLists 永远不应该嵌套错误
- javascript - 尽管处理它但在控制台上出现错误(MERN + Redux)
- python - 如何将情感分析模型应用于python中的1个scentence?
- javascript - 如何使这些输入可编辑但将它们设置为默认值 - 反应?
- r - 在R中编织到PDF时找不到参考
- javascript - React Native - 将 ActivityIndicator 重新定位到登录按钮
- javascript - addEventListener 不适用于 document.createElement 元素
- flutter - 如何在 List.map() 函数中等待未来并返回字符串列表