@xenknight/framework7 0.0.2

package/components/preloader/preloader.js

@@ -0,0 +1,106 @@
+import $ from '../../shared/dom7.js';
+import { bindMethods, iosPreloaderContent, mdPreloaderContent } from '../../shared/utils.js';
+const Preloader = {
+  init(el) {
+    const app = this;
+    const preloaders = {
+      iosPreloaderContent,
+      mdPreloaderContent
+    };
+    const $el = $(el);
+    if ($el.length === 0 || $el.children('.preloader-inner').length > 0 || $el.children('.preloader-inner-line').length > 0) return;
+    $el.append(preloaders[`${app.theme}PreloaderContent`]);
+  },
+  // Modal
+  visible: false,
+  show(color) {
+    if (color === void 0) {
+      color = 'white';
+    }
+    const app = this;
+    if (Preloader.visible) return;
+    const preloaders = {
+      iosPreloaderContent,
+      mdPreloaderContent
+    };
+    const preloaderInner = preloaders[`${app.theme}PreloaderContent`] || '';
+    $('html').addClass('with-modal-preloader');
+    // prettier-ignore
+    app.$el.append(`
+      <div class="preloader-backdrop"></div>
+      <div class="preloader-modal">
+        <div class="preloader color-${color}">${preloaderInner}</div>
+      </div>
+    `);
+    Preloader.visible = true;
+  },
+  showIn(el, color) {
+    if (color === void 0) {
+      color = 'white';
+    }
+    const app = this;
+    const preloaders = {
+      iosPreloaderContent,
+      mdPreloaderContent
+    };
+    const preloaderInner = preloaders[`${app.theme}PreloaderContent`] || '';
+    $(el || 'html').addClass('with-modal-preloader');
+    // prettier-ignore
+    $(el || app.$el).append(`
+      <div class="preloader-backdrop"></div>
+      <div class="preloader-modal">
+        <div class="preloader color-${color}">${preloaderInner}</div>
+      </div>
+    `);
+  },
+  hide() {
+    const app = this;
+    if (!Preloader.visible) return;
+    $('html').removeClass('with-modal-preloader');
+    app.$el.find('.preloader-backdrop, .preloader-modal').remove();
+    Preloader.visible = false;
+  },
+  hideIn(el) {
+    const app = this;
+    $(el || 'html').removeClass('with-modal-preloader');
+    $(el || app.$el).find('.preloader-backdrop, .preloader-modal').remove();
+  }
+};
+export default {
+  name: 'preloader',
+  create() {
+    const app = this;
+    bindMethods(app, {
+      preloader: Preloader
+    });
+  },
+  on: {
+    photoBrowserOpen(pb) {
+      const app = this;
+      pb.$el.find('.preloader').each(preloaderEl => {
+        app.preloader.init(preloaderEl);
+      });
+    },
+    tabMounted(tabEl) {
+      const app = this;
+      $(tabEl).find('.preloader').each(preloaderEl => {
+        app.preloader.init(preloaderEl);
+      });
+    },
+    pageInit(page) {
+      const app = this;
+      page.$el.find('.preloader').each(preloaderEl => {
+        app.preloader.init(preloaderEl);
+      });
+    }
+  },
+  vnode: {
+    preloader: {
+      insert(vnode) {
+        const app = this;
+        const preloaderEl = vnode.elm;
+        app.preloader.init(preloaderEl);
+      }
+    }
+  }
+};

package/components/preloader/preloader.less

@@ -0,0 +1,60 @@
+/* === Preloader === */
+@import './preloader-vars.less';
+
+.preloader {
+  display: inline-block;
+  vertical-align: middle;
+  width: var(--f7-preloader-size);
+  height: var(--f7-preloader-size);
+  font-size: 0;
+  position: relative;
+  .preloader-inner {
+    width: 100%;
+    height: 100%;
+    display: block;
+    position: relative;
+  }
+}
+
+/* === Preloader Modal === */
+.preloader-backdrop {
+  visibility: visible;
+  opacity: 0;
+  background: none;
+  z-index: 14000;
+}
+.preloader-modal {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  padding: var(--f7-preloader-modal-padding);
+  background: var(--f7-preloader-modal-bg-color);
+  z-index: 14500;
+  transform: translateX(-50%) translateY(-50%);
+  border-radius: var(--f7-preloader-modal-border-radius);
+
+  .preloader {
+    --f7-preloader-size: var(--f7-preloader-modal-preloader-size);
+    display: block !important;
+  }
+}
+html.with-modal-preloader .page-content,
+.with-modal-preloader .page-content,
+.with-modal-preloader.page-content {
+  .not-scrollable();
+}
+.preloader[class*='color-'] {
+  --f7-preloader-color: var(--f7-theme-color);
+}
+.preloader.color-white {
+  --f7-preloader-color: #fff;
+}
+.preloader.color-black {
+  --f7-preloader-color: #000;
+}
+.if-ios-theme({
+  @import './preloader-ios.less';
+});
+.if-md-theme({
+  @import './preloader-md.less';
+});

