Topic: Progress bar (preloader) circle issue

andrej.belsak pro asked 7 years ago


Hi, I'm making simple preloader with circle in a modal (showing preloader until i get back the AJAX request). I put the preloader circle in the ".modal-body" in which i'm using bootstrap grid system (as described in section "Modals"). Now my modal body consist of ".container-fluid", ".row" and two columns inside that row (one column for preloader and one for text). My preloader circle is now acting strange (getting 2 circles spinning one around other), see attached picture. Any idea how to solve this? Btw, i'm testing on updated Firefox and Chromuium browsers. preloader circle issue

rdellar17 priority answered 6 years ago


An update...   This is still happening in 12/2017.

I went thru and ran Resharper on my html files to clean up the tags, but this broke the spinner in exactly the same way as above.

Broken version:

 <div class="col-{breakpoint}-auto align-self-center justify-content-end">
   <div class="preloader-wrapper small active">
     <div class="spinner-layer spinner-blue-only">
       <div class="circle-clipper left">
         <div class="circle"></div>
       </div>
       <div class="gap-patch">
         <div class="circle"></div>
       </div>
       <div class="circle-clipper right">
         <div class="circle"></div>
       </div>
     </div>
   </div>
 </div>

Working version (Note the leading </div> tags):

 <div class="col-{breakpoint}-auto align-self-center justify-content-end">
   <div class="preloader-wrapper small active">
     <div class="spinner-layer spinner-blue-only">
       <div class="circle-clipper left">
         <div class="circle"></div>
       </div><div class="gap-patch">
         <div class="circle"></div>
       </div><div class="circle-clipper right">
         <div class="circle"></div>
       </div>
     </div>
   </div>
 </div>

Can you fix this so I can use ReShapers formatting?  This will likely work minified, but I should be able to keep my html stored in a clean state.



can you share your code?

torson pro answered 7 years ago


I think it become normal spinning only after mdb.js script fully loaded.

torson pro answered 7 years ago


does not changed at all, the same behavior https://www.dropbox.com/s/cggc077xx483sjd/1.png?dl=0

@torson, try to minify your HTML code and tell me if this works

torson pro answered 7 years ago


Hi! I have similar problem with circle preloader, but I use it in <body> and 'show' and 'hide' manualy, and the problem is that in some browsers (chrome 53 and mobile chrome 53) the circle is not spinning to the right, it grows up-to-down on both sides. Do you know something about it? Maybe it is known issue and I am doing something wrong?

andrej.belsak pro answered 7 years ago


Thank you very much for your time, solution and explanation.

There's a problem with whitespaces (tabs and spaces). We'll fix this problem in the future

andrej.belsak pro answered 7 years ago


Thank you for your fast reply. Your proposed solution (minifying preloader part of the code) works. Can you please tell me why did that happen, so i'll know if something similar happens to me in the future. Thank you again.

Hi, The problem is really weird. Thanks for the information. I added your problem to our TODO list. Try to minify your html code. I mean use: <div class="preloader-wrapper small active"><div class="spinner-layer spinner-yellow-only"><div class="circle-clipper left"><div class="circle"></div></div><div class="gap-patch"><div class="circle"></div></div><div class="circle-clipper right"><div class="circle"></div></div></div></div> instead of:
<!--Small yellow-->
    <div class="preloader-wrapper small active">
    <div class="spinner-layer spinner-yellow-only">
      <div class="circle-clipper left">
        <div class="circle"></div>
      </div><div class="gap-patch">
        <div class="circle"></div>
      </div><div class="circle-clipper right">
        <div class="circle"></div>
      </div>
    </div>
  </div>


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No