How to create circle with timer on UI which support all IE browsers

Question

How to create circle with timer on UI which support all IE browsers

279 views Asked by user3714194 At 04 May 2020 at 04:18

I was able to achieve svg and circle tags but the same changes are not working on IE8 and lower browsers.

Original Q&A

There are 1 answers

**Deepak-MSFT** · Answer 1 · 2020-05-04T08:37:54+00:00

I can see that you want to support old versions of an IE browser. like IE 7, IE 8, etc.

I want to inform you that SVG is supported by IE version 9.

From IE 9 to IE 11, all the versions of the IE browser has partial support for SVG.

Partial support in IE9-11 refers to not supporting animations.

IE9-11 & Edge don't properly scale SVG files.

So it is difficult to create an animated timer for those old versions of an IE browser.

I suggest you can try to display a simple timer for unsupported versions of the IE browser and you can display the animated circle timer for the supported versions of the IE browser(like Ie 11).

Here is a simple example:

<!DOCTYPE HTML>
<html>
<head>
<title>HTML Timer example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
  text-align: center;
  font-size: 20px;
  margin-top: 0px;
}
    #demo {
      width: 100px;
      height: 100px;
      background: red;
      border-radius: 50%;
     vertical-align: middle;
     line-height: 100px; 
 border:solid black;
    }
  
</style>
</head>
<body>

<p id="demo"></p>

<script>
function startTimer(duration, display) {
    var timer = duration, minutes, seconds;
    setInterval(function () {
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.innerHTML = minutes + ":" + seconds;

        if (--timer < 0) {
            timer = duration;
        }
    }, 1000);
}

window.onload = function () {
    var fiveMinutes = 60 * 5,
        display = document.getElementById('demo');
    startTimer(fiveMinutes, display);
};
</script>

</body>
</html>

Below is another helpful link but that solution may also cause the issues with the older version of the IE browser. So it is better to use the simple timer.

CSS Pie Timer

TechQA.

How to create circle with timer on UI which support all IE browsers

There are 1 answers

Related Questions in HTML

Related Questions in CSS

Related Questions in USER-INTERFACE

Related Questions in INTERNET-EXPLORER-8

Related Questions in INTERNET-EXPLORER-7

Popular Questions

Popular Tags

Trending Questions