Jquery Countdown

Countdown example

    <!--Countdown Start -->
    <div class="position-relative d-flex flex-wrap mb-7" data-countdown="2024/01/01"></div>
    <!--/.Countdown End -->


  
    <!--Countdown plugin and jquery-->
    <script src="assets/vendor/node_modules/js/jquery.min.js"></script>
    <script src="assets/vendor/node_modules/js/jquery.countdown.min.js"></script>
    <script>
        $('[data-countdown]').each(function () {
            var $this = $(this), finalDate = $(this).data('countdown');
            $this.countdown(finalDate, function (event) {
                var $this = $(this).html(event.strftime(''
                    + '<div class="width-10x height-10x d-flex flex-column flex-center rounded-circle bg-body-tertiary small me-3"><h2 class="mb-0">%w</h2> weeks</div> '
                    + '<div class="width-10x height-10x d-flex flex-column flex-center rounded-circle bg-body-tertiary small me-3"><h2 class="mb-">%d</h2> days</div> '
                    + '<div class="width-10x height-10x d-flex flex-column flex-center rounded-circle bg-body-tertiary small me-3"><h2 class="mb-0">%H</h2> hr</div> '
                    + '<div class="width-10x height-10x d-flex flex-column flex-center rounded-circle bg-body-tertiary small me-3"><h2 class="mb-0">%M</h2> min</div> '
                    + '<div class="width-10x height-10x d-flex flex-column flex-center rounded-circle bg-body-tertiary small me-3"><h2 class="mb-0">%S</h2> sec</div>'));
            });
        });
    </script>
View Plugin

Let's start building stunning websites

Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.