实现环形进度条效果【一】

这篇具有很好参考价值的文章主要介绍了实现环形进度条效果【一】。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

好基友扔过来一张效果图,简单分析下,一起看看如何实现它吧。

实现环形进度条效果【一】

  1. 一个半环形用于表示 0 - 100%。
  2. 半环形开头有一个圆点作为修饰。
  3. 半环形两端需要呈现为圆角。

通过 div 实现

先画一个长方形。

<div class="graph"></div>
.graph {
  width: 200px;
  height: 100px;
  border: 20px solid rgb (58, 215, 217);
}

实现环形进度条效果【一】

接下来把长方形转换为半环形。

.graph {
   width: 200px;
   height: 100px;
   border: 20px solid rgb (58, 215, 217);
+  border-radius: 0 0 200px 200px;
+  border-top: none;
}

实现环形进度条效果【一】

给环形开头添加圆点修饰,实际等于添加到长方形的左上角。

<div class="graph">
+  <div class="dot"></div>
</div>
.graph {
+ position: relative;
  width: 200px;
  height: 100px;
  border: 20px solid rgb (58, 215, 217);
  border-radius: 0 0 200px 200px;
  border-top: none;
}

+.dot {
+  position: absolute;
+  top: 5px;
+  left: -15px;
+  z-index: 9999;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background-color: #fff;
+  transform-origin: center top;
+}

实现环形进度条效果【一】
实现环形进度条效果【一】

环形有了,如何实现进度条效果呢?让半环形旋转,并隐藏超出部分。可以给元素添加 transform 使其旋转。

.graph {
  position: relative;
  width: 200px;
  height: 100px;
  border: 20px solid rgb (58, 215, 217);
  border-radius: 0 0 200px 200px;
  border-top: none;
+ transform: rotate (150deg);
}

实现环形进度条效果【一】

半环形并没有根据中心点旋转,通过 transform-origin: center top 设置原点为中间顶部,即环形的中心。

实现环形进度条效果【一】

.graph {
  position: relative;
  width: 200px;
  height: 100px;
  border: 20px solid rgb (58, 215, 217);
  border-radius: 0 0 200px 200px;
  border-top: none;
+ transform-origin: center top;
  transform: rotate (150deg);
}

实现环形进度条效果【一】

给环形添加一个父元素,并设置超出部分隐藏。

<div class="graph-wrapper">
  <div class="graph">
    <div class="dot"></div>
  </div>
</div>
.graph-wrapper {
  width: 200px;
  height: 100px;
  overflow: hidden;
  transform: rotate (90deg);
}

实现环形进度条效果【一】

动态设置环形元素的 rotate 角度实就可以实现进度条效果了。0 - 100% 对应 180 - 360deg。

实现环形进度条效果【一】

可以通过 JavaScript 设置半环形的进度。

function calculateValue(range, percentage) {
  const  [start, end] = range
  const result = start + (end - start) * percentage / 100;
  return result;
}

function renderGraph(percentage) {
  const deg = calculateValue ([180, 360], percentage);
  const el = document.querySelector ('.graph')
  el.style.transform = `rotate (${deg}deg)`
}

renderGraph (30) // 30%

总结

我们先使用 div 画了一个长方形,添加 borderborder-radius 属性使其转换为半环形,又通过 transform 属性使半环形可以旋转。接下来给半环形套了一层元素,超出部分隐藏,以实现进度条效果。

在博文开头处,我们对效果图进行了分析。其中,第 3 点 “半环形两端需要呈现为圆角” 还没有被支持。限于篇幅,将在接下来的博文中实现,最终效果如下图。

实现环形进度条效果【一】文章来源地址https://www.toymoban.com/news/detail-747180.html

到了这里,关于实现环形进度条效果【一】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包