Progress bar (preloader) circle issue

Topic: Progress bar (preloader) circle issue

andrej.belsak pro asked 8 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

Add comment

rdellar17 priority answered 7 years ago

0 0 Best answer

<p>An update...   This is still happening in 12/2017.</p>
<p>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.</p>
<p>Broken version:</p>
<pre> <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></pre>
<p>Working version (Note the leading </div> tags):</p>
<pre> <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></pre>
<p>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.</p>

Please insert min. 20 characters.

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.

Add comment

Bartłomiej Malanowski staff answered 8 years ago

0 0 Best answer

can you share your code?

Add comment

torson pro answered 8 years ago

0 0 Best answer

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

Add comment

torson pro answered 8 years ago

0 0 Best answer

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

Add comment

Bartłomiej Malanowski staff answered 8 years ago

0 0 Best answer

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

Add comment

torson pro answered 8 years ago

0 0 Best answer

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?

Add comment

andrej.belsak pro answered 8 years ago

0 0 Best answer

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

Add comment

Bartłomiej Malanowski staff answered 8 years ago

0 0 Best answer

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

Add comment

andrej.belsak pro answered 8 years ago

0 0 Best answer

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.

Add comment

Bartłomiej Malanowski staff answered 8 years ago

0 0 Best answer

Please insert min. 20 characters.

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>

Add comment

Write

Create snippet

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

andrej.belsak

Pro User 10Support score
1Questions 3Answers 0Snippets