//CODE -- elements: a circle shape (vector shape); a textbox (default text "0") 

//----- Variables to preset:

let durationInSeconds = 1.2;

let finalNumber = 100;

let backgroundColor = "#FFFFFF";

let baseLineColor = "#D8D8D8";

let ProgressLineColor = "#008B8B";

let strokeWidth = 10;

let radius = 100;

//--------------------

let durationInMs = durationInSeconds * 1000;

let counter = -1;

let timer;

let intervalInMs;

durationInSeconds >= 60 ? intervalInMs = 100 : intervalInMs = Math.max(durationInMs * 1/finalNumber, 50);

$w.onReady(function () {

    countdown();

    timer = setInterval(countdown, intervalInMs);

})

function countdown() {

    let circleValue = (628 * counter * intervalInMs / durationInMs).toString();

    if (counter === -1) { circleValue = "0";}

    $w("#vectorImage1").src = `<svg width="226px" height="226px" viewBox="0 0 226 226" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<title>timer</title>

<defs></defs>

<g id="Page-1" stroke="none" stroke-width="1" fill="${backgroundColor}" fill-rule="evenodd">

<g id="jd" transform="translate(-236.000000, -213.000000)" stroke-width="${strokeWidth}">

<g id="animated-circle" transform="translate(249.000000, 226.000000)">

<circle id="base" stroke="${baseLineColor}" cx="100" cy="100" r="${radius}"></circle>

<circle id="segment1" stroke="${ProgressLineColor}" stroke-dasharray="${circleValue},628" cx="100" cy="100" r="${radius}" transform="translate(100, 100) rotate(-90) translate(-100, -100) "></circle>

</g>

</g>

</g>

</svg>`;

     $w("#text43").text = Math.max(Math.min(Math.floor(finalNumber * counter * intervalInMs / durationInMs), finalNumber), 0).toString();

    counter++;

    if (counter > durationInMs / intervalInMs) {

        clearInterval(timer);

    }

}

​

​