Time Circles Count Down

index.html

<div id="DateCountdown" data-date="2022-01-27 11:00:00" style="width: 100%;"></div>

script.js

$(window).resize(function(){
    			$("#DateCountdown").TimeCircles().rebuild();
			});
			$("#DateCountdown").TimeCircles({
				"animation": "smooth",
				"bg_width": 0.5,
				"fg_width": 0.023333333333333334,
				"circle_bg_color": "#60686F",
					"time": {
						"Days": {
							"text": "Days",
							"color": "#FFCC66",
							"show": true
						},
        				"Hours": {
							"text": "Hours",
							"color": "#99CCFF",
							"show": true
						},
						"Minutes": {
							"text": "Minutes",
							"color": "#BBFFBB",
							"show": true
						},
						"Seconds": {
							"text": "Seconds",
							"color": "#FF9999",
							 "show": true
						}
					}
			});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://git.wimbarelds.nl/TimeCircles/inc/TimeCircles.js"></script>

style.css

.time_circles .textDiv_Days,
.textDiv_Hours,
.textDiv_Minutes,
.textDiv_Seconds {
  color: #60686F;
}

styles

<link href="http://git.wimbarelds.nl/TimeCircles/inc/TimeCircles.css" rel="stylesheet" />

Time Circles Count Down.markdown

Time Circles Count Down

A Pen by MEXXIO on CodePen.

License.