Я использовал следующее CSS взято из здесь .
:host {
animation: rotation 2s infinite linear;
border: 10px solid yellow;
}
@keyframes rotation {
from { transform: rotate(0deg); }
to { transform: rotate(359deg); }
}
Я не вижу никакого поворота, хотя я вижу границу, поэтому я знаю, что я нацеливаюсь на правильный элемент. Я не думаю, что для этого нужно иметь IMG (а мой - обычная вещь в Angular). Он работает на IMG, а также на DIV. Не уверен, как его диагностировать дальше, поскольку ротации / анимации - не самый сильный мой набор.
Один из подходов - поместить пользовательский компонент в DIV и повернуть его. Однако он вращается вокруг середины экрана (wiiiide circle), а не вращается вокруг себя.
<div id="loading">
<my-icon-globe></my-icon-globe>
</div>
#loading { animation: rotation 2s infinite linear; }
@keyframes rotation {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(359deg); }
}