I have created a circle animation and it works fine, however I am trying to change from solid lines to dotted lines, but I am wondering how to get it done, can somebody please suggest?

Here is how it looks right now:

#loading {
  width: 50px;
  height: 50px;
  margin: 30px auto;
  position: relative;
}
.outer-shadow, .inner-shadow {
  z-index: 4;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 100%;
}
.inner-shadow {
  top: 1px;
  left: 1px;
  width: 48px;
  height: 48px;
  margin-left: 0;
  margin-top: 0;
  border-radius: 100%;
  background-color: #ffffff;
}
.hold {
  position: absolute;
  width: 100%;
  height: 100%;
  clip: rect(0px, 50px, 50px, 25px);
  border-radius: 100%;
  background-color: #fff;
}
.fill, .dot span {
  background-color: #f00;
}
.fill {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  clip: rect(0px, 25px, 50px, 0px);
}
.left .fill {
  z-index: 1;
  -webkit-animation: left 1s linear;
  -moz-animation: left 1s linear;
  animation: left 1s linear both;
}
@keyframes left {
0% {
-webkit-transform:rotate(0deg);
}
100% {
transform:rotate(180deg);
}
}
@-webkit-keyframes left {
0% {
-webkit-transform:rotate(0deg);
}
100% {
-webkit-transform:rotate(180deg);
}
}
.right {
  z-index: 3;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  transform: rotate(180deg);
}
.right .fill {
  z-index: 3;
  -webkit-animation: right 1s linear;
  -moz-animation: right 1s linear;
  animation: right 1s linear both;
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-delay: 1s;
}
@keyframes right {
0% {
-webkit-transform:rotate(0deg);
}
100% {
transform:rotate(180deg);
}
}
@-webkit-keyframes right {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
.inner-shadow img {
  margin-left: 8px;
  margin-top: 7px;
}

<div id='loading'>
  <div class='outer-shadow'> </div>
  <div class='inner-shadow'> </div>
  <div class='hold left'>
    <div class='fill'></div>
  </div>
  <div class='hold right'>
    <div class='fill'></div>
  </div>
</div>

I have created a circle animation and it works fine, however I am trying to change from solid lines to dotted lines, but I am wondering how to get it done, can somebody please suggest?

Here is how it looks right now:

#loading {
  width: 50px;
  height: 50px;
  margin: 30px auto;
  position: relative;
}
.outer-shadow, .inner-shadow {
  z-index: 4;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 100%;
}
.inner-shadow {
  top: 1px;
  left: 1px;
  width: 48px;
  height: 48px;
  margin-left: 0;
  margin-top: 0;
  border-radius: 100%;
  background-color: #ffffff;
}
.hold {
  position: absolute;
  width: 100%;
  height: 100%;
  clip: rect(0px, 50px, 50px, 25px);
  border-radius: 100%;
  background-color: #fff;
}
.fill, .dot span {
  background-color: #f00;
}
.fill {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  clip: rect(0px, 25px, 50px, 0px);
}
.left .fill {
  z-index: 1;
  -webkit-animation: left 1s linear;
  -moz-animation: left 1s linear;
  animation: left 1s linear both;
}
@keyframes left {
0% {
-webkit-transform:rotate(0deg);
}
100% {
transform:rotate(180deg);
}
}
@-webkit-keyframes left {
0% {
-webkit-transform:rotate(0deg);
}
100% {
-webkit-transform:rotate(180deg);
}
}
.right {
  z-index: 3;
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  transform: rotate(180deg);
}
.right .fill {
  z-index: 3;
  -webkit-animation: right 1s linear;
  -moz-animation: right 1s linear;
  animation: right 1s linear both;
  -webkit-animation-delay: 1s;
  -moz-animation-delay: 1s;
  animation-delay: 1s;
}
@keyframes right {
0% {
-webkit-transform:rotate(0deg);
}
100% {
transform:rotate(180deg);
}
}
@-webkit-keyframes right {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(180deg);
}
}
.inner-shadow img {
  margin-left: 8px;
  margin-top: 7px;
}

