如何使CSS圆微调框的前缘半月形

Question

Image: Circular spinner rotating along the border rim of other solid circle

Please visit: https://codepen.io/sadashivjp/pen/oqqzwg I have create a UI codepen here. You are free to make any changes in this, and post the solution here.

The same code is as follows:

 .outer-circle{ width:330px; height:330px; border:30px solid #001b33; position:absolute; top:0; bottom:0; left:0;right:0; margin:auto; border-radius:50%; } .spinner { animation: rotate 5s linear infinite; border-radius: 50%; height: 360px; width: 360px; position: relative; left: -15px; top: -15px; } .spinner:before, .spinner:after { content: ''; position: absolute; } .spinner:before { border-radius: 50%; background: linear-gradient(0deg, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 100%, 0.1) 100%) 0% 0%, linear-gradient(90deg, hsla(0, 0%, 100%, 0.1) 0%, hsla(0, 0%, 100%, 0.5) 100%) 100% 0%, linear-gradient(180deg, hsla(0, 0%, 100%, 0.5) 0%, hsla(0, 0%, 100%, 0.60) 100%) 100% 100%, linear-gradient(360deg, hsla(0, 0%, 100%, 0.60) 0%, hsla(0, 0%, 100%, 0.70 ) 100%) 0% 100% ; background-repeat: no-repeat; background-size: 50% 50%; top: -1px; bottom: -1px; left: -1px; right: -1px; } .spinner:after { background: black; border: 15px solid #001b33; border-radius: 50%; top: 3%; bottom: 3%; left: 3%; right: 3%; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } 

 <div class="outer-circle"> <div class="spinner"></div> </div> 

There are two problems in this code: 1) It is causing wobbling(shaking) effect of spinner circle in IE11 browser. But, works perfect in Google chrome browser. 2) As in attached image, need the similar effect of half moon shaped(cylindrical bottom shaped) at the leading edge at the front of the inner white spinner circle.

How to solve these two issues? Modification of my existing code or providing solution with SVG or Canvas on any other would be fine.

Answer 1

Add a div inside your spinner.

 .outer-circle{ width:330px; height:330px; border:30px solid #001b33; position:absolute; top:0; bottom:0; left:0;right:0; margin:auto; border-radius:50%; } .spinner { animation: rotate 5s linear infinite; border-radius: 50%; height: 360px; width: 360px; position: relative; left: -15px; top: -15px; } .spinner:before, .spinner:after { content: ''; position: absolute; } .spinner:before { border-radius: 50%; background: linear-gradient(0deg, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 100%, 0.1) 100%) 0% 0%, linear-gradient(90deg, hsla(0, 0%, 100%, 0.1) 0%, hsla(0, 0%, 100%, 0.5) 100%) 100% 0%, linear-gradient(180deg, hsla(0, 0%, 100%, 0.5) 0%, hsla(0, 0%, 100%, 0.60) 100%) 100% 100%, linear-gradient(360deg, hsla(0, 0%, 100%, 0.60) 0%, hsla(0, 0%, 100%, 0.70 ) 100%) 0% 100% ; background-repeat: no-repeat; background-size: 50% 50%; top: -1px; bottom: -1px; left: -1px; right: -1px; } .spinner:after { background: black; border: 15px solid #001b33; border-radius: 50%; top: 3%; bottom: 3%; left: 3%; right: 3%; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .circle{ background: #b1bac1; width: 10px; height: 10px; position: absolute; top: 177px; bottom: 0; left: 0; right: 0; border-radius: 50% 50%; } 

 <div class="outer-circle"> <div class="spinner"> <div class="circle"> </div> </div> </div> 

Answer 2

 .outer-circle{ width:330px; height:330px; border:30px solid #001b33; position:absolute; top:0; bottom:0; left:0;right:0; margin:auto; border-radius:50%; } .spinner { animation: rotate 5s linear infinite; border-radius: 50%; height: 360px; width: 360px; position: relative; left: -15px; top: -15px; } .spinner:before,.spinner:after, .outer-circle:after { content: ''; position: absolute; } .spinner:before { border-radius: 50%; background: linear-gradient(0deg, hsla(0, 0%, 100%, 0) 50%, hsla(0, 0%, 100%, 0.1) 100%) 0% 0%, linear-gradient(90deg, hsla(0, 0%, 100%, 0.1) 0%, hsla(0, 0%, 100%, 0.5) 100%) 100% 0%, linear-gradient(180deg, hsla(0, 0%, 100%, 0.5) 0%, hsla(0, 0%, 100%, 0.60) 100%) 100% 100%, linear-gradient(360deg, hsla(0, 0%, 100%, 0.60) 0%, hsla(0, 0%, 100%, 0.70 ) 100%) 0% 100% ; background-repeat: no-repeat; background-size: 50% 50%; top: -1px; bottom: -1px; left: -1px; right: -1px; } .spinner:after{ background: #afb7bf; height: 15px; width:15px; border-radius: 50%; top: 175px; left: -1px; right: -100px; bottom: 0px; } .outer-circle:after { background: black; border: 15px solid #001b33; border-radius: 50%; top: -1px; bottom: -1px; left: -1px; right: -1px; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } 

 <div class="outer-circle"> <div class="spinner"></div> </div> 

I hope this is the solution you are looking for!