.colourfulBar {
    width: 0;
    max-width: 1600px;
    height: 3px;
    margin: auto;
    background: -webkit-gradient(linear, left top, right top, color-stop(0, #00a1e0), color-stop(25%, #a5cd06), color-stop(50%, #ffd328), color-stop(75%, #f88014), color-stop(100%, #fd4646));
    background: -webkit-linear-gradient(left, #00a1e0 0, #a5cd06 25%, #ffd328 50%, #f88014 75%, #fd4646 100%);
    background: -moz-linear-gradient(left, #00a1e0 0, #a5cd06 25%, #ffd328 50%, #f88014 75%, #fd4646 100%);
    background: -o-linear-gradient(left, #00a1e0 0, #a5cd06 25%, #ffd328 50%, #f88014 75%, #fd4646 100%);
    background: linear-gradient(to right, #00a1e0 0, #a5cd06 25%, #ffd328 50%, #f88014 75%, #fd4646 100%);
      -webkit-animation-name: stretchWidth;
      -moz-animation-name: stretchWidth;
      -o-animation-name: stretchWidth;
      animation-name: stretchWidth;
      -webkit-animation-iteration-count: 1;
      -moz-animation-iteration-count: 1;
      -o-animation-iteration-count: 1;
      animation-iteration-count: 1;
      -webkit-animation-fill-mode: forwards;
      -moz-animation-fill-mode: forwards;
      -o-animation-fill-mode: forwards;
      animation-fill-mode: forwards;
      -webkit-animation-timing-function: ease-out;
      -moz-animation-timing-function: ease-out;
      -o-animation-timing-function: ease-out;
      animation-timing-function: ease-out;
      -webkit-animation-duration: .4s;
      -moz-animation-duration: .4s;
      -o-animation-duration: .4s;
      animation-duration: .4s;
  }
  
  @-webkit-keyframes stretchWidth {
      0% {
          width: 0
      }
      100% {
          width: 100%
      }
  }
  @-moz-keyframes stretchWidth {
      0% {
          width: 0
      }
      100% {
          width: 100%
      }
  }
  @-o-keyframes stretchWidth {
      0% {
          width: 0
      }
      100% {
          width: 100%
      }
  }
  @keyframes stretchWidth {
      0% {
          width: 0
      }
      100% {
          width: 100%
      }
  }