react-toolbox-build4server/react-toolbox/js/progress_bar/style.css

Builds react-toolbox in such a way that it's components can be required and used in node - most likely for server-side rendered webapps - without having to depend on webpack to build your entire server-side project

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

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

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

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

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

.rt-progress_bar-circle {
  width: 100%;
  height: 100%; }

.rt-progress_bar-path {
  -webkit-transition: stroke-dasharray 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  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; }

@-webkit-keyframes linear-indeterminate-bar {
  0% {
    -webkit-transform: translate(-50%) scaleX(0);
    transform: translate(-50%) scaleX(0); }
  50% {
    -webkit-transform: translate(0%) scaleX(0.3);
    transform: translate(0%) scaleX(0.3); }
  100% {
    -webkit-transform: translate(50%) scaleX(0);
    transform: translate(50%) scaleX(0); } }

@keyframes linear-indeterminate-bar {
  0% {
    -webkit-transform: translate(-50%) scaleX(0);
    transform: translate(-50%) scaleX(0); }
  50% {
    -webkit-transform: translate(0%) scaleX(0.3);
    transform: translate(0%) scaleX(0.3); }
  100% {
    -webkit-transform: translate(50%) scaleX(0);
    transform: translate(50%) scaleX(0); } }

@-webkit-keyframes circular-indeterminate-bar-rotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

@keyframes circular-indeterminate-bar-rotate {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }

@-webkit-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 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; } }

@-webkit-keyframes colors {
  0% {
    stroke: #4285f4; }
  25% {
    stroke: #de3e35; }
  50% {
    stroke: #f7c223; }
  75% {
    stroke: #1b9a59; }
  100% {
    stroke: #4285f4; } }

@keyframes colors {
  0% {
    stroke: #4285f4; }
  25% {
    stroke: #de3e35; }
  50% {
    stroke: #f7c223; }
  75% {
    stroke: #1b9a59; }
  100% {
    stroke: #4285f4; } }