圆环进度条 两种实现方式

分类：CSS作者：nicepainkiller

先看图效果图：

这边UI的 设计图 长这样

 

 一个圆环的进度展示，这个圆环上开始位置 是齐口的，终点圆口，并且有一个圆；

列举了两种实现方式：

  • 第一种 纯的CSS实现；原理是 叠加 和 旋转 而成。缺点在某些机型上面应为遮罩没有对齐（uniapp 半个像素不显示的问题，其他平台没有这问题），会出现白边（没有遮挡好的情况）
  •  第二种 createCanvasContext 直接画弧线；动态计算原点位置 叠加 显示

第一种实现方式 

理论上：纯css  两个半圆在相应的取值范围内 旋转，旋转的时候被父对象 遮罩剩余的部分

第一步： 两个半圆在旋转，旋转时候被父对象 clip 掉 剩余部分，两个红色底就是两个半圆的父元素，红色第里面的两个深色块就是 将要旋转的 元素；

<view class="box0-parent">
  <view class="box0" :style="box0Style">
  </view>
</view>
<view class="box1-parent">
  <view class="box1" :style="box1Style">
  </view>
</view>


.box0-parent {
  position: absolute;
  top: 580rpx;
  width: 284rpx;
  height: 284rpx;
  background-color: #dd2124;
  clip: rect(0px,142rpx,284rpx,0px);

  // border-radius: 50%;
  .box0 {
    position: absolute;
    top: 0;
    width: 284rpx;
    height: 284rpx;
    background-color: #2C405A;
    clip: rect(0px,0px);
    border-radius: 50%;
  }
}

.box1-parent {
  position: absolute;
  top: 580rpx;
  width: 284rpx;
  height: 284rpx;
  background-color: #c34c24;
  clip: rect(0px,142rpx);
  // border-radius: 50%;

  .box1 {
    position: absolute;
    top: 0;
    width: 284rpx;
    height: 284rpx;
    background-color: #5a4600;
    clip: rect(0px,142rpx);
    border-radius: 50%;
    // transform: rotate(60deg);
  }
}

 第二步： 调整下参数； 再调下颜色

<template>
  <view class="process">

    <view class="box0-parent">
      <view class="box0" :style="box0Style">
      </view>
    </view>
    <view class="box1-parent">
      <view class="box1" :style="box1Style">
      </view>
    </view>

    <view class="input-range">
      <text> {{percent}}%</text> <text style="margin-left: 100rpx;">{{percent*3.6}}</text>
      <slider @changing="onChange" value="0" max="100" min="0" v-model="percent" activeColor="#FFCC33"
        backgroundColor="#000000" block-color="#8A6DE9"></slider>
    </view>


  </view>

</template>

<script>
 
  export default {
    data() {
      return {
        percent: 30,}
    },computed: {
      box0Style() {
        if (this.percent >= 50) {
          return `transform: rotate(${180 + this.percent*3.6}deg)`
        } else {
          return ``
        }
      },box1Style() {
        if (this.percent <= 50) {
          return `transform: rotate(${this.percent*3.6}deg)`
        } else {
          return `display: none;`
        }
      }
    },methods: {
      onChange(value) {
        // console.log(value.detail.value)
        this.percent = value.detail.value
      }
    }
  }
</script>

<style lang="scss" scoped>
  .process {
    width: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;


    .input-range {
      position: absolute;
      top: 980rpx;
      width: 300rpx;
    }

    .box0-parent {
      position: absolute;
      top: 580rpx;
      width: 284rpx;
      height: 284rpx;
      background-color: #dd2124;
      clip: rect(0px,0px);

      // border-radius: 50%;
      .box0 {
        position: absolute;
        top: 0;
        width: 284rpx;
        height: 284rpx;
        //background-color: #2C405A;
        background-color: #2168F9;
        clip: rect(0px,0px);
        border-radius: 50%;
      }
    }

    .box1-parent {
      position: absolute;
      top: 580rpx;
      width: 284rpx;
      height: 284rpx;
      //background-color: #c34c24;
      background-color: #dd2124;
      // background-color: #2168F9;
      clip: rect(0px,142rpx);
      // border-radius: 50%;

      .box1 {
        position: absolute;
        top: 0;
        width: 284rpx;
        height: 284rpx;
        // background-color: #5a4600;
        background-color: #2168F9;
        clip: rect(0px,142rpx);
        border-radius: 50%;
        // transform: rotate(60deg);
      }
    }

  }
