# Feature OP-12572 - New loading indicator for OpenProject application 

Project: OpenProject
Status: closed
URL: https://community.openproject.org/work_packages/OP-12572

## Planning

| Attribute | Value |
| --- | --- |
| Date |  |
| Priority | Low |
| Target versions | 13.0.0 |
| Sprint | 13.0.0 |
| Backlog bucket |  |
| Votes |  |
| List |  |
| Roadmap |  |
| Relevance |  |

## OPEN POINTS / FEEDBACK

_No work packages_

## Features and Chunks

_No work packages_

## Bugs and other work packages

| ID | Type | Subject | Status | Assignee | Target versions | Spent time | Module |
| --- | --- | --- | --- | --- | --- | --- | --- |
| OP-13035 | Bug | Loading indicator in flash message is broken | closed |  | 13.0.0 |  |  |

## Technical Details

| Attribute | Value |
| --- | --- |
| Module |  |
| Feature Flag |  |
| Requires doc change | No |
| Enterprise plan |  |

## Details

| Attribute | Value |
| --- | --- |
| Pull preview |  |
| Mockups |  |
| Found in mobile app version |  |
| Follow-up feedback e-mail |  |
| Accessibility | No |

## People

| Attribute | Value |
| --- | --- |
| Assignee |  |
| Accountable | Birthe Lindenthal |
| Product manager |  |
| Developers |  |
| Designer |  |
| Ordered by |  |
| Signed off by |  |
| Interest by |  |

## Estimates and progress

| Attribute | Value |
| --- | --- |
| PD (min) |  |
| PD (max) |  |
| Work |  |
| Labor costs |  |

## Description

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**

Should 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/global_styles/content/_loading_indicator.sass#L32-L68>

``` 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

``` 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
```