goldfish-search/src/ui/ProgressBar.styles.css

A SharePoint 2013 inline People Search component

.linear {
  position: relative;
  display: inline-block;
  width: 100%;
  height: 0.4rem;
  overflow: hidden;
  background: #eeeeee;
}
.linear.indeterminate .value {
  transform-origin: center center;
  animation: linear-indeterminate-bar 1s linear infinite;
}

.value, .buffer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.35s;
  transform: scaleX(0);
  transform-origin: left center;
}

.value {
  background-color: #3f51b5;
}

.buffer {
  background-image: linear-gradient(to right, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), linear-gradient(to right, #3f51b5, #3f51b5);
}

.circular {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 60px;
  transform: rotate(-90deg);
}
.circular.indeterminate .circle {
  animation: circular-indeterminate-bar-rotate 2s linear infinite;
}
.circular.indeterminate .path {
  animation: circular-indeterminate-bar-dash 1.5s ease-in-out infinite;
  stroke-dasharray: 1.25, 250;
  stroke-dashoffset: 0;
}
.circular.indeterminate.multicolor .path {
  animation: circular-indeterminate-bar-dash 1.5s ease-in-out infinite, colors 6s ease-in-out infinite;
}

.circle {
  width: 100%;
  height: 100%;
}

.path {
  transition: stroke-dasharray 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  fill: none;
  stroke-dasharray: 0, 250;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  stroke-miterlimit: 20;
  stroke-width: 4;
  stroke: #3f51b5;
}

@keyframes linear-indeterminate-bar {
  0% {
    transform: translate(-50%) scaleX(0);
  }
  50% {
    transform: translate(0%) scaleX(0.3);
  }
  100% {
    transform: translate(50%) scaleX(0);
  }
}
@keyframes circular-indeterminate-bar-rotate {
  100% {
    transform: rotate(360deg);
  }
}
@keyframes circular-indeterminate-bar-dash {
  0% {
    stroke-dasharray: 1.25, 250;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 111.25, 250;
    stroke-dashoffset: -43.75;
  }
  100% {
    stroke-dasharray: 111.25, 250;
    stroke-dashoffset: -155;
  }
}
@keyframes colors {
  0% {
    stroke: #4285f4;
  }
  25% {
    stroke: #de3e35;
  }
  50% {
    stroke: #f7c223;
  }
  75% {
    stroke: #1b9a59;
  }
  100% {
    stroke: #4285f4;
  }
}