CSS周期的图形问题

当我执行AJAX HTTP请求时,我的网站上有CSS微调器:

Spinner

微调器是一个旋转的循环。

但是循环中存在三个不良要素(线)。

为什么它们在那里,我如何将它们移除?

.nw-overlay {
      z-index: 1;
      position: fixed;
      width: 100%;
      height: 100%;
      top: 0;
      background: #000;
      opacity: 0.2;
    }
    .nw-spinner {
      z-index: 2;
      position: fixed;
      left: calc(50% - 40px);
      top: calc(50% - 40px);
      height:5em;
      width:5em;
      margin:0px auto;
      -webkit-animation: rotation 1.25s infinite linear;
      -moz-animation: rotation 1.25s infinite linear;
      -o-animation: rotation 1.25s infinite linear;
      animation: rotation 1.25s infinite linear;
      border-left: 20px solid rgba(102,102,102,.3);
      border-right: 20px solid rgba(102,102,102,.3);
      border-bottom: 20px solid rgba(102,102,102,.3);
      border-top: 20px solid rgba(102,102,102,1);
      border-radius: 100%;
    }
    <div class="nw-overlay"></div>
    <div class="nw-spinner"></div>