Как анимировать индикатор в виде прямоугольника со скругленными углами?

Для анимации индикатора в виде прямоугольника со скругленными углами на веб-странице с использованием JavaScript можно воспользоваться CSS свойствами и анимациями.

В первую очередь, необходимо создать элемент на странице, который будет представлять собой прямоугольник с скругленными углами. Для этого мы можем использовать элемент <div> и определить для него класс, например, indicator.

Затем добавим стили для этого элемента в CSS. Укажем ширину, высоту, цвет фона, радиус скругления углов и любые другие необходимые стили:

.indicator {
    width: 100px;
    height: 20px;
    background-color: #3498db;
    border-radius: 10px;
}

Теперь добавим анимацию для этого элемента. Мы можем использовать @keyframes в CSS для создания анимации. Например, создадим анимацию, которая будет изменять ширину индикатора от 0 до 100% за определенное время:

@keyframes expand {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

.indicator {
    animation: expand 2s ease forwards;
}

Наконец, в JavaScript можно добавить класс animated, который будет активировать анимацию при загрузке страницы или при каком-либо событии:

document.addEventListener("DOMContentLoaded", function() {
    const indicator = document.querySelector(".indicator");
    indicator.classList.add("animated");
});

Таким образом, мы создали индикатор в виде прямоугольника со скругленными углами и анимировали его с помощью CSS и JavaScript. Данный индикатор можно легко настраивать, изменяя стили и параметры анимации в CSS в зависимости от требований проекта.