title: How to make leading edge of CSS circle spinner half moon shaped
body: <p>Image: <a href="https://i.stack.imgur.com/A5E9d.png" rel="nofollow noreferrer">Circular spinner rotating along the border rim of other solid circle</a></p>
  
  <p>Please visit: <a href="https://codepen.io/sadashivjp/pen/oqqzwg" rel="nofollow noreferrer">https://codepen.io/sadashivjp/pen/oqqzwg</a>
  I have create a UI codepen here. You are free to make any changes in this, and post the solution here.</p>
  
  <p>The same code is as follows:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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); }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="outer-circle"&gt;
  &lt;div class="spinner"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>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.</p>
  
  <p>How to solve these two issues?
  Modification of my existing code or providing solution with SVG or Canvas on any other would be fine. </p>