css样式写一个半环形进度条

img1.png
<div class="r-2">
  <div class="top">
     <div class="top-box">
         <div class="top-con" :style="'transform: rotate(0deg);'">
             <div class="yuan"></div>
         </div>
     <div class="top-back"></div>
   </div>
 </div>
</div>
.r-2{
                                        display: flex;
                                        flex-direction: column;
                                        align-items: center;
                                        margin: 0 .2rem;

                                        .top{
                                            width: 1.4rem;
                                            height: .7rem;
                                            padding-top: 0.1rem;
                                            box-sizing: border-box;
                                            overflow: hidden;
                                            position: relative;
                                            display: flex;
                                            align-items: flex-start;
                                            justify-content: center;

                                            .top-box{
                                                
                                                .top-back{
                                                    position: absolute;
                                                    top: 0.028rem;
                                                    left: 0.028rem;
                                                    width: 1.15rem;
                                                    height: 1.15rem;
                                                    border: dashed .01rem #ccc;
                                                    border-radius: 50%;
                                                    box-sizing: border-box;
                                                    z-index: 1;
                                                }
                                                .top-con{
                                                    width: 1.2rem;
                                                    height: 1.2rem;
                                                    border-top: dashed .05rem rgba($color: #000000, $alpha: 0);
                                                    border-right: dashed .05rem rgba($color: #000000, $alpha: 0);
                                                    border-left: .05rem solid #FFC50D;
                                                    border-bottom: .05rem solid #FFC50D;
                                                    border-radius: 50%;
                                                    box-sizing: border-box;
                                                    z-index: 3;
                                                    position: relative;
    
                                                    .yuan{
                                                        width: .1rem;
                                                        height: .1rem;
                                                        border-radius: .1rem;
                                                        border: solid .03rem #FFC50D;
                                                        position: absolute;
                                                        left: .095rem;
                                                        top: .095rem;
                                                        background-color: #fff;
                                                    }
                                                }
                                            }

                                        }

                                        .bot{
                                            margin-top: .05rem;
                                            font-size: .12rem;
                                            color: #333333;
                                            font-size: .16rem;
                                        }
                                    }
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容