@-webkit-keyframes throbber {
  0% {
    background: #dde2e7;
  }

  10% {
    background: #6b9dc8;
  }

  40% {
    background: #dde2e7;
  }
}

@-moz-keyframes throbber {
  0% {
    background: #dde2e7;
  }

  10% {
    background: #6b9dc8;
  }

  40% {
    background: #dde2e7;
  }
}

@-o-keyframes throbber {
  0% {
    background: #dde2e7;
  }

  10% {
    background: #6b9dc8;
  }

  40% {
    background: #dde2e7;
  }
}

@keyframes throbber {
  0% {
    background: #dde2e7;
  }

  10% {
    background: #6b9dc8;
  }

  40% {
    background: #dde2e7;
  }
}

/* :not(:required) hides these rules from IE9 and below */
.throbber:not(:required) {
  -webkit-animation: throbber 2000ms 300ms infinite ease-out;
  -moz-animation: throbber 2000ms 300ms infinite ease-out;
  -ms-animation: throbber 2000ms 300ms infinite ease-out;
  -o-animation: throbber 2000ms 300ms infinite ease-out;
  animation: throbber 2000ms 300ms infinite ease-out;
  background: #dde2e7;
  display: inline-block;
  position: relative;
  text-indent: -9999px;
  width: 0.9em;
  height: 1.5em;
  margin: 0 1.6em;
}
.throbber:not(:required):before, .throbber:not(:required):after {
  background: #dde2e7;
  content: '\x200B';
  display: inline-block;
  width: 0.9em;
  height: 1.5em;
  position: absolute;
  top: 0;
}
.throbber:not(:required):before {
  -webkit-animation: throbber 2000ms 150ms infinite ease-out;
  -moz-animation: throbber 2000ms 150ms infinite ease-out;
  -ms-animation: throbber 2000ms 150ms infinite ease-out;
  -o-animation: throbber 2000ms 150ms infinite ease-out;
  animation: throbber 2000ms 150ms infinite ease-out;
  left: -1.6em;
}
.throbber:not(:required):after {
  -webkit-animation: throbber 2000ms 450ms infinite ease-out;
  -moz-animation: throbber 2000ms 450ms infinite ease-out;
  -ms-animation: throbber 2000ms 450ms infinite ease-out;
  -o-animation: throbber 2000ms 450ms infinite ease-out;
  animation: throbber 2000ms 450ms infinite ease-out;
  right: -1.6em;
}
