[SOLVED]Failed to display pull to refresh preloader

Questions
1

I have routable tabs, of which they load f7 templates as their individual content. When I begin pulling I can see the .ptr-arrow and then it disappears but the .preloader does not display, also when I set a background color to .preloader I can see a colored box rotating.
Tabs:

<div class="tabs tabs-routable">
    <div class="tab page-content goals-content ptr-content" id="tab-1"></div>
    <div class="tab page-content account-content ptr-content" id="tab-2"></div>

    <div class="tab page-content transactions-content ptr-content" id="tab-4"></div>
    <div class="tab page-content settings-content" id="tab-5"></div>
</div>

Content from f7 template:

<template>

    <div class="goals-template">
        <!-- Default pull to refresh preloader-->
        <div class="ptr-preloader">
            <div class="preloader"></div>
            <div class="ptr-arrow"></div>
        </div>
        Tab content...
    </div>

</template>

The preloaders can only appear properly if I manually add the following lines inside .preloader

<span class="preloader-inner">
    <!--Android md-->
    <span class="preloader-inner-gap"></span>
    <span class="preloader-inner-left">
        <span class="preloader-inner-half-circle"></span>
    </span>
    <span class="preloader-inner-right">
        <span class="preloader-inner-half-circle"></span>
    </span>
    <!--iOS-->
    <span class="preloader-inner-line"></span>
    <span class="preloader-inner-line"></span>
    <span class="preloader-inner-line"></span>
    <span class="preloader-inner-line"></span>
    <span class="preloader-inner-line"></span>
    <span class="preloader-inner-line"></span>
    <span class="preloader-inner-line"></span>
    <span class="preloader-inner-line"></span>
    <span class="preloader-inner-line"></span>
    <span class="preloader-inner-line"></span>
    <span class="preloader-inner-line"></span>
    <span class="preloader-inner-line"></span>
</span>

I understand my .ptr-preloader is not an immediate child of .ptr-content, could this be the issue, or there is another way round ? Framework7 version 4.4.3 …

2

You are right, i see there is an issue, which i already fixed in repository. Right now you can just use full HTML markup like:

<div class="preloader if-ios">
  <span class="preloader-inner">
    <span class="preloader-inner-line"></span>
    <span class="preloader-inner-line"></span>
    <span class="preloader-inner-line"></span>
    <span class="preloader-inner-line"></span>
    <span class="preloader-inner-line"></span>
    <span class="preloader-inner-line"></span>
    <span class="preloader-inner-line"></span>
    <span class="preloader-inner-line"></span>
    <span class="preloader-inner-line"></span>
    <span class="preloader-inner-line"></span>
    <span class="preloader-inner-line"></span>
    <span class="preloader-inner-line"></span>
  </span>
</div>
<div class="preloader if-md">
  <span class="preloader-inner">
    <span class="preloader-inner-gap"></span>
    <span class="preloader-inner-left">
        <span class="preloader-inner-half-circle"></span>
    </span>
    <span class="preloader-inner-right">
        <span class="preloader-inner-half-circle"></span>
    </span>
  </span>
</div>
1 Like