圆柱形进度条

<style type="text/css">
    .weizhu_yuanzhu {
        position: relative;
        width: 50px;
        height: 10rem;
        background: #FFF;
        margin: 30px auto;
        z-index: 999;
        border-left:black 0.5px solid;
        border-right:black 0.5px solid;
        box-sizing: border-box;
    }

    .weizhu_yuanzhu:before {
        position: absolute;
        top: -10px;
        content: "";
        display: block;
        width: 50px;
        height: 20px;
        border-radius: 50%;
        background: #FFF;
        z-index: 99;
        border-left:black 0.5px solid;
        border-right:black 0.5px solid;
        border-top: black 0.5px solid;
        box-sizing: border-box;
    }

    .weizhu_yuanzhu:after {
        position: absolute;
        bottom: -10px;
        content: "";
        display: block;
        width: 50px;
        height: 20px;
        border-radius: 50%;
        background: #317BFF;
        z-index: 9;
        border-left:black 0.5px solid;
        border-right:black 0.5px solid;
        border-bottom: black 0.5px solid;
        box-sizing: border-box;
    }

    .weizhu_yuanzhu_inset {
        position: absolute;
        bottom: 0;
        width: 49px;
        background: #5ac8fa;
        z-index: 999;
        color: #FFF;
        transition: 0.5s;
        box-sizing: border-box;
    }

    .weizhu_yuanzhu_inset:before {
        position: absolute;
        top: -10px;
        content: "";
        display: block;
        width: 49px;
        height: 20px;
        border-radius: 50%;
        background: #5ac8fa;
        z-index: 99;
        border-top: black 0.5px solid;
        border-bottom: black 0.5px solid;
        box-sizing: border-box;
    }

    .weizhu_yuanzhu_inset:after {
        position: absolute;
        bottom: -10px;
        content: "";
        display: block;
        width: 50px;
        height: 20px;
        border-radius: 50%;
        background: #5ac8fa;
        z-index: 9;
        border-top: black 0.5px solid;
        border-bottom: black 0.5px solid;
        box-sizing: border-box;
    }

    .weizhu_percent{
        text-align: center;
        font-size: 1.2rem;
        font-weight: bolder;
        color: #317BFF;
    }
    </style>

        <div class="weizhu_yuanzhu">
            <div class="weizhu_yuanzhu_inset" style="height:50%">    </div>
        </div>