How to make circle progress bar on owl-carousel?

Question

css

In general, there is a slider on owl-carousel 2, you need to make it so take.ms/L2Y7C i.e. dots and the progress bar revolves around them and from below just show which of the slides is active now, I have been suffering for 2 days and have not found an answer anywhere and came here.
My code is very simple:

var timeout = 5000;
    var owl = $('.right_content .slider .owl-carousel').owlCarousel({
        items: 1,
        dots: true,
        nav: false,
        loop:true,
        autoplay: true,
        autoplayTimeout: timeout,
        dotsContainer: '#owldots',
        onChanged: function () {
        }
    });

maybe someone knows another slider plugin where this can be implemented, write pliz preferably already with ready-made code.

Answer 1

I did it like this:
JS

var timeout = 5000;
    var owl = $('.right_content .slider .owl-carousel').owlCarousel({
        items: 1,
        dots: true,
        nav: false,
        loop:true,
        autoplay: true,
        autoplayTimeout: timeout,
        dotsContainer: '#owldots',
        onChanged: function () {
            $(function() {
                var loader = $('.right_content .slider .owl-dot.active .loader').ClassyLoader({
                    width: 60,
                    height: 60,
                    percentage: 100,
                    speed: 20,
                    animate: true,
                    showRemaining: false,
                    showText: false,
                    diameter: 20,
                    lineColor: 'rgba(245,206,12,1)',
                    lineWidth: 2
                });
            })
        }
    });

HTML

<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.classyloader.min.js"></script>
<div class="slider">
                <div class="owl-carousel">
                    <div class="slide">
                         слайд 1
                    </div>
                    <div class="slide">
                        слайд 2
                    </div>
                </div>
                <div class="owl-dots" id="owldots">
                    <div class="owl-dot"><canvas class="loader"></canvas><span></span></div>
                    <div class="owl-dot"><canvas class="loader"></canvas><span></span></div>
                    <div class="owl-dot"><canvas class="loader"></canvas><span></span></div>
                    <div class="owl-dot"><canvas class="loader"></canvas><span></span></div>
                    <div class="owl-dot"><canvas class="loader"></canvas><span></span></div>
                    <div class="owl-dot"><canvas class="loader"></canvas><span></span></div>
                </div>
            </div>

SCSS

.owl-dots {
      position: absolute;
      right: 50px;
      top:250px;
      z-index: 20;
      .owl-dot {
        width: 40px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        margin-bottom: 20px;
        position: relative;
        cursor: pointer;
        span {
          position: relative;
          top: 15px;
          left: 16px;
        }
        canvas {
          display: none;
          position: absolute;
          left: -9px;
          top: -10px;
        }
        &.active canvas {
          display: block;
        }
        &:hover,
        &.active {
          span {
            background: #fdcf09;
          }
        }
        span {
          width: 10px;
          height: 10px;
          display: block;
          border-radius: 50%;
          background: #00a651;
        }
      }
    }

Answer 2

On CSS
As an option, a background image and loop animation.
In the hover example, the essence is clear:
deer.org.ua/samples/css3anim.html