</style>

然后加上蓝色底色，圆环换上白色；真理下就能得到这么的 圆环了；

至于 白色圆点  直接绝对定位于半圆， 随着半圆移动即可；每个半圆都有一个

第二种实现方式

使用的是 canvas 中的 arc  （画弧线来实现的）

uni.createCanvasContext

https://uniapp.dcloud.io/api/canvas/CanvasContext.html


<canvas class="canvas-content" :canvas-id="canvasId" :id="canvasId">
</canvas>

methods: {
  onChange(value) {
    // console.log(value.detail.value)
    this.percent = value.detail.value
    this.drawCircleByProgress()
  },drawCircleByProgress(){
    // 表示进度的两端为圆形  目前没有找到只设置一段的方式
    this.canvasContent.setLineCap('round'); //圆形     
    this.canvasContent.setLineCap('square'); //方形
    // 设置线条的宽度和颜色
    this.canvasContent.setLineWidth(uni.upx2px(30));
    this.canvasContent.setStrokeStyle('#ff0000');
          
    let endAngle = ((2 * Math.PI) / 100) * this.percent + this.startAngle;
    
    this.canvasContent.beginPath();
    // 半径为整个canvas宽度的一半
    let radius = uni.upx2px(284) / 2;
    this.canvasContent.arc(radius,radius,radius - uni.upx2px(30),this.startAngle,endAngle,false);
    this.canvasContent.stroke();
    
    this.canvasContent.draw();
  }
}

.canvas-content{
  width: 284rpx;
  height: 284rpx;
  background-color: #059cdd;
}

这种方式对于圆环中的 画一个白色球； 需要通过 弧度计算圆上一点的位置；

drawCircleByProgress() {
  // 表示进度的两端为圆形  目前没有找到只设置一段的方式
  this.canvasContent.setLineCap('round'); //圆形     
  this.canvasContent.setLineCap('square'); //方形

  let width = uni.upx2px(30)

  // 设置线条的宽度和颜色
  this.canvasContent.setLineWidth(width);
  this.canvasContent.setStrokeStyle('#ff0000');


  // 画圆环
  let endAngle = ((2 * Math.PI) / 100) * this.percent + this.startAngle;
  this.canvasContent.beginPath();
  // 半径为整个canvas宽度的一半
  let radius = uni.upx2px(284) / 2;
  this.canvasContent.arc(radius,radius - width,false);
  this.canvasContent.stroke();



  //原点要在 圆弧前面一点点的位置 所有这个加了 0.1；
  let p0x = radius + Math.cos(endAngle + .1) * (radius - width)
  let p0y = radius + Math.sin(endAngle + .1) * (radius - width)
  // 画圆球
  this.canvasContent.beginPath()
  this.canvasContent.arc(p0x,p0y,width / 2,2 * Math.PI)
  this.canvasContent.setFillStyle('#F0AD4E');
  this.canvasContent.fill()
  // 画白色圆球
  this.canvasContent.beginPath()
  this.canvasContent.arc(p0x,width * 0.4,2 * Math.PI)
  this.canvasContent.setFillStyle('#FFFFFF');
  this.canvasContent.fill()

  this.canvasContent.draw();
}

真理下就能得到下面的例子了

完整代码：

<template>
  <view class="process">

    <canvas class="canvas-content" :canvas-id="canvasId" :id="canvasId">
    </canvas>

    <view class="box0-parent">
      <view class="box0" :style="box0Style">
      </view>
    </view>
    <view class="box1-parent">
      <view class="box1" :style="box1Style">
      </view>
    </view>
    <view class="input-range">
      <text> {{percent}}%</text> <text style="margin-left: 100rpx;">{{percent*3.6}}</text>
      <slider @changing="onChange" value="0" max="100" min="0" v-model="percent" activeColor="#FFCC33"
        backgroundColor="#000000" block-color="#8A6DE9"></slider>
    </view>

  </view>
</template>

