css - 回転する点線の円の境界線を作成するにはどうすればよいですか?

Question

私は回転する円の点線の境界線を求めています。これは私がこれまでに持っているものです:

 /*Stylings*/
        .square {
        width: 70px;
    height: 61px;
    background: red;
        }
        .button-border {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: 4px dotted #6B8291;
         -webkit-animation-name: Rotate;
         -webkit-animation-duration: 20s;
         -webkit-animation-iteration-count: infinite;
         -webkit-animation-timing-function: linear;
         -moz-animation-name: Rotate;
         -moz-animation-duration: 20s;
         -moz-animation-iteration-count: infinite;
         -moz-animation-timing-function: linear;
         -ms-animation-name: Rotate;
         -ms-animation-duration: 20s;
         -ms-animation-iteration-count: infinite;
         -ms-animation-timing-function: linear;
        }
        .button-container {
            position: relative;
            width: 138px;
            height: 138px;
        }
        .img_rotating .square {
            position: absolute;
            top: 50%;
            left: 50%!important;
            transform: translate(-50%,-50%);
        }
    /*Animation*/
        @-webkit-keyframes Rotate
        {
         from{-webkit-transform:rotate(0deg);}
         to{-webkit-transform:rotate(360deg);}
        }
        @-moz-keyframes Rotate
        {
         from{-moz-transform:rotate(0deg);}
         to{-moz-transform:rotate(360deg);}
        }

    <div class="img_rotating">
     <div class="button-container">
      <div class="square"></div>
       <div class="button-border"></div>
     </div>
    </div>


   

私の懸念は、間隔が不均一なこれらの2 つのドットです。国境の端が実際に交わる場所だと思います。ちょっとわかりにくいので、スクリーンショットを添付してお送りします。

これをコーディングする方法について、より良いアプローチはありますか? これらの 2 つの閉じた点のない円が欲しいです。

どうもありがとう！