<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="circle-wrapper"> <span id="circle"> <div class="minute-dot"></div> </span> <div id="minute-counter">0</div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/tinycolor/1.4.1/tinycolor.min.js"></script>

body { overflow: hidden; } .circle-wrapper { width: 200px; height: 200px; text-align: center; margin: auto; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } #circle{ width: 200px; height: 200px; border-radius: 50%; border: 4px solid #333; display: block; text-align: center; transition: all ease 0.5s; margin: auto; } #circle .minute-dot { width: 34px; height: 34px; background-color: #333; display: inline-block; margin: 8px; border-radius: 50%; } #minute-counter { position: absolute; font-size: 36px; height: 40px; text-align: center; top: 0; right: 0; left: 0; bottom: 0; margin: auto; animation: zoominout 1s infinite; } .circle-wrapper.lite #circle { border-color: #fff; } .circle-wrapper.lite #circle .minute-dot { background-color: #fff; } .circle-wrapper.lite #minute-counter { color: #fff; } @keyframes zoominout { 0% { transform: scale(1,1); } 50% { transform: scale(1.2,1.2); } 100% { transform: scale(1,1); } }

$(function(){ function frameCounter(count) { return count } var count = 0 setInterval(() => { count = count + 1 $('#circle').css({ transform: 'rotate('+ count * 6 +'deg)' }); $('#minute-counter').text(frameCounter(count)) var randomColor = Math.floor(Math.random()*16777215).toString(16); if(tinycolor(randomColor).isDark()) { $('.circle-wrapper').addClass('lite') } else { $('.circle-wrapper').removeClass('lite') } $("body").css({ "background-color": '#' + randomColor, 'transition': 'all 0.9s', '-webkit-transition': 'all 0.9s' }); }, 1000) });