@-moz-keyframes throbber-loader {
  0% {
    background: #dde2e7;
  }
  10% {
    background: gray;
  }
  40% {
    background: #dde2e7;
  }
}
@-webkit-keyframes throbber-loader {
  0% {
    background: #dde2e7;
  }
  10% {
    background: gray;
  }
  40% {
    background: #dde2e7;
  }
}
@keyframes throbber-loader {
  0% {
    background: #dde2e7;
  }
  10% {
    background: gray;
  }
  40% {
    background: #dde2e7;
  }
}
/* :not(:required) hides these rules from IE9 and below */
.throbber-loader:not(:required) {
  -moz-animation: throbber-loader 2000ms 300ms infinite ease-out;
  -webkit-animation: throbber-loader 2000ms 300ms infinite ease-out;
  animation: throbber-loader 2000ms 300ms infinite ease-out;
  background: #dde2e7;
  display: inline-block;
  position: relative;
  text-indent: -9999px;
  width: 0.3em;
  height: 0.9em;
  margin: -6px 0.5em;
}
.throbber-loader:not(:required):before, .throbber-loader:not(:required):after {
  background: #dde2e7;
  content: '\x200B';
  display: inline-block;
  width: 0.25em;
  height: 0.9em;
  position: absolute;
  top: 0;
}
.throbber-loader:not(:required):before {
  -moz-animation: throbber-loader 2000ms 150ms infinite ease-out;
  -webkit-animation: throbber-loader 2000ms 150ms infinite ease-out;
  animation: throbber-loader 2000ms 150ms infinite ease-out;
  left: -0.61em;
}
.throbber-loader:not(:required):after {
  -moz-animation: throbber-loader 2000ms 450ms infinite ease-out;
  -webkit-animation: throbber-loader 2000ms 450ms infinite ease-out;
  animation: throbber-loader 2000ms 450ms infinite ease-out;
  right: -0.55em;
}

/*mobile*/
.mobile.throbber-loader:not(:required) {
  width: 0.17em;
  height: 0.5em;
  margin: -2px 0.4em;
}
.mobile.throbber-loader:not(:required):before, 
.mobile.throbber-loader:not(:required):after {
  width: 0.12em; 
  height: 0.5em;
}
.mobile.throbber-loader:not(:required):before {
  left: -0.31em;
}
.mobile.throbber-loader:not(:required):after {
  right: -0.25em;
}

/*project*/
.project-detail-loader.throbber-loader:not(:required) {
  width: 1.5em;
  height: 3em;
  margin: 100px auto;
}
.project-detail-loader.throbber-loader:not(:required):before, 
.project-detail-loader.throbber-loader:not(:required):after {
  width: 1.5em; 
  height: 3em;
}
.project-detail-loader.throbber-loader:not(:required):before {
  left: -2em;
}
.project-detail-loader.throbber-loader:not(:required):after {
  right: -2em;
}