package/components/progressbar/progressbar-ios.less

@@ -0,0 +1,59 @@
+.ios {
+  .progressbar-infinite {
+    &:before {
+      animation: ios-progressbar-infinite 1s linear infinite;
+    }
+    &:after {
+      display: none;
+    }
+    &.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;
+    }
+  }
+}
+.ltr({
+  @keyframes ios-progressbar-infinite {
+    0% {
+      transform: translate3d(-100%, 0, 0);
+    }
+    100% {
+      transform: translate3d(100%, 0, 0);
+    }
+  }
+});
+.rtl({
+  @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);
+  }
+}

package/components/progressbar/progressbar-md.less

@@ -0,0 +1,141 @@
+.md {
+  @red: #f44336;
+  @blue: #2196f3;
+  @green: #4caf50;
+  @yellow: #ffeb3b;
+  .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;
+    }
+  }
+}

package/components/progressbar/progressbar-rtl.css

@@ -0,0 +1 @@
+.ios{--f7-progressbar-height:4px;--f7-progressbar-border-radius:4px;--f7-progressbar-bg-color:rgba(0, 0, 0, 0.3)}.ios .dark,.ios.dark{--f7-progressbar-bg-color:rgba(255, 255, 255, 0.3)}.md{--f7-progressbar-height:4px;--f7-progressbar-border-radius:0px}.md,.md .dark,.md [class*=color-]{--f7-progressbar-bg-color:rgba(var(--f7-theme-color-rgb), 0.5)}.progressbar,.progressbar-infinite{width:100%;overflow:hidden;position:relative;display:block;transform-style:preserve-3d;background:var(--f7-progressbar-bg-color,rgba(var(--f7-theme-color-rgb),.5));transform-origin:center top;height:var(--f7-progressbar-height);border-radius:var(--f7-progressbar-border-radius)}.progressbar{vertical-align:middle}.progressbar span{background-color:var(--f7-progressbar-progress-color,var(--f7-theme-color));width:100%;height:100%;position:absolute;top:0;transition-duration:150ms;right:0;transform:translate3d(100%,0,0)}.progressbar-infinite{z-index:15000}.progressbar-infinite:after,.progressbar-infinite:before{content:'';position:absolute;top:0;width:100%;height:100%;transform:translate3d(0,0,0);display:block;background-color:var(--f7-progressbar-progress-color,var(--f7-theme-color));right:0;transform-origin:right center}.progressbar-infinite.color-multi{background:0 0!important}.progressbar-in{animation:progressbar-in 150ms forwards}.progressbar-out{animation:progressbar-out 150ms forwards}.framework7-root>.progressbar,.framework7-root>.progressbar-infinite,.page>.progressbar,.page>.progressbar-infinite,.panel>.progressbar,.panel>.progressbar-infinite,.popup>.progressbar,.popup>.progressbar-infinite,.view>.progressbar,.view>.progressbar-infinite,.views>.progressbar,.views>.progressbar-infinite,body>.progressbar,body>.progressbar-infinite{position:absolute;left:0;top:0;z-index:15000;border-radius:0!important;transform-origin:center top!important}@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)}}.ios .progressbar-infinite:before{animation:ios-progressbar-infinite 1s linear infinite}.ios .progressbar-infinite:after{display:none}.ios .progressbar-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}@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)}}.md .progressbar-infinite:before{animation:md-progressbar-infinite-1 2s linear infinite}.md .progressbar-infinite:after{animation:md-progressbar-infinite-2 2s linear infinite}.md .progressbar-infinite.color-multi:before{background:0 0;animation:md-progressbar-infinite-multicolor-bg 3s step-end infinite}.md .progressbar-infinite.color-multi:after{background:0 0;animation:md-progressbar-infinite-multicolor-fill 3s linear infinite;transform-origin:center center}@keyframes md-progressbar-infinite-1{0%{transform:translateX(10%) scaleX(.1)}25%{transform:translateX(-30%) scaleX(.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(.35)}90%{transform:translateX(-100%) scaleX(.1)}100%{transform:translateX(-100%) scaleX(.1)}}@keyframes md-progressbar-infinite-multicolor-bg{0%{background-color:#4caf50}25%{background-color:#f44336}50%{background-color:#2196f3}75%{background-color:#ffeb3b}}@keyframes md-progressbar-infinite-multicolor-fill{0%{transform:scaleX(0);background-color:#f44336}24.9%{transform:scaleX(1);background-color:#f44336}25%{transform:scaleX(0);background-color:#2196f3}49.9%{transform:scaleX(1);background-color:#2196f3}50%{transform:scaleX(0);background-color:#ffeb3b}74.9%{transform:scaleX(1);background-color:#ffeb3b}75%{transform:scaleX(0);background-color:#4caf50}100%{transform:scaleX(1);background-color:#4caf50}}

package/components/progressbar/progressbar-vars.less

@@ -0,0 +1,22 @@
+:root {
+  /*
+  --f7-progressbar-progress-color: var(--f7-theme-color);
+  */
+}
+.ios-vars({
+  --f7-progressbar-height: 4px;
+  --f7-progressbar-border-radius: 4px;
+  .light-vars({
+    --f7-progressbar-bg-color: rgba(0,0,0,0.3);
+  });
+  .dark-vars({
+    --f7-progressbar-bg-color: rgba(255,255,255,0.3);
+  });
+});
+.md-vars({
+  --f7-progressbar-height: 4px;
+  --f7-progressbar-border-radius: 0px;
+});
+.md-color-vars({
+  --f7-progressbar-bg-color: rgba(var(--f7-theme-color-rgb), 0.5);
+});

package/components/progressbar/progressbar.css

@@ -0,0 +1 @@
+.ios{--f7-progressbar-height:4px;--f7-progressbar-border-radius:4px;--f7-progressbar-bg-color:rgba(0, 0, 0, 0.3)}.ios .dark,.ios.dark{--f7-progressbar-bg-color:rgba(255, 255, 255, 0.3)}.md{--f7-progressbar-height:4px;--f7-progressbar-border-radius:0px}.md,.md .dark,.md [class*=color-]{--f7-progressbar-bg-color:rgba(var(--f7-theme-color-rgb), 0.5)}.progressbar,.progressbar-infinite{width:100%;overflow:hidden;position:relative;display:block;transform-style:preserve-3d;background:var(--f7-progressbar-bg-color,rgba(var(--f7-theme-color-rgb),.5));transform-origin:center top;height:var(--f7-progressbar-height);border-radius:var(--f7-progressbar-border-radius)}.progressbar{vertical-align:middle}.progressbar span{background-color:var(--f7-progressbar-progress-color,var(--f7-theme-color));width:100%;height:100%;position:absolute;top:0;transition-duration:150ms;left:0;transform:translate3d(-100%,0,0)}.progressbar-infinite{z-index:15000}.progressbar-infinite:after,.progressbar-infinite:before{content:'';position:absolute;top:0;width:100%;height:100%;transform:translate3d(0,0,0);display:block;background-color:var(--f7-progressbar-progress-color,var(--f7-theme-color));left:0;transform-origin:left center}.progressbar-infinite.color-multi{background:0 0!important}.progressbar-in{animation:progressbar-in 150ms forwards}.progressbar-out{animation:progressbar-out 150ms forwards}.framework7-root>.progressbar,.framework7-root>.progressbar-infinite,.page>.progressbar,.page>.progressbar-infinite,.panel>.progressbar,.panel>.progressbar-infinite,.popup>.progressbar,.popup>.progressbar-infinite,.view>.progressbar,.view>.progressbar-infinite,.views>.progressbar,.views>.progressbar-infinite,body>.progressbar,body>.progressbar-infinite{position:absolute;left:0;top:0;z-index:15000;border-radius:0!important;transform-origin:center top!important}@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)}}.ios .progressbar-infinite:before{animation:ios-progressbar-infinite 1s linear infinite}.ios .progressbar-infinite:after{display:none}.ios .progressbar-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}@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)}}.md .progressbar-infinite:before{animation:md-progressbar-infinite-1 2s linear infinite}.md .progressbar-infinite:after{animation:md-progressbar-infinite-2 2s linear infinite}.md .progressbar-infinite.color-multi:before{background:0 0;animation:md-progressbar-infinite-multicolor-bg 3s step-end infinite}.md .progressbar-infinite.color-multi:after{background:0 0;animation:md-progressbar-infinite-multicolor-fill 3s linear infinite;transform-origin:center center}@keyframes md-progressbar-infinite-1{0%{transform:translateX(-10%) scaleX(.1)}25%{transform:translateX(30%) scaleX(.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(.35)}90%{transform:translateX(100%) scaleX(.1)}100%{transform:translateX(100%) scaleX(.1)}}@keyframes md-progressbar-infinite-multicolor-bg{0%{background-color:#4caf50}25%{background-color:#f44336}50%{background-color:#2196f3}75%{background-color:#ffeb3b}}@keyframes md-progressbar-infinite-multicolor-fill{0%{transform:scaleX(0);background-color:#f44336}24.9%{transform:scaleX(1);background-color:#f44336}25%{transform:scaleX(0);background-color:#2196f3}49.9%{transform:scaleX(1);background-color:#2196f3}50%{transform:scaleX(0);background-color:#ffeb3b}74.9%{transform:scaleX(1);background-color:#ffeb3b}75%{transform:scaleX(0);background-color:#4caf50}100%{transform:scaleX(1);background-color:#4caf50}}

package/components/progressbar/progressbar.d.ts

@@ -0,0 +1,31 @@
+import Framework7, {
+  CSSSelector,
+  Framework7EventsClass,
+  Framework7Plugin,
+} from '../app/app-class.js';
+
+export namespace Progressbar {
+  interface AppMethods {
+    progressbar: {
+      /** set progress for Determinate Progressbar */
+      set(el: HTMLElement | CSSSelector, progress: number, duration: number): void;
+      /** set progress for Determinate Progressbar which is under the app root element */
+      set(progress: number, duration: number): void;
+      /** create and show or just show (if already presented) Progressbar */
+      show(el?: HTMLElement | CSSSelector, progress?: number, color?: string): void;
+      show(el?: HTMLElement | CSSSelector, color?: string): void;
+      /** create and show Determinate Progressbar under app root */
+      show(progress?: number, color?: string): void;
+      /** create and show infinite Progressbar under app root */
+      show(color?: string): void;
+      /** hide Progressbar */
+      hide(el?: HTMLElement | CSSSelector): void;
+    };
+  }
+  interface AppParams {}
+  interface AppEvents {}
+}
+
+declare const ProgressbarComponent: Framework7Plugin;
+
+export default ProgressbarComponent;

package/components/progressbar/progressbar.js

@@ -0,0 +1,150 @@
+import $ from '../../shared/dom7.js';
+import { bindMethods } from '../../shared/utils.js';
+const Progressbar = {
+  set() {
+    const app = this;
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    let [el, progress, duration] = args;
+    if (typeof args[0] === 'number') {
+      [progress, duration] = args;
+      el = app.$el;
+    }
+    if (typeof progress === 'undefined' || progress === null) return el;
+    if (!progress) progress = 0;
+    const $el = $(el || app.$el);
+    if ($el.length === 0) {
+      return el;
+    }
+    const progressNormalized = Math.min(Math.max(progress, 0), 100);
+    let $progressbarEl;
+    if ($el.hasClass('progressbar')) $progressbarEl = $el.eq(0);else {
+      $progressbarEl = $el.children('.progressbar');
+    }
+    if ($progressbarEl.length === 0 || $progressbarEl.hasClass('progressbar-infinite')) {
+      return $progressbarEl;
+    }
+    let $progressbarLine = $progressbarEl.children('span');
+    if ($progressbarLine.length === 0) {
+      $progressbarLine = $('<span></span>');
+      $progressbarEl.append($progressbarLine);
+    }
+    $progressbarLine.transition(typeof duration !== 'undefined' ? duration : '').transform(`translate3d(${(-100 + progressNormalized) * (app.rtl ? -1 : 1)}%,0,0)`);
+    return $progressbarEl[0];
+  },
+  show() {
+    const app = this;
+
+    // '.page', 50, 'multi'
+    for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+      args[_key2] = arguments[_key2];
+    }
+    let [el, progress, color] = args;
+    let type = 'determined';
+    if (args.length === 2) {
+      if ((typeof args[0] === 'string' || typeof args[0] === 'object') && typeof args[1] === 'string') {
+        // '.page', 'multi'
+        [el, color, progress] = args;
+        type = 'infinite';
+      } else if (typeof args[0] === 'number' && typeof args[1] === 'string') {
+        // 50, 'multi'
+        [progress, color] = args;
+        el = app.$el;
+      }
+    } else if (args.length === 1) {
+      if (typeof args[0] === 'number') {
+        el = app.$el;
+        progress = args[0];
+      } else if (typeof args[0] === 'string') {
+        type = 'infinite';
+        el = app.$el;
+        color = args[0];
+      }
+    } else if (args.length === 0) {
+      type = 'infinite';
+      el = app.$el;
+    }
+    const $el = $(el);
+    if ($el.length === 0) return undefined;
+    let $progressbarEl;
+    if ($el.hasClass('progressbar') || $el.hasClass('progressbar-infinite')) {
+      $progressbarEl = $el;
+    } else {
+      $progressbarEl = $el.children('.progressbar:not(.progressbar-out), .progressbar-infinite:not(.progressbar-out)');
+      if ($progressbarEl.length === 0) {
+        $progressbarEl = $(`
+          <span class="progressbar${type === 'infinite' ? '-infinite' : ''}${color ? ` color-${color}` : ''} progressbar-in">
+            ${type === 'infinite' ? '' : '<span></span>'}
+          </span>`);
+        $el.append($progressbarEl);
+      }
+    }
+    if (typeof progress !== 'undefined') {
+      app.progressbar.set($progressbarEl, progress);
+    }
+    return $progressbarEl[0];
+  },
+  hide(el, removeAfterHide) {
+    if (removeAfterHide === void 0) {
+      removeAfterHide = true;
+    }
+    const app = this;
+    const $el = $(el || app.$el);
+    if ($el.length === 0) return undefined;
+    let $progressbarEl;
+    if ($el.hasClass('progressbar') || $el.hasClass('progressbar-infinite')) {
+      $progressbarEl = $el;
+    } else {
+      $progressbarEl = $el.children('.progressbar, .progressbar-infinite');
+    }
+    if ($progressbarEl.length === 0 || !$progressbarEl.hasClass('progressbar-in') || $progressbarEl.hasClass('progressbar-out')) {
+      return $progressbarEl;
+    }
+    $progressbarEl.removeClass('progressbar-in').addClass('progressbar-out').animationEnd(() => {
+      if (removeAfterHide) {
+        $progressbarEl.remove();
+      }
+    });
+    return $progressbarEl;
+  }
+};
+export default {
+  name: 'progressbar',
+  create() {
+    const app = this;
+    bindMethods(app, {
+      progressbar: Progressbar
+    });
+  },
+  on: {
+    tabMounted(tabEl) {
+      const app = this;
+      $(tabEl).find('.progressbar').each(progressbarEl => {
+        const $progressbarEl = $(progressbarEl);
+        app.progressbar.set($progressbarEl, $progressbarEl.attr('data-progress'));
+      });
+    },
+    pageInit(page) {
+      const app = this;
+      page.$el.find('.progressbar').each(progressbarEl => {
+        const $progressbarEl = $(progressbarEl);
+        app.progressbar.set($progressbarEl, $progressbarEl.attr('data-progress'));
+      });
+    }
+  },
+  vnode: {
+    progressbar: {
+      insert(vnode) {
+        const app = this;
+        const el = vnode.elm;
+        app.progressbar.set(el, el.getAttribute('data-progress'));
+      },
+      update(vnode) {
+        const app = this;
+        const el = vnode.elm;
+        app.progressbar.set(el, el.getAttribute('data-progress'));
+      }
+    }
+  }
+};

package/components/progressbar/progressbar.less

@@ -0,0 +1,111 @@
+/* === Progressbar === */
+@import './progressbar-vars.less';
+
+.progressbar,
+.progressbar-infinite {
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+  display: block;
+  transform-style: preserve-3d;
+  background: var(--f7-progressbar-bg-color, rgba(var(--f7-theme-color-rgb), 0.5));
+  transform-origin: center top;
+  height: var(--f7-progressbar-height);
+  border-radius: var(--f7-progressbar-border-radius);
+}
+.progressbar {
+  vertical-align: middle;
+  span {
+    background-color: var(--f7-progressbar-progress-color, var(--f7-theme-color));
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    transition-duration: 150ms;
+    .ltr({
+      left: 0;
+      transform: translate3d(-100%, 0, 0);
+    });
+    .rtl({
+      right: 0;
+      transform: translate3d(100%, 0, 0);
+    });
+  }
+}
+.progressbar-infinite {
+  z-index: 15000;
+  &:before,
+  &:after {
+    content: '';
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    transform: translate3d(0, 0, 0);
+    display: block;
+    background-color: var(--f7-progressbar-progress-color, var(--f7-theme-color));
+    .ltr({
+      left: 0;
+      transform-origin: left center;
+    });
+    .rtl({
+      right: 0;
+      transform-origin: right center;
+    });
+  }
+  &.color-multi {
+    background: none !important;
+  }
+}
+.progressbar-in {
+  animation: progressbar-in 150ms forwards;
+}
+.progressbar-out {
+  animation: progressbar-out 150ms forwards;
+}
+
+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;
+  }
+}
+
+@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);
+  }
+}
+
+.if-ios-theme({
+  @import './progressbar-ios.less';
+});
+.if-md-theme({
+  @import './progressbar-md.less';
+});