framework7/components/progressbar/progressbar.less

Full featured mobile HTML framework for building iOS & Android apps

/* === Progressbar === */
.progressbar, .progressbar-infinite {
  width: 100%;
  overflow: hidden;
  position: relative;
  display: block;
  transform-style: preserve-3d;
}
body, .view, .views, .page, .panel, .popup, .framework7-root {
  > .progressbar, > .progressbar-infinite {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 15000;
    border-radius: 0 !important;
    transform-origin: center top !important;
  }
}
.with-statusbar.device-ios,
.with-statusbar.ios:not(.device-ios):not(.device-android) {
  body, .framework7-root {
    > .progressbar, > .progressbar-infinite {
      top: 20px;
    }
  }
}
.with-statusbar.device-android,
.with-statusbar.md:not(.device-ios):not(.device-android) {
  body, .framework7-root {
    > .progressbar, > .progressbar-infinite {
      top: 24px;
    }
  }
}

.with-statusbar {
  .safe-areas({
    body, .framework7-root {
      > .progressbar, > .progressbar-infinite {
        top: constant(safe-area-inset-top);
        top: env(safe-area-inset-top);
      }
    }
  })
}
.progressbar {
  vertical-align: middle;
  span {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    transform: translate3d(-100%, 0, 0);
    transition-duration: 150ms;
  }
}
.progressbar-infinite {
  &:before, &:after {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform-origin: left center;
    transform: translate3d(0, 0, 0);
    display: block;
  }
  &.color-multi {
    background: none !important;
  }
}
.progressbar-in {
  animation: progressbar-in 150ms forwards;
}
.progressbar-out {
  animation: progressbar-out 150ms forwards;
}

@keyframes progressbar-in {
  from {
    opacity: 0;
    transform: scaleY(0);
  }
  to {
    opacity: 1;
    transform: scaleY(1);
  }
}
@keyframes progressbar-out {
  from {
    opacity: 1;
    transform: scaleY(1);
  }
  to {
    opacity: 0;
    transform: scaleY(0);
  }
}

& when (@includeIosTheme) {
  @import url('./progressbar-ios.less');
}
& when (@includeMdTheme) {
  @import url('./progressbar-md.less');
}