.pf-loading {
  $line-value: 3000;
  animation: fade-out 4s infinite;
  display: block;
  height: 5em;
  margin: 0 auto;
  opacity: 1;
  overflow: visible;
  padding: 1em;

  use {
    stroke: $colour-blue;
    stroke-width: 10px;
    stroke-dasharray: $line-value;
    stroke-dashoffset: $line-value;
    animation: draw-petals 4s infinite;
  }

  &--small {
    height: 3em;
    animation: fader 1s infinite;
    animation-direction: alternate-reverse;

    use {
      animation: none;
      stroke-dashoffset: 0;
      stroke-width: 14px;
    }
  }

  @keyframes draw-petals {
    0% {
      stroke-dashoffset: $line-value;
    }

    8% {
      stroke-dashoffset: 2722;
    } //enter 1st petal

    9% {
      stroke-dashoffset: 2722;
    } //enter 1st petal

    26% {
      stroke-dashoffset: 1923;
    } //enter 2nd petal

    31% {
      stroke-dashoffset: 1923;
    } //leave 2nd petal

    61% {
      stroke-dashoffset: 1126;
    } //enter 3rd petal

    62% {
      stroke-dashoffset: 1126;
    } //leave 3rd petal

    68% {
      stroke-dashoffset: 330;
    } //enter 4th petal

    72% {
      stroke-dashoffset: 330;
    } //leave 4th petal

    85% {
      stroke-dashoffset: 0;
    }

    100% {
      stroke-dashoffset: 0;
    }
  }

  @keyframes fade-out {
    0% {
      opacity: 1;
    }

    90% {
      opacity: 1;
    }

    95% {
      opacity: 0;
    }

    100% {
      opacity: 0;
    }
  }

  @keyframes fader {
    0% {
      opacity: 1;
    }

    100% {
      opacity: 0;
    }
  }
}