<script>
  export default {
    data() {
      return {
        percent: 30,canvasId: 'canvasId',canvasContent: null,startAngle: -Math.PI / 2,//canvas画圆的起始角度，默认为3点钟方向即90度 方向，定位位到12位置 0度
      }
    },onShow() {
      this.canvasContent = uni.createCanvasContext(this.canvasId,this)
      this.drawCircleByProgress()
    },methods: {
      onChange(value) {
        // console.log(value.detail.value)
        this.percent = value.detail.value
        this.drawCircleByProgress()
      },drawCircleByProgress() {
        // 表示进度的两端为圆形  目前没有找到只设置一段的方式
        this.canvasContent.setLineCap('round'); //圆形     
        this.canvasContent.setLineCap('square'); //方形

        let width = uni.upx2px(30)

        // 设置线条的宽度和颜色
        this.canvasContent.setLineWidth(width);
        this.canvasContent.setStrokeStyle('#ff0000');

        let endAngle = ((2 * Math.PI) / 100) * this.percent + this.startAngle;

        this.canvasContent.beginPath();
        // 半径为整个canvas宽度的一半
        let radius = uni.upx2px(284) / 2;
        this.canvasContent.arc(radius,false);
        this.canvasContent.stroke();

        //原点要在 圆弧前面一点点的位置 所有这个加了 0.1；
        let p0x = radius + Math.cos(endAngle + .1) * (radius - width)
        let p0y = radius + Math.sin(endAngle + .1) * (radius - width)


        this.canvasContent.beginPath()
        this.canvasContent.arc(p0x,2 * Math.PI)
        this.canvasContent.setFillStyle('#F0AD4E');
        this.canvasContent.fill()

        this.canvasContent.beginPath()
        this.canvasContent.arc(p0x,2 * Math.PI)
        this.canvasContent.setFillStyle('#FFFFFF');
        this.canvasContent.fill()

        this.canvasContent.draw();
      }
    }
  }
</script>

<style lang="scss" scoped>
  .process {
    width: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .canvas-content {
      width: 284rpx;
      height: 284rpx;
      background-color: #059cdd;
    }

    .input-range {
      position: absolute;
      top: 750rpx;
      width: 300rpx;
    }

    .box0-parent {
      position: absolute;
      top: 380rpx;
      width: 284rpx;
      height: 284rpx;
      background-color: #dd2124;
      clip: rect(0px,0px);
        border-radius: 50%;
      }
    }

    .box1-parent {
      position: absolute;
      top: 380rpx;
      width: 284rpx;
      height: 284rpx;
      //background-color: #c34c24;
      background-color: #dd2124;
      // background-color: #2168F9;
      clip: rect(0px,142rpx);

      // border-radius: 50%;
      .box1 {
        position: absolute;
        top: 0;
        width: 284rpx;
        height: 284rpx;
        // background-color: #5a4600;
        background-color: #2168F9;
        clip: rect(0px,142rpx);
        border-radius: 50%;
        // transform: rotate(60deg);
      }
    }

  }
</style>

原文地址：https://johns.blog.csdn.net

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

