Overflowing edges of hidden border

I’ve been playing with a loading/progress spinner, it has five different quarter-circles all positioned absolute on top of each other. The only visible part is a border, rotate the div and the border looks like it’s "filling".

The first rotating quarter is the same color as the background, essentially hiding the border underneath until it’s rotated a quarter of the circle.

This almost works perfectly, except, the edges of the underlying border are overflowing:

#container {   display: flex;   justify-content: center;   align-items: center;   width: 100vw;   height: 100vh; }  #loader-container {   position: relative;   padding: 10px;   width: 100px;   height: 100px;   border-radius: 50%;   background: #1e262e; }  .loader {   pointer-events: none;   position: absolute;   width: 100px;   height: 100px;   border-style: solid;   border-color: #fff transparent transparent transparent;   border-radius: 50%;   box-sizing: border-box;   transform: rotate(45deg); }  .loader.hide {   border-color: #1e262e transparent transparent transparent;   animation: rotate-hide 0.75s linear forwards; }  .loader:nth-of-type(2) {   animation: rotate-one 0.75s 0.75s linear forwards; } .loader:nth-of-type(3) {   animation: rotate-two 0.75s 1.5s linear forwards; } .loader:nth-of-type(4) {   animation: rotate-three 0.75s 2.25s linear forwards; }  @keyframes rotate-hide {   from {     transform: rotate(45deg);   }   to {     transform: rotate(135deg);     visibility: hidden;   } }  @keyframes rotate-one {   from {     transform: rotate(45deg);   }   to {     transform: rotate(135deg);   } }  @keyframes rotate-two {   from {     visibility: hidden;     transform: rotate(135deg);   }   to {     transform: rotate(225deg);   } }  @keyframes rotate-three {   from {     visibility: hidden;     transform: rotate(225deg);   }   to {     transform: rotate(315deg);   } }
<div id="container">   <div id="loader-container">     <div class="loader"></div>     <div class="loader"></div>     <div class="loader"></div>     <div class="loader"></div>     <div class="loader hide"></div>   </div> </div>

Is there any way I can fix this without increasing the width, height, margin or border-width?

Asked on September 1, 2020 in HTML.
Add Comment
0 Answer(s)

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.