activity indicator

Use this to show the user that waiting for a process to finish is needed.

The activity indicator comes in three sizes:

  • medium (by default)
  • large
  • small, which are controlled by the -large and -small classes
In a live context using the activity indicator, it is highly recommended to switch its aria-live attribute to "polite".

More informations can be found here.
table of content

component variations

default

Open on blank page
<div class="a-activity-indicator" aria-live="off">
  <div class="a-activity-indicator__top-box"></div>
  <div class="a-activity-indicator__bottom-box"></div>
</div>

large

Open on blank page
<div class="a-activity-indicator -large" aria-live="off">
  <div class="a-activity-indicator__top-box"></div>
  <div class="a-activity-indicator__bottom-box"></div>
</div>

small

Open on blank page
<div class="a-activity-indicator -small" aria-live="off">
  <div class="a-activity-indicator__top-box"></div>
  <div class="a-activity-indicator__bottom-box"></div>
</div>

additional content

styles SCSS

// definition of animations mixin to use it with different sizes
@mixin top-box-animation-mixin($name, $size) {

  @keyframes top-box-animation-#{$name} {
    0%,
    100% {
      transform: translate(0, 0);
    }

    12.5% {
      transform: translate(#{$size}, 0);
    }

    24.99% {
      background-color: var(--bosch-red-50);
      transform: translate(0, 0);
    }

    25% {
      background-color: var(--bosch-blue-50);
    }

    37.5% {
      transform: translate(0, #{$size});
    }

    50% {
      transform: translate(0, 0);
    }

    62.5% {
      transform: translate(#{$size}, 0);
    }


    74.99% {
      background-color: var(--bosch-blue-50);
      transform: translate(0, 0);
    }

    75% {
      background-color: var(--bosch-red-50);
    }


    87.5% {
      transform: translate(0, #{$size});
    }
  }
}

@mixin bottom-box-animation-mixin($name, $size) {

  @keyframes bottom-box-animation-#{$name} {
    0%,
    100% {
      transform: translate(0, 0);
      background-color: var(--bosch-purple-50);
    }

    12.5% {
      transform: translate(#{$size}, 0);
      z-index: 2;
    }

    25% {
      transform: translate(0, 0);
      z-index: 2;
    }

    37.5% {
      transform: translate(0, #{$size});
      z-index: 0;
    }

    49.99% {
      transform: translate(0, 0);
      z-index: 0;
      background-color: var(--bosch-purple-50);
    }

    50% {
      background-color: var(--bosch-green-50);
    }

    62.5% {
      transform: translate(#{$size}, 0);
      z-index: 2;
    }

    75% {
      transform: translate(0, 0);
      z-index: 2;
    }

    87.5% {
      transform: translate(0, #{$size});
      z-index: 0;
    }

    99.99% {
      background-color: var(--bosch-green-50);
    }
  }
}

.a-activity-indicator {
  height: 4.5rem;
  width: 4.5rem;
  position: relative;

  &__top-box {

    /**
     * WARNING
     * This animation breaks easily in IE11 and only on some machines and only some times
     * Changes require intensive testing
     * WARNING
     */
    @include top-box-animation-mixin(default, -24px);

    animation-name: top-box-animation-default;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-fill-mode: none;
    background-color: var(--bosch-red-50);
    position: absolute;
    height: calc(100% / 3);
    width: calc(100% / 3);
    top: calc(100% / 3);
    left: calc(100% / 3);
    z-index: 1;

    .a-activity-indicator.-large & {

      @include top-box-animation-mixin(large, -42.66px);

      animation-name: top-box-animation-large;
    }

    .a-activity-indicator.-small & {

      @include top-box-animation-mixin(small, -16px);

      animation-name: top-box-animation-small;
    }
  }

  &__bottom-box {

    /**
    * WARNING
    * This animation breaks easily in IE11 and only on some machines and only some times
    * Changes require intensive testing
    * WARNING
    */
    @include bottom-box-animation-mixin(default,24px);

    animation-name: bottom-box-animation-default;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-fill-mode: none;
    background-color: var(--bosch-purple-50);
    position: absolute;
    height: calc(100% / 3);
    width: calc(100% / 3);
    top: calc(100% / 3);
    left: calc(100% / 3);
    z-index: 0;

    .a-activity-indicator.-large & {

      @include bottom-box-animation-mixin(large, 42.66px);

      animation-name: bottom-box-animation-large;
    }

    .a-activity-indicator.-small & {

      @include bottom-box-animation-mixin(small, 16px);

      animation-name: bottom-box-animation-small;
    }
  }

  &.-large {
    height: 8rem;
    width: 8rem;
  }

  &.-small {
    height: 3rem;
    width: 3rem;
  }
}