/* ==============
 * Loading bar
 * ==============
 */
.loading-bar {
  border-radius: 4px;
  height: @base-spacing-unit ;
  max-width: @health-bar-width;

  background-image: linear-gradient(
          -45deg,
          @health-bar-inner-color 25%,
          fade(@shark, 0) 25%,
          fade(@shark, 0) 50%,
          @health-bar-inner-color 50%,
          @health-bar-inner-color 75%,
          fade(@shark, 0) 75%
  );
  background-color: @task-health-unknown-color;
  background-size: 12px 12px;
  animation: move 2s linear infinite;
  -ms-animation-name: move;
}

@keyframes move {
  to { background-position: 12px 12px; }
}

/* ==============
 * Loading bar
 * ==============
 */
.loading-bar {
  border-radius: 4px;
  height: @base-spacing-unit ;
  max-width: @health-bar-width;

  background-image: linear-gradient(
          -45deg,
          @health-bar-inner-color 25%,
          fade(@shark, 0) 25%,
          fade(@shark, 0) 50%,
          @health-bar-inner-color 50%,
          @health-bar-inner-color 75%,
          fade(@shark, 0) 75%
  );
  background-color: @task-health-unknown-color;
  background-size: 12px 12px;
  animation: move 2s linear infinite;
  -ms-animation-name: move;
}

@keyframes move {
  to { transform: translate3D(-24px, 0, 0); }
}

Use CSS transforms for better performance
Use CSS transforms for better performance

Animating CSS properties is really expensive.

This fixes mesosphere/marathon#3304
