为引导滑块创建特殊进度条

Question

我在我的网站中设置了一个引导滑块，我想为滑块添加一个计时器进度条。但我需要创建的标准与标准略有不同。

基本上，它是带有虚线边框的透明半圆。边框的每个点都将填充白色以显示进度。 你知道我怎么做到这一点吗？

<div id="event-slider" class="carousel slide" data-ride="carousel">

    <div class="carousel-inner"> 
        <!-- begin carousel-slide -->  
        <?php
        $slides = xs_get_option('theme_options', 'main_slider');
        $active = 'active';
        foreach ($slides as $arr) {
            echo '<div class="item ' . $active . '"> <img src="' . $arr['img_src'] . '" alt="' . $arr['title'] . '" class="img-responsive" /> </div>';
            $active = '';
        }
        ?>
        <!-- end carousel-slide --> 
    </div>
    <!-- end carousel-inner --> <div class="progressBar"></div> 
    <!-- Controls --> 
    <a class="left carousel-control" href="#event-slider" data-slide="prev"> <i class="fa fa-chevron-left"></i></a>
    <a class="right carousel-control" href="#event-slider" data-slide="next"> <i class="fa fa-chevron-right"></i></a>
</div>

提前致谢。