framework7/components/progressbar/progressbar-md.less

Full featured mobile HTML framework for building iOS & Android apps

.md {
  @red: #f44336;
  @blue: #2196f3;
  @green: #4caf50;
  @yellow: #ffeb3b;
  .progressbar:not(.progressbar-infinite) {
    &::after {
      content: '';
      position: absolute;
      width: var(--f7-progressbar-height);
      height: var(--f7-progressbar-height);
      border-radius: var(--f7-progressbar-border-radius);
      right: 0;
      top: 0;
      background: var(--f7-progressbar-progress-color, var(--f7-theme-color));
    }
  }
  .progressbar-infinite {
    &:before {
      animation: md-progressbar-infinite-1 2s linear infinite;
    }
    &:after {
      animation: md-progressbar-infinite-2 2s linear infinite;
    }
    &.color-multi {
      &:before {
        background: none;
        animation: md-progressbar-infinite-multicolor-bg 3s step-end infinite;
      }
      &:after {
        background: none;
        animation: md-progressbar-infinite-multicolor-fill 3s linear infinite;
        transform-origin: center center;
      }
    }
  }
  .ltr({
    @keyframes md-progressbar-infinite-1 {
      0% {
        transform: translateX(-10%) scaleX(0.1);
      }
      25% {
        transform: translateX(30%) scaleX(0.6);
      }
      50% {
        transform: translateX(100%) scaleX(1);
      }
      100% {
        transform: translateX(100%) scaleX(1);
      }
    }
    @keyframes md-progressbar-infinite-2 {
      0% {
        transform: translateX(-100%) scaleX(1);
      }
      40% {
        transform: translateX(-100%) scaleX(1);
      }
      75% {
        transform: translateX(60%) scaleX(0.35);
      }
      90% {
        transform: translateX(100%) scaleX(0.1);
      }
      100% {
        transform: translateX(100%) scaleX(0.1);
      }
    }
  });

  .rtl({
    @keyframes md-progressbar-infinite-1 {
      0% {
        transform: translateX(10%) scaleX(0.1);
      }
      25% {
        transform: translateX(-30%) scaleX(0.6);
      }
      50% {
        transform: translateX(-100%) scaleX(1);
      }
      100% {
        transform: translateX(-100%) scaleX(1);
      }
    }
    @keyframes md-progressbar-infinite-2 {
      0% {
        transform: translateX(100%) scaleX(1);
      }
      40% {
        transform: translateX(100%) scaleX(1);
      }
      75% {
        transform: translateX(-60%) scaleX(0.35);
      }
      90% {
        transform: translateX(-100%) scaleX(0.1);
      }
      100% {
        transform: translateX(-100%) scaleX(0.1);
      }
    }
  });

  @keyframes md-progressbar-infinite-multicolor-bg {
    0% {
      background-color: @green;
    }
    25% {
      background-color: @red;
    }
    50% {
      background-color: @blue;
    }
    75% {
      background-color: @yellow;
    }
  }
  @keyframes md-progressbar-infinite-multicolor-fill {
    0% {
      transform: scaleX(0);
      background-color: @red;
    }
    24.9% {
      transform: scaleX(1);
      background-color: @red;
    }
    25% {
      transform: scaleX(0);
      background-color: @blue;
    }
    49.9% {
      transform: scaleX(1);
      background-color: @blue;
    }
    50% {
      transform: scaleX(0);
      background-color: @yellow;
    }
    74.9% {
      transform: scaleX(1);
      background-color: @yellow;
    }
    75% {
      transform: scaleX(0);
      background-color: @green;
    }
    100% {
      transform: scaleX(1);
      background-color: @green;
    }
  }
}