I have this loading svg

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 bee 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>

I have this loading svg

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 bee 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?

• javascript
• html
• css
• svg

3 Answers 3

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 bee:

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

Something like this:

$(document).ready(function() {

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

})

.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;
}

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

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

<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="preloader">
  <svg id="svg-msg">
    <circle id="svg-circle" class="svg-circle" cx="100" cy="100" r="94" />
  </svg>
</div>

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

animate the relevant svg properties, namely stroke-offset (as you already did), and stroke-dasharray, like so:

// no need for javascript in this example; 
// this is just for triggering the additional animation, 
// to simulate your form 'submit' action

var svg = document.getElementById('svg-msg'),
  btn = document.getElementById('swap');

btn.addEventListener('click', function(e) {
  svg.classList.remove('rotate');
  svg.classList.add('merge');
}, false);

svg {
  height: 200px;
}

#svg-circle {
  fill: none;
  stroke: #333;
  stroke-width: 6;
  stroke-linecap: round;
  -webkit-transition: 250ms;
  -moz-transition: 250ms;
  transition: 250ms;
}

svg.rotate #svg-circle {
  stroke-dasharray: 22.68px;
  animation: circleAn 1s linear infinite;
}

svg.merge #svg-circle {
  animation: circleMerge 1s linear;
}

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

@keyframes circleMerge {
  from {
    stroke-dasharray: 22.68px;
  }
  to {
    stroke-dasharray: 22.68px 0;
  }
}

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