Hi <mention class="mention" data-id="9" data-type="user" data-text="@Christoph Zierz">@Christoph Zierz</mention>, We are thinking about coming up with a new loading indicator for OpenProject. Currently, it&#39;s just a few blue lines in a row. This becomes especially important when setting up a new trial instance or creating a baseline comparison, where it might take a few seconds until you will see a result.
Maye <mention class="mention" data-id="52988" data-type="user" data-text="@Alexander Hermann">@Alexander Hermann</mention> can support is in creating a small animation for this?
I thought about having a minimal Gantt chart (a few blue lines and one milestone, maybe even with dependencies) building up (again and again).

<img class="op-uc-image op-uc-image_inline" style="width:281px;" src="/api/v3/attachments/54916/content"> But there are probably also many other options. Let&#39;s discuss this next week. Thanks and cheers Birthe

**Acceptance criteria**

* SVG or CSS-only animation

**Implementation**

Begin of the insertionShould take place mostly in these files


[https://github.com/opf/openproject/blob/dev/frontend/src/app/core/loading-indicator/loading-indicator.service.ts#L66-L74](https://github.com/opf/openproject/blob/dev/frontend/src/app/core/loading-indicator/loading-indicator.service.ts#L66-L74) [https://github.com/opf/openproject/blob/dev/frontend/src/global\_styles/content/\_loading\_indicator.sass#L32-L68](https://github.com/opf/openproject/blob/dev/frontend/src/global_styles/content/_loading_indicator.sass#L32-L68)



End of the insertion ```HTML
<svg class="op-loading-indicator">
<rect rx="4px"/>
<rect rx="4px"/>
<rect rx="4px"/>
<rect rx="2px"/>
</svg>
```

```CSS
@keyframes svg_ani-1 {
0% {
x: 150px;
width: 0;
}
36% {
x: 0;
width: 150px;
}
72% {
x: 0;
width: 0;
}
100% {
x: 0;
width: 0;
}
}

@keyframes svg_ani-2 {
0% {
x: 150px;
}
36% {
x: 0;
}
72% {
x: -100px;
}
100% {
x: -100px;
}
}

.op-loading-indicator {
width: 150px;
height: 70px;
view-box: 0 0 150 70;
}

.op-loading-indicator rect {
rx: 4px;
x: 152px;
height: 10px;
width: 150px;
animation-duration: 2000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
animation-name: svg_ani-1;
}

.op-loading-indicator rect:nth-of-type(1) {
fill: #f89a43;
x: 140px;
y: 6px;
}

.op-loading-indicator rect:nth-of-type(2) {
fill: #f89a43;
y: 26px;
animation-delay: 660ms;
}

.op-loading-indicator rect:nth-of-type(3) {
fill: #346495;
y: 46px;
animation-name: svg_ani-1;
animation-delay: 1330ms;
}

.op-loading-indicator rect:nth-of-type(4) {
fill: #36c434;
y: 44px;
rx: 2px;
width: 14px;
height: 14px;
transform-box: fill-box;
transform-origin: center;
transform: rotate(45deg);
animation-name: svg_ani-2;
animation-delay: 2130ms;
}
```

or as SASS Begin of the insertion

End of the insertion Begin of the deletion


End of the deletion ```SASS
@keyframes svg_ani-1
0%
x: 150px
width: 0
36%
x: 0
width: 150px
72%
x: 0
width: 0
100%
x: 0
width: 0

@keyframes svg_ani-2
0%
x: 150px
36%
x: 0
72%
x: -100px
100%
x: -100px

.op-loading-indicator
width: 150px
height: 70px
view-box: 0 0 150 70

rect
rx: 4px
x: 152px
height: 10px
width: 150px
animation-duration: 2000ms
animation-iteration-count: infinite
animation-timing-function: linear
animation-name: svg_ani-1

&:nth-of-type(1)
fill: #f89a43
x: 140px
y: 6px

&:nth-of-type(2)
fill: #f89a43
y: 26px
animation-delay: 660ms

&:nth-of-type(3)
fill: #346495
y: 46px
animation-name: svg_ani-1
animation-delay: 1330ms

&:nth-of-type(4)
fill: #36c434
y: 44px
rx: 2px
width: 14px
height: 14px
transform-box: fill-box
transform-origin: center
transform: rotate(45deg)
animation-name: svg_ani-2
animation-delay: 2130ms
```