Css常用的排序方式权重分配
Css常用的排序方式权重分配 排序方式： 1、按类型&#160;如，显示和浮动、定位、尺寸、字体等 2、按字母&#160;按字母顺序排列，优点是规则简单 3、按定义长度&#160;按照样式定义的字符长度排列 各有优劣，实际应用中，推荐使用第一种。&#160;但是如果单靠前端工程师在编写过程中这么做的
用CSS实现一个抽奖转盘
原文：https://www.cnblogs.com/wenruo/p/9732704.html 先上效果 基本是用CSS实现的，没有用图片，加一丢丢JS。不过没有考虑太多兼容性。 首先画一个 &lt;!DOCTYPE html&gt;&lt;html lang=&quot;en&quot;&gt;
css属性：word-wrap:break-word; 与 word-break:break-all 的用法；
css属性：word-wrap:break-word; 与 word-break:break-all 的用法； zhangq0123 于 2016-10-19 11:06:12 发布 6475 收藏 9分类专栏： CSS HTML 文章标签： html css版权 CSS同时被 2 个专栏收录8 篇
颜色插件网
https://destiny001.gitee.io/color/
jq动态插入数据和设置最后一个标签样式
&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt; &l
css之background的cover和contain的缩放背景图
css之background的cover和contain的缩放背景图 对于这两个属性，官网是这样解释的： contain 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。 等比例缩放图象到垂直或者水平其中一项填满区域。 cover 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景
.CSS.MAP文件作用
.CSS.MAP文件作用 https://blog.csdn.net/qq_36441169/article/details/102575563 1、简介在写前端代码，使用bootstrap时，发现同一个目录下，不仅仅有.css文件的同时，还存在.css.map文件的存在。在前端页面调试时也发现，映
Jquery mobile 写html时文字太长无法自动换行
Jquery mobile 写html时文字太长无法自动换行。 Jquery mobile 1 篇文章0 订阅 订阅专栏 加上这个 style=&quot;word-wrap:break-word;word-break:break-all;&quot; 或者 style=&quot;word-wra
各种手册（layui手册、jq手册、css、js、ES6）
详见：http://www.shagua.wiki/project/3 layui图标：http://www.shagua.wiki/project/3?p=85 JQ手册 ：https://www.jc2182.com/jquery/jquery-jiaocheng.html css样式手册：ht
css里面圆形的代码,如何使用纯css实现圆形图像？（代码实例）
css里面圆形的代码,如何使用纯css实现圆形图像或叶子图像？（代码实例） 网易美学于&#160;2021-08-03 22:15:22&#160;发布946&#160;收藏 文章标签：&#160;css里面圆形的代码 有没有想过如何制作那些各式各样的圆形图像而无需用ps，本篇文章就来给你介绍一下如
css文字超出一行就显示省略号
css文字超出一行就显示省略号 1，css超出一行用点表示 white-space:nowrap; overflow:hidden; text-overflow:ellipsis; 2，css超出二行用点表示 overflow:hidden; text-overflow:ellipsis; disp
js动态追加数据单独设置某一个元素的样式
js动态追加数据单独设置某一个元素的样式。 在开发时，我们有很多数据是从后台获取然后展示的，例如列表，最近开发碰到个需求是获取到列表信息之后，不仅仅是拼接展示出来，还需要将其中的第一个li元素设置成其他的样式类，在网上找了一堆的办法都和自身业务需求不一致，没办法自己通过chrome控制台一点点调试，
css3手机端h5商品列表页，两列等分排列技巧
css3手机端h5商品列表页，两列等分排列技巧 .picture_list {&#x9;width: 100%;&#x9;overflow: hidden}.picture_list&gt;li {&#x9;width: 50%; min-height: 120px;&#x9;float: left;&#x9;padding: 0px 3
css3 transform:scale(x)实现字体的缩放：
css3 transform:scale(x)实现字体的缩放： css3 transform:scale(x)字体的缩放： transform:scale(x),针对于整体的缩放，缩放的整体包括宽，高，背景。这自然对于内联元素就无法使用此属性，最好使用无属性的span转换成块元素或者行内块元素进行设
jq获取第一个子元素并添加class
jq获取第一个子元素并添加class &lt;div class=&quot;main&quot;&gt; &lt;div class=&quot;tit&quot;&gt;颜色&lt;/div&gt; &lt;ul&gt; &lt;li&gt;银色&lt;/li&gt; &lt;li&gt;深灰色
设置背景图片的两种方式，并解决手机端背景图片高度自适应问题
设置背景图片的两种方式，并解决手机端背景图片高度自适应问题 赵世婷&#160;2017-09-19 15:59:43 14372 收藏&#160;5 1 设置背景图片的两种方式： 方式一： .back{undefinedposition: fixed;width: 100%;height: 100%
css层级选择器理论（为优化尽量减少层级选择器）
css层级选择器理论{#ek) E:first-child : 匹配的是E元素，E元素是父元素的第一个子元素 说明：利用 :first-child 这个伪类，只有当元素是另一个元素的第一个子元素时才能匹配。例如，p:first-child 会选择作为另外某个元素第一个子元素的所有 p 元素。一般可能
Css多行字符截取方法详解
Css多行字符截取方法详解 时间：2021-07-01 10:21:17 相信有很多同学在写前端页面的时候，都会遇到字符长了需要截取的问题，最简单的方法就是手动去截取，可这样又感觉太low了，今天晚上就来讲讲利用css进行字符的截取，不了解css是如何截取的同学可以和我们一起看看哦！ 前言 最近在做
css中content可以用到的字符编码
css中content可以用到的字符编码 项目中用到的一些特殊字符和图标 html代码 &lt;div class=&quot;cross&quot;&gt;&lt;/div&gt; css代码.cross{width: 20px;height: 20px;border-radius: 10px;b
CSS 计算属性 calc()的完整指南(上）
CSS 计算属性 calc()的完整指南(上） 2020-05-03 CSS tricks上有一系列的完整指南文章，我后面会翻译这些内容，更新不会一下子完成，而是会分成几个，防止自己因看到文章过长而放弃翻译，一步一个脚印。 CSS有一个特殊的calc()函数，用于做基本的数学运算。下面是一个例子：
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot