Simon Simon - 24 days ago 7
CSS Question

SVG - How do I turn stroke from dashed to solid?

I have this loading svg

enter image description here

The idea is when my form is submitted, this will show up, and it is rotating. When it's done processing, the circle should turn "solid" and you'll see the dashed lines expand and become one whole circle and it would stop rotating.



#svg-circle {
fill: none;
stroke: #333;
stroke-width: 6;
stroke-dasharray: 22.68px;
stroke-dashoffset: 10px;
stroke-linecap: round;
animation: circleAn 1s linear infinite;
-webkit-transition: ease 250ms;
-moz-transition: ease 250ms;
transition: ease 250ms;
}

@keyframes circleAn {
to {
stroke-dashoffset: 100px;
}
}

<svg id="svg-msg">
<circle id="svg-circle" class="svg-circle" cx="100" cy="100" r="94" />
</svg>





Any suggestions?

Answer Source
stroke-dasharray: 22.68px;

is a shorthand for the following:

stroke-dasharray: 22.68px 22.68px;

That means a dash of 22.68 followed by a gap of 22.68. Then the dashes repeat.

If you want the dashes to expand, and the gaps to shrink accordingly, you need to make the first number larger and the second number smaller at the same time. In other words, the dash array has to become:

stroke-dasharray: 45.36px 0px;

$(document).ready(function() {

  $("#done").on("click", function() {
    $("#svg-circle").css("stroke-dasharray", "45.36px 0px");
  })

})
#svg-msg {
  width: 200px;
  height: 200px;
}

.svg-circle {
  fill: none;
  stroke: #333;
  stroke-width: 6;
  stroke-dasharray: 22.68px;
  stroke-dashoffset: 10px;
  stroke-linecap: round;
  animation: circleAn 1s linear infinite;
  transition: ease 1s;
}

.svg-circle-full {
  fill: none;
  stroke: red;
  stroke-width: 6;
  stroke-linecap: round;
}

@keyframes circleAn {
  to {
    stroke-dashoffset: 100px;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<svg id="svg-msg">
  <circle id="svg-circle" class="svg-circle" cx="100" cy="100" r="94" />
</svg>
<br/>

<button id="done">Done
</button>