Divs在彼此的顶部，底部div边缘显示。

Question

I made this sorta simple circular loader-thingy , whith two half circles covered with another two half circles that are positioned right on top of them. The covers rotate and reveal the bottom circles to make it look like a circular loading bar.

The problem is that the edge of the bottom circles are visible in some browsers, and there are some mobile browser issues with that as well. Is there a solution for this?

CSS

.wrap{
    position:relative;
    width:100px;
    height:100px;
    overflow:hidden;
    border-radius:50px;
}
.circle{
    position:absolute;
    top:0;
    width:50px;
    height:100px;
    background:black;
}
.cover{
    position:absolute;
    left:0;
    width:50px;
    height:100px;
    background:white;
}
.halfcircleleft{
    width:50px;
    position:absolute;
    top:0;
    left:0;
}
.halfcircleleft .circle{
    z-index:3;
    border-radius:50px 0 0 50px;
}
.halfcircleleft .cover{
    z-index:4;
    border-radius:50px 0 0 50px;
}

HTML

<div class="wrap">
    <div class="halfcircleleft">
        <div class="circle"></div>
        <div class="cover"></div>
    </div>

    <div class="halfcircleright">
        <div class="circle"></div>
        <div class="cover"></div>
    </div>
</div>

Answer 1

what about using a circle with transparent background and white border bigger than hole to put it over the border you want to remove?like:

.hole, .hole2{
    z-index:99;
    position:absolute;
    width:86px;
    height:86px;
    top:7px;
    left:7px;
    background:lightgrey;
    border-radius:50%;
    text-align:center;
    line-height:86px;
    font-family:Arial;
    font-size:38px;
    padding-right:2px;
}
.hole2 {
    background:transparent;
    border:4px solid white;
    width:106px;
    height:106px;
    top:-3px;
    left:-3px;
}

then just remove the overflow:hidden of wrap which it's not doing anything (at least in your example)

JSFIDDLE