在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5  HTML/ 如何用簡單的辦法實(shí)現(xiàn)如下圓形百分比進(jìn)度條

如何用簡單的辦法實(shí)現(xiàn)如下圓形百分比進(jìn)度條

想要的百分比進(jìn)度條

clipboard.png

問題

如果現(xiàn)在是88%,就想讓紅色的圓圈很12點(diǎn)的位置，順時(shí)針開始，圓圈的88%為紅色，如何最簡單實(shí)現(xiàn)
clipboard.png

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        #test{
            position: relative;
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            margin: 100px auto;
            border: 8px solid #ccc;
            border-radius: 50%;
        }
        #box{
            position: absolute;
            top: -4px;
            left: -4px;
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            border: 4px solid red;
            border-radius: 50%;
        }
    </style>
</head>
<body>
<div id="test">
    88
    <div id="box"></div>
</div>
<script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
</body>
</html>
回答
編輯回答
獨(dú)白

其實(shí)用svg實(shí)現(xiàn)最好，
但如果最簡單只用css也可以

<div id="test">
    <div id="box">88%</div>
</div>
#test{
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: red;
    background-image: linear-gradient(54deg, red 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0)), linear-gradient(270deg, red 50%, #fff 50%, #fff);//關(guān)鍵代碼
}
#box{
    position: absolute;
    width: 90px;
    height: 90px;
    top: 5px;
    left: 5px;
    background-color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 90px;
    font-size: 16px;
}
2017年1月17日 11:50