Bootstrap Snippet Minutes Clock using JS and CSS using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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%;
            }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
$(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)
            });
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Minutes Clock using JS and CSS"
Bootstrap 4.1.1 Snippet by karthikricssion

Related: See More

Questions / Comments:

"Minutes Clock using JS and CSS" Bootstrap 4.1.1 Snippet by karthikricssion

Related: See More

Questions / Comments:

"Minutes Clock using JS and CSS"
Bootstrap 4.1.1 Snippet by karthikricssion