SemanSemantic-UItic-UI/build/less/definitions/elements/progress.less

 /*
 * # Semantic - Progress Bar
 * http://github.com/semantic-org/semantic-ui/
 *
 *
 * Copyright 2014 Contributors
 * Released under the MIT license
 * http://opensource.org/licenses/MIT
 *
 */

/*******************************
            Theme
*******************************/

@type    : 'element';
@element : 'progress';

@import '../../semantic.config';

.ui.progress {
  border: 1px solid rgba(0, 0, 0, 0.1);

  width: 100%;
  height: 35px;

  background-color: #FAFAFA;
  padding: 5px;
  border-radius: 0.3125em;

}

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

  background-color: #CCCCCC;
  border-radius: 3px;

  transition:
    width 1s ease-in-out,
    background-color 1s ease-out
  ;
}


/*******************************
            States
*******************************/


/*--------------
  Successful
---------------*/

.ui.successful.progress .bar {
  background-color: @positiveColor !important;
}
.ui.successful.progress .bar,
.ui.successful.progress .bar::after {
  animation: none !important;
}

.ui.warning.progress .bar {
  background-color: @yellow !important;
}
.ui.warning.progress .bar,
.ui.warning.progress .bar::after {
  animation: none !important;
}

/*--------------
     Failed
---------------*/

.ui.failed.progress .bar {
  background-color: @negativeColor !important;
}
.ui.failed.progress .bar,
.ui.failed.progress .bar::after {
  animation: none !important;
}

/*--------------
     Active
---------------*/

.ui.active.progress .bar {
  position: relative;
}
.ui.active.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;

  animation: progress-active 2s ease-out infinite;
}
@keyframes progress-active {
  0% {
    opacity: 0;
    width: 0;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 0;
    width: 100%;
  }
}

/*--------------
    Disabled
---------------*/

.ui.disabled.progress {
  opacity: 0.35;
}
.ui.disabled.progress .bar,
.ui.disabled.progress .bar::after {
  animation: none !important;
}



/*******************************
           Variations
*******************************/


/*--------------
    Attached
---------------*/

/* bottom attached */
.ui.progress.attached {
  position: relative;
  border: none;
}
.ui.progress.attached,
.ui.progress.attached .bar {
  display: block;
  height: 3px;
  padding: 0px;
  overflow: hidden;
  border-radius: 0em 0em 0.3125em 0.3125em;
}
.ui.progress.attached .bar {
  border-radius: 0em;
}

/* top attached */
.ui.progress.top.attached,
.ui.progress.top.attached .bar {
  top: 0px;
  border-radius: 0.3125em 0.3125em 0em 0em;
}
.ui.progress.top.attached .bar {
  border-radius: 0em;
}


/*--------------
     Colors
---------------*/

.ui.blue.progress .bar {
  background-color: @blue;
}
.ui.black.progress .bar {
  background-color: @black;
}
.ui.green.progress .bar {
  background-color: @green;
}
.ui.red.progress .bar {
  background-color: @red;
}
.ui.purple.progress .bar {
  background-color: @purple;
}
.ui.teal.progress .bar {
  background-color: @teal;
}


/*--------------
    Striped
---------------*/

.ui.progress.striped .bar {
  background-size: 30px 30px;
  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 {
  animation: none;
}
.ui.progress.active.striped .bar {
  animation: progress-striped 3s linear infinite;
}
@keyframes progress-striped {
  0% {
    background-position: 0px 0;
  }
  100% {
    background-position: 60px 0;
  }
}


/*--------------
     Sizes
---------------*/

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