zoukankan      html  css  js  c++  java
  • 圆形进度条css样式

    HTML代码

    <view class="con">
                        <view class="percent-circle percent-circle-left">
                            <view class="left-content"></view>
                        </view>
                        <view class="percent-circle percent-circle-right">
                            <view style="transform: rotate(30deg);" class="right-content">        
                            </view>
                        </view>
                        <view class="text-circle">30%</view>
    </view>        

    CSS代码

    以下样式100upx是50upx的2倍,这是尺寸比例
    .con {
            position: relative;
            display: inline-block;
            height: 100upx;
            width: 100upx;
        }
    
        .percent-circle {
            position: absolute;
            height: 100%;
            background: #46A4DA;//走过的进度条颜色
            overflow: hidden;
        }
    
        .percent-circle-right {
            right: 0;
            width: 50upx;
            border-radius: 0 50upx 50upx 0/0 50upx 50upx 0;
        }
    
        .right-content {
            position: absolute;
            content: '';
            width: 100%;
            height: 100%;
            transform-origin: left center;
            transform: rotate(0deg);
            border-radius: 0 50upx 50upx 0/0 50upx 50upx 0;
            background: #ccc;//进度条底色
        }
    
        .percent-circle-left {
            width: 50upx;
            border-radius: 50upx 0 0 50upx/50upx 0 0 50upx;
        }
    
        .left-content {
            position: absolute;
            content: '';
            width: 100%;
            height: 100%;
            transform-origin: right center;
            transform: rotate(0deg);
            border-radius: 50upx 0 0 50upx/50upx 0 0 50upx;
            background: #ccc;//进度条底色
        }
        
        .text-circle {
            position: absolute;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 80%;
            width: 80%;
            left: 10%;
            top: 10%;
            border-radius: 100%;
            background-color: #f2f2f2;//百分比数字的底色
        }
  • 相关阅读:
    javaScript 与JQuery 计算器练习
    git在java项目中配置.gitignore不生效的解决办法
    mysql8主从复制配置
    ES6的Promise实例
    常用正则表达式
    Redis在Windows环境下后台启动
    Redis数据操作命令 二
    Redis数据操作命令
    List集合学习笔记
    MyBatis学习链接
  • 原文地址:https://www.cnblogs.com/xiaoqi2018/p/10813226.html
Copyright © 2011-2022 走看看