How do I create a rotating dotted circle border?

Question

I'm after a rotating circle dotted border. This is what I have so far:

 /*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>


   

My concern is these two dots that have uneven spacing. I suppose it's where the end of the border actually meets. It's a bit hard to notice so I'm sending a screenshot attached:

Is there a better approach on how to code this? I'd like to have a circle without these two close dots.

Thanks a lot!

Answer 1

Just an idea, not a full answer, but I want to insert a code snipped. How about creating only one dot and generating the rest of them with box-shadow. Probably with Sass or JS. This way you can always create a perfect cirle (you can calculate the position of each ball yourself, also change colors if you want to). This would be then scalable as well. I had to modify your code a little bit, see the result.

body {
  display: flex;
  justify-content: center;
  padding-top: 5em;
  height: 100vh;
}

.square {
  width: 70px;
  height: 61px;
  background: red;
}
.dot {
  width: 100%;
  color: red;
  border: 1px solid green;
  height: 100%;
  border-radius: 50%;
  -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 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 138px;
  height: 138px;
}

.square {
  position: relative;
}

.dot {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

/*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);
  }
}

.dot {
  width: 10px;
  height: 10px;
  box-shadow: 100px 0px black, -100px 0px black, 0px -100px blue, 0px 100px blue,
    71px -71px green, -71px 71px green, -71px -71px pink, 71px 71px pink;
}

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