Здравствуйте, я пытаюсь заставить стандартные индикаторы начальной загрузки карусели быть очень тонкими желтыми линиями, застрявшими внизу, как показано ниже.

https://gyazo.com/43b9bdbcb63dde3f5fe9b982d4b96b37

Я сделал так, чтобы они были внизу страницы, но я не могу изменить их в прямоугольники или изменить их цвет.

HTML

<ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
            <li data-target="#myCarousel" data-slide-to="3"></li>
        </ol>

CSS

.carousel-indicators {
    margin: 0px;
    height: 0px;
}

    .carousel-indicators ol {
        width: 100%;
    }


    .carousel-indicators li{
        height: 3px !important;
        border-radius: 0px !important;
        width: 25%;
    }