<div id='loading'>
  <div class='outer-shadow'> </div>
  <div class='inner-shadow'> </div>
  <div class='hold left'>
    <div class='fill'></div>
  </div>
  <div class='hold right'>
    <div class='fill'></div>
  </div>
</div>

• javascript
• html
• css

3 Answers 3

Here is another snippet for your question. There is no genuine way to move dotted lines. Instead, I cover/uncover the dotted circle below with another circle with white border. Please see below:

#c1 {
  stroke-width: 1px;
  stroke: red;
  fill: transparent;
  stroke-dasharray: 5;
}

#c2 {
  animation: render 1s linear both;
  stroke-width: 5px;
  stroke: white;
  fill: transparent;
  stroke-dasharray: 377;
  stroke-dashoffset: 0;
}

@keyframes render {
  100% {
    stroke-dasharray: 377;
    stroke-dashoffset: -377;
  }
}

<svg width="200" height="200" viewBox="0 0 200 200" preserveAspectRatio="xMidYMid meet">
    <circle id="c1" cx="120" cy="120" r="60" />
    <circle id="c2" cx="120" cy="120" r="60" />
</svg>

.circle {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  border: 2px dotted transparent;
  border-right-color: transparent;
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-top-color: transparent;
  animation-name: spin;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  position: relative;
  margin: 30px auto;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  25% {
    border-right-color: red;
  }
  50% {
    border-bottom-color: red;
  }
  75% {
    border-left-color: red;
  }
  100% {
    border-top-color: red;
    border-left-color: red;
    border-bottom-color: red;
    border-right-color: red;
    transform: rotate(360deg);
  }
}

<div class="circle"></div>

Edit, Updated

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border-color: transparent;
  border-style: hidden;
  border-width: 0px;
  border-right-width: 0px;
  border-bottom-width: 0px;
  border-left-width: 0px;
  border-top-width: 0px;
  border-bottom-style: dotted;
  border-left-style: dotted;
  border-top-style: dotted;
  border-right-style: dotted;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  border-left-color: transparent;
  animation-name: spin;
  animation-duration: 1s;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
  animation-delay: .25s;
  position: relative;
  margin: 30px auto;
  transform: rotate(45deg);
  transition: border 1s ease-in .25s;
}

@keyframes spin {
  0% {
    border-top-width: 2px;
    border-top-color: red;
  }
  25% {
    border-right-width: 2px;
    border-right-color: red;
  }
  50% {
    border-bottom-width: 2px;
    border-bottom-color: red;
  }
  75% {
    border-left-width: 2px;
    border-left-color: red;
  }
  100% {
    border: 2px dotted red;
  }
}

<div class="circle"></div>

If possible, I would like to strongly recommend to use SVG as it will make your life way easier.

In the example below, I am using stroke-dasharray and stroke-dashoffset to manipulate the border. stroke-dasharray stands for the length of dashes, and stroke-dashoffset means offset from where dashed line begins.

By default, I assigned stroke-dasharray: 377; and stroke-dashoffset: 377;. It means it uses 377px length of dashes and spaces in between, with 377px offset.

If you change stroke-dashoffset to 0, it will gradually draw(reduce offset) the circle border. As the length of circumference is about 377px (2 x Pi x 60px), it will make a circle without any dashes.

At the last frame of the animation, as soon as you change the stroke-dasharray to smaller numbers, it will transform its border to dashes.

circle {
  stroke-width: 1px;
  stroke: red;
  fill: transparent;
  stroke-dasharray: 377;
  stroke-dashoffset: 377;
  animation: render 1s linear both;
}

@keyframes render {
  99% {
    stroke-dasharray: 377;
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dasharray: 5; 
    stroke-dashoffset: 0;
  }
}

<svg width="200" height="200" viewBox="0 0 200 200" preserveAspectRatio="xMidYMid meet">
    <circle cx="80" cy="80" r="60" />
</svg>