@pi0/framework7/src/components/progressbar/progressbar-ios.less

Full featured mobile HTML framework for building iOS & Android apps

.ios {
  @import (multiple) '../../less/colors-ios.less';
  .progressbar, .progressbar-infinite {
    height: 2px;
    background: #b6b6b6;
    transform-origin: center top;
    border-radius: 2px;
  }
  .progressbar {
    span {
      background: @themeColor;
    }
  }
  .progressbar-infinite {
    &:before {
      content: '';
      background: @themeColor;
      animation: ios-progressbar-infinite 1s linear infinite;
    }
    &.color-multi:before {
      width: 400%;
      background-image: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55, #5856d6, #34aadc, #007aff, #5ac8fa, #4cd964);
      background-size: 25% 100%;
      background-repeat: repeat-x;
      animation: ios-progressbar-infinite-multicolor 3s linear infinite;
    }
  }
  .color-theme-loop({
    .color-theme-@{colorThemeName} .progressbar {
      span {
        background: @colorThemeValue;
      }
    }
    .color-theme-@{colorThemeName} .progressbar-infinite {
      &:before {
        background: @colorThemeValue;
      }
    }
  });
  .color-loop({
    .progressbar.color-@{colorName} {
      span {
        background: @colorValue;
      }
    }
    .progressbar-infinite.color-@{colorName} {
      &:before {
        background: @colorValue;
      }
    }
  });
}

@keyframes ios-progressbar-infinite {
  0% {
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    transform: translate3d(100%, 0, 0);
  }
}
@keyframes ios-progressbar-infinite-multicolor {
  0% {
    transform: translate3d(0%, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}