Content
View differences
Updated by Andrej Sandorf about 3 years ago
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'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's discuss this next week. Thanks and cheers Birthe
**Acceptance criteria**
* SVG or CSS-only animation
**Implementation**
```HTML
<svg class="op-progress-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-progress-indicator {
width: 150px;
height: 70px;
view-box: 0 0 150 70;
}
.op-progress-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-progress-indicator rect:nth-of-type(1) {
fill: #f89a43;
x: 140px;
y: 6px;
}
.op-progress-indicator rect:nth-of-type(2) {
fill: #f89a43;
y: 26px;
animation-delay: 660ms;
}
.op-progress-indicator rect:nth-of-type(3) {
fill: #346495;
y: 46px;
animation-name: svg_ani-1;
animation-delay: 1330ms;
}
.op-progress-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;
}
```
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's discuss this next week. Thanks and cheers Birthe
**Acceptance criteria**
* SVG or CSS-only animation
**Implementation**
```HTML
<svg class="op-progress-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-progress-indicator {
width: 150px;
height: 70px;
view-box: 0 0 150 70;
}
.op-progress-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-progress-indicator rect:nth-of-type(1) {
fill: #f89a43;
x: 140px;
y: 6px;
}
.op-progress-indicator rect:nth-of-type(2) {
fill: #f89a43;
y: 26px;
animation-delay: 660ms;
}
.op-progress-indicator rect:nth-of-type(3) {
fill: #346495;
y: 46px;
animation-name: svg_ani-1;
animation-delay: 1330ms;
}
.op-progress-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;
}
```