framework7/components/preloader/preloader-ios.less

Full featured mobile HTML framework for building iOS & Android apps

.ios {
  .preloader {
    animation: ios-preloader-spin 1s steps(12, end) infinite;
    @offset: 1000% / 5;
    .preloader-inner-line {
      display: block;
      width: 10%;
      height: 25%;
      border-radius: 100px;
      background: var(--f7-preloader-color);
      position: absolute;
      left: 50%;
      top: 50%;
      transform-origin: center @offset;
    }
    @indexes: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11;
    each(@indexes, {
      @index_plus_one: @value + 1;
      @degrees: 360deg / 12 * @value;
      @opacity: 0.27 + (0.85 - 0.27) * @value / 11;
      .preloader-inner-line:nth-child(@{index_plus_one}) {
        transform: translate(-50%, -@offset) rotate(@degrees);
        opacity: @opacity;
      }
    });
  }
}
@keyframes ios-preloader-spin {
  100% {
    transform: rotate(360deg);
  }
}