uprogress

Mixin to generate a custom μProgress style. Allow to customize, class name, height and colors. Generate a monochrome progres bar if one colors is passed or a multi-color animated one if multiple colors are passed.

Output: A CSS class to pass in the class option of the UProgress Javascript module.

Parameters

Examples

A purple progress bar with a height of .25rem

@include uprogress(purple-progress, .25rem, rgb(113, 62, 208));

// CSS Output
.purple-progress {
  ...
  top: 0;
  height: .25rem;
  ...
  background-color: rgb(113, 62, 208);
}
.purple-progress.blur {
  ...
  color: rgb(113, 62, 208);
  ...
}

A multi-color progress bar with default height (2px)

@include uprogress($name: rainbow-progress, $colors: (#17a0d3, #713ed0, #fc8d03, #38ad5d), $position: 'bottom');

// CSS Output
.purple-progress {
  ...
  bottom: 0;
  height: 2px;
  ...
  background-color: #17a0d3;
  background-image: linear-gradient(to right, #17a0d3, #713ed0, #fc8d03, #38ad5d, #17a0d3);
  background-size: 500%;
  animation: 2s linear infinite rainbow-progress, 0.3s fadein;
}
@keyframes fadein { ... }
@keyframes rainbow-progress { ... }

uprogress-colors

Default µProgress color.

Type: Color

Default value: #006be5

uprogress-height

Default µProgress height.

Type: String

Default value: 2px

uprogress-zindex

Z-index value of the µProgress.

Type: Number

Default value: 1000

uprogress-position

Default µProgress posistion (top or bottom).

Type: String

Default value: 'top'