SemanSemantic-UItic-UI/rtl/minified/elements/progress.min.css

.ui.progress {
  border: 1px solid rgba(0,0,0,.1);
  width: 100%;
  height: 35px;
  background-color: #FAFAFA;
  padding: 5px;
  border-radius: .3125em;
  -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: #CCC;
  border-radius: 3px;
  -webkit-transition: width 1s ease-in-out,background-color 1s ease-out;
  transition: width 1s ease-in-out,background-color 1s ease-out;
}

.ui.successful.progress .bar {
  background-color: #73E064!important;
}

.ui.successful.progress .bar,
.ui.successful.progress .bar::after {
  -webkit-animation: none!important;
  animation: none!important;
}

.ui.failed.progress .bar {
  background-color: #DF9BA4!important;
}

.ui.failed.progress .bar,
.ui.failed.progress .bar::after {
  -webkit-animation: none!important;
  animation: none!important;
}

.ui.active.progress .bar {
  position: relative;
}

.ui.active.progress .bar::after {
  content: '';
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: #FFF;
  border-radius: 3px;
  -webkit-animation: progress-active 2s ease-out infinite;
  animation: progress-active 2s ease-out infinite;
}

@-webkit-keyframes progress-active {
  0% {
    opacity: 0;
    width: 0;
  }

  50% {
    opacity: .3;
  }

  100% {
    opacity: 0;
    width: 95%;
  }
}

@keyframes progress-active {
  0% {
    opacity: 0;
    width: 0;
  }

  50% {
    opacity: .3;
  }

  100% {
    opacity: 0;
    width: 100%;
  }
}

.ui.disabled.progress {
  opacity: .35;
}

.ui.disabled.progress .bar,
.ui.disabled.progress .bar::after {
  -webkit-animation: none!important;
  animation: none!important;
}

.ui.progress.attached {
  position: relative;
  border: 0;
}

.ui.progress.attached,
.ui.progress.attached .bar {
  display: block;
  height: 3px;
  padding: 0;
  overflow: hidden;
  border-radius: 0 0 .3125em .3125em;
}

.ui.progress.attached .bar {
  border-radius: 0;
}

.ui.progress.top.attached,
.ui.progress.top.attached .bar {
  top: -2px;
  border-radius: .3125em .3125em 0 0;
}

.ui.progress.top.attached .bar {
  border-radius: 0;
}

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

.ui.black.progress .bar {
  background-color: #5C6166;
}

.ui.green.progress .bar {
  background-color: #A1CF64;
}

.ui.red.progress .bar {
  background-color: #EF4D6D;
}

.ui.purple.progress .bar {
  background-color: #564F8A;
}

.ui.teal.progress .bar {
  background-color: #00B5AD;
}

.ui.progress.striped .bar {
  -webkit-background-size: 30px 30px;
  background-size: 30px 30px;
  background-image: -webkit-gradient(linear,right top,left bottom,color-stop(0.25,rgba(255,255,255,.15)),color-stop(0.25,transparent),color-stop(0.5,transparent),color-stop(0.5,rgba(255,255,255,.15)),color-stop(0.75,rgba(255,255,255,.15)),color-stop(0.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: -webkit-linear-gradient(315deg, 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);
}

.ui.progress.active.striped .bar:after {
  -webkit-animation: none;
  -ms-animation: none;
  animation: none;
}

.ui.progress.active.striped .bar {
  -webkit-animation: progress-striped 3s linear infinite;
  animation: progress-striped 3s linear infinite;
}

@-webkit-keyframes progress-striped {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 60px 0;
  }
}

@keyframes progress-striped {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: 60px 0;
  }
}

.ui.small.progress .bar {
  height: 14px;
}