SemanSemantic-UItic-UI/docs/ui/classic/elements/progress.css

.ui.progress {
  border: 1px solid #DDDDDD;

  width: 350px;
  max-width: 100%;
  height: 35px;

  background-color: #FAFAFA;
  padding: 5px;

  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;

  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

.ui.progress .bar {
  display: inline-block;
  height: 100%;

  background-color: #CCCCCC;

  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;

  -moz-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5) inset;
  -webkit-box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5) inset;
  box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5) inset;

  -webkit-transition: 
    width 1s ease-out,
    background-color 1s ease-out
  ;
  -moz-transition: 
    width 1s ease-out,
    background-color 1s ease-out
  ;
  -ms-transition: 
    width 1s ease-out,
    background-color 1s ease-out
  ;
  -o-transition: 
    width 1s ease-out,
    background-color 1s ease-out
  ;
  transition: 
    width 1s ease-out,
    background-color 1s ease-out
  ;
}


/* Colors */
.ui.blue.progress .bar {
  background-color: #6ECFF5;
}

/* Fluid Width */
.ui.fluid.progress {
  width: 100%;
}

/* State */
.ui.success.progress .bar {
  background-color: #73E064 !important;
}
.ui.success.progress .bar,
.ui.success.progress .bar::after {
  -webkit-animation: none !important;
  -moz-animation: none !important;
}
.ui.error.progress .bar {
  background-color: #DF9BA4 !important;
}
.ui.error.progress .bar,
.ui.error.progress .bar::after {
  -webkit-animation: none !important;
  -moz-animation: none !important;
}


/* Variations */


.ui.progress.striped .bar {
  -webkit-background-size: 30px 30px;
  -moz-background-size: 30px 30px;
  background-size: 30px 30px;
  background-image:
    -webkit-gradient(linear, left top, right bottom,
      color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent),
      color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)),
      color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent),
      to(transparent)
    )
  ;
  background-image:
    -webkit-linear-gradient(
      135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
      transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
      transparent 75%, transparent
    )
  ;
  background-image:
    -moz-linear-gradient(
      135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
      transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
      transparent 75%, transparent
    )
  ;
  background-image:
    -ms-linear-gradient(
      135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
      transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
      transparent 75%, transparent
    )
  ;
  background-image:
    -o-linear-gradient(
      135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
      transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
      transparent 75%, transparent
    )
  ;
  background-image:
    linear-gradient(
      135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
      transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
      transparent 75%, transparent
    )
  ;

  -webkit-animation: animate-striped 3s linear infinite;
  -moz-animation: animate-striped 3s linear infinite;
}

@-webkit-keyframes animate-striped {
  0% {
    background-position: 0px 0;
  }
  100% {
    background-position: 60px 0;
  }
}
@-moz-keyframes animate-striped {
  0% {
    background-position: 0px 0;
  }
  100% {
    background-position: 60px 0;
  }
}
@keyframes animate-striped {
  0% {
    background-position: 0px 0;
  }
  100% {
    background-position: 60px 0;
  }
}

/* Shining animation */
.ui.shiny.progress .bar {
  position: relative;
}
.ui.shiny.progress .bar::after {
  content: '';
  opacity: 0;

  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  background: #FFFFFF;

  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;

  -webkit-animation: animate-shiny 2s ease-out infinite;
  -moz-animation: animate-shiny 2s ease-out infinite;
}

@-webkit-keyframes animate-shiny {
  0% {
    opacity: 0;
    width: 0;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 0;
    width: 95%;
  }
}
@-moz-keyframes animate-shiny {
  0% {
    opacity: 0;
    width: 0;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 0;
    width: 100%;
  }
}
@keyframes animate-shiny {
  0% {
    opacity: 0;
    width: 0;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 0;
    width: 100%;
  }
}

/* Glowing animation */
.ui.glowing.progress .bar {
  -moz-box-shadow:
    0px 5px 5px rgba(255, 255, 255, 0.7) inset,
    0px -5px 5px rgba(255, 255, 255, 0.7) inset
  ;
  -webkit-box-shadow:
    0px 5px 5px rgba(255, 255, 255, 0.7) inset,
    0px -5px 5px rgba(255, 255, 255, 0.7) inset
  ;
  box-shadow:
    0px 5px 5px rgba(255, 255, 255, 0.7) inset,
    0px -5px 5px rgba(255, 255, 255, 0.7) inset
  ;
  -webkit-animation: animate-glow 1s ease-out infinite;
  -moz-animation: animate-glow 1s ease-out infinite;
}

@-webkit-keyframes animate-glow {
  0% {
    -webkit-box-shadow:
      0px 5px 5px rgba(255, 255, 255, 0.7) inset,
      0px -5px 5px rgba(255, 255, 255, 0.7) inset
    ;
    box-shadow:
      0px 5px 5px rgba(255, 255, 255, 0.7) inset,
      0px -5px 5px rgba(255, 255, 255, 0.7) inset
    ;
  }
  50% {
    -webkit-box-shadow:
      0px 5px 5px rgba(255, 255, 255, 0.3) inset,
      0px -5px 5px rgba(255, 255, 255, 0.3) inset
    ;
    box-shadow:
      0px 5px 5px rgba(255, 255, 255, 0.3) inset,
      0px -5px 5px rgba(255, 255, 255, 0.3) inset
    ;
  }
  100% {
    -webkit-box-shadow:
      0px 5px 5px rgba(255, 255, 255, 0.7) inset,
      0px -5px 5px rgba(255, 255, 255, 0.7) inset
    ;
    box-shadow:
      0px 5px 5px rgba(255, 255, 255, 0.7) inset,
      0px -5px 5px rgba(255, 255, 255, 0.7) inset
    ;
  }
}

@-moz-keyframes animate-glow {
  0% {
    -moz-box-shadow:
      0px 5px 5px rgba(255, 255, 255, 0.7) inset,
      0px -5px 5px rgba(255, 255, 255, 0.7) inset
    ;
    box-shadow:
      0px 5px 5px rgba(255, 255, 255, 0.7) inset,
      0px -5px 5px rgba(255, 255, 255, 0.7) inset
    ;
  }
  50% {
    -moz-box-shadow:
      0px 5px 5px rgba(255, 255, 255, 0.3) inset,
      0px -5px 5px rgba(255, 255, 255, 0.3) inset
    ;
    box-shadow:
      0px 5px 5px rgba(255, 255, 255, 0.3) inset,
      0px -5px 5px rgba(255, 255, 255, 0.3) inset
    ;
  }
  100% {
    -moz-box-shadow:
      0px 5px 5px rgba(255, 255, 255, 0.7) inset,
      0px -5px 5px rgba(255, 255, 255, 0.7) inset
    ;
    box-shadow:
      0px 5px 5px rgba(255, 255, 255, 0.7) inset,
      0px -5px 5px rgba(255, 255, 255, 0.7) inset
    ;
  }
}