zui/src/less/controls/progress-bars.less

一个基于 Bootstrap 深度定制开源前端实践方案，帮助你快速构建现代跨屏应用。

/// ========================================================================
/// Bootstrap: progress-bars.less
/// https://github.com/twbs/bootstrap/blob/master/less/progress-bars.less
///
/// ZUI: The file has been changed in ZUI. It will not keep update with the
/// Bootsrap version in the future.
/// http://openzui.com
/// ========================================================================
/// Bootrap: Copyright 2011-2016 Twitter, Inc. Licensed under MIT
/// ========================================================================


// Bar animations

@keyframes progress-bar-stripes {
  from  { background-position: 40px 0; }
  to    { background-position: 0 0; }
}


// Bar itself

// Outer container
.progress  {
  overflow: hidden;
  height: @progress-bar-height;
  margin-bottom: @line-height-computed;
  background-color: @progress-bg;
  border-radius: @progress-bar-radius;
}

// Bar of progress
.progress-bar  {
  float: left;
  width: 0%;
  height: 100%;
  font-size: @font-size-small;
  color: @progress-bar-color;
  text-align: center;
  background-color: @progress-bar-bg;
  .transition(width .6s ease);
  .progress > &:first-child {
    border-top-left-radius: @progress-bar-radius;
    border-bottom-left-radius: @progress-bar-radius;
  }
  .progress > &:last-child {
    border-top-right-radius: @progress-bar-radius;
    border-bottom-right-radius: @progress-bar-radius;
  }
}

// Striped bars
.progress-striped .progress-bar  {
  #gradient > .striped();
  background-size: 40px 40px;
}

// Call animation for the active one
.progress.active .progress-bar  {
  animation: progress-bar-stripes 2s linear infinite;
}

// Variations
// -------------------------

.progress-bar-success { .progress-bar-variant(@progress-bar-success-bg); }
.progress-bar-info    { .progress-bar-variant(@progress-bar-info-bg); }
.progress-bar-warning { .progress-bar-variant(@progress-bar-warning-bg); }
.progress-bar-danger  { .progress-bar-variant(@progress-bar-danger-bg); }