Loading states

It's important to show users that the screen is not frozen. We have two different types of loaders to give the user feedback that we are currently working on the request. The loaders are not visible to the user until a request has been started.

 
 
General CSS for loading states

.spinner {
  width: 32px;
  height: 32px;
  -webkit-animation: spinner-rotation 1.4s linear infinite;
  animation: spinner-rotation 1.4s linear infinite;
}

.spinner .spinner-path {
  stroke-linecap: round;
  stroke-dasharray: 187;
  stroke-dashoffset: 0;
  fill: none;
  -webkit-transform-origin: center;
  transform-origin: center;
  -webkit-animation: spinner-dash 1.4s ease-in-out infinite, spinner-colors 5.6s ease-in-out infinite;
  animation: spinner-dash 1.4s ease-in-out infinite, spinner-colors 5.6s ease-in-out infinite;
}

@-webkit-keyframes spinner-rotation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }
}

@keyframes spinner-rotation {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
  }
}

@-webkit-keyframes spinner-colors {
  0% {
    stroke: #14608f;
  }

  25% {
    stroke: #0277bd;
  }

  50% {
    stroke: #2796c9;
  }

  75% {
    stroke: #53bbd8;
  }

  to {
    stroke: #b3f0f7;
  }
}

@keyframes spinner-colors {
  0% {
    stroke: #14608f;
  }

  25% {
    stroke: #0277bd;
  }

  50% {
    stroke: #2796c9;
  }

  75% {
    stroke: #53bbd8;
  }

  to {
    stroke: #b3f0f7;
  }
}

@-webkit-keyframes spinner-dash {
  0% {
    stroke-dashoffset: 187;
  }

  50% {
    stroke-dashoffset: 46.75;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
  }

  to {
    stroke-dashoffset: 187;
    -webkit-transform: rotate(450deg);
    transform: rotate(450deg);
  }
}

@keyframes spinner-dash {
  0% {
    stroke-dashoffset: 187;
  }

  50% {
    stroke-dashoffset: 46.75;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
  }

  to {
    stroke-dashoffset: 187;
    -webkit-transform: rotate(450deg);
    transform: rotate(450deg);
  }
}

Circular loading state variations

Small circular loader


 
 
Regular circular loader


 
 
Large circular loader


 
 
Additional CSS for the circular loaders

.spinner.spinner-small {
  width: 16px;
  height: 16px;
}
 
.spinner.spinner-large {
  width: 48px;
  height: 48px;
}

Placeholder loader

Motion is used in a placeholder loader to convey that the page is not stuck loading but rather that data is still being pulled in. They should only appear for 1-3 seconds, disappearing once the actual content loads in.

 
 
Additional CSS for the placeholder loader

.placeholder {
  height: 200px;
  -webkit-animation: placeholder-animation 2.2s ease infinite;
  animation: placeholder-animation 2.2s ease infinite;
  background-size: 300% 300%;
  background-image: linear-gradient(-61deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 60%);
  background-color: rgba(238, 244, 248, 1);
  background-position: 0 0;
}

@-webkit-keyframes placeholder-animation {
  0% {
    background-position: 100% 50%;
  }

  to {
    background-position: 0 50%;
  }
}

@keyframes placeholder-animation {
  0% {
    background-position: 100% 50%;
  }

  to {
    background-position: 0 50%;
  }
}