wie man spinnenden kanten gerundet macht css

Question

Here ist mein fiddle link. Ich habe einen beweglichen Spinner mit CSS erstellt. Aber schwarze Teile, die sich drehen/bewegen, sollten abgerundete Kanten haben. Ich kann es nicht von dem bekommen, was ich jetzt habe.

.loader { 
    position: relative; 
    border-top: 10px solid #805da4; 
    border-right: 10px solid #805da4; 
    border-bottom: 10px solid #805da4; 
    border-left: 10px solid #000; 
    -webkit-transform: translateZ(0); 
    -ms-transform: translateZ(0); 
    transform: translateZ(0); 
    -webkit-animation-name: spinner; 
    -webkit-animation-duration: 3s; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear; 
    -webkit-animation-delay: 0s; 
    display: block; 
    border-radius: 50%; 
    width: 100%; 
    height: 100%; 
} 

Answer 1

in HTML-Code

<div class="highlightRoundBox"> 
<span class="loading"> 
<span class="edge edge-left"></span> 
<span class="edge edge-right"></span> 
</span> 
</div> 

in CSS-Code

@keyframes spin { 
    0% { 
     transform: rotate(0deg); 
    } 
    100% { 
     transform: rotate(360deg); 
    } 
} 
.highlightRoundBox { 
    position: relative; 
    margin: 11px 27px 13px 6px; 
    width:68px; 
    height: 68px; 
} 
.loading { 
    display:block; 
    position:relative; 
    border-radius: 50%; 
    width: 100%; 
    height: 100%; 
    border: 0.5rem solid #805da4; 
    border-top-color: #000; 
    animation: spin 1s infinite linear; 
} 
.loading .edge { 
    display:block; 
    position: absolute; 
    border-radius: 50%; 
    width: 0.5rem; 
    height: 0.5rem; 
    background:#000; 
} 
.loading .edge.edge-left 
{ 
    top:0.22rem; 
    left:0.2rem; 
} 
.loading .edge.edge-right 
{ 
    top:0.20em; 
    right:0.22em; 
} 

Check Link https://jsfiddle.net/4yL3rp38/22/