Progress bar (preloader) circle issue

  1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
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

Bartłomiej Malanowski staff pro premium answered 8 years ago

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>

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

Bartłomiej Malanowski staff pro premium answered 8 years ago

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

andrej.belsak pro answered 8 years ago

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

torson pro answered 8 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?

Bartłomiej Malanowski staff pro premium answered 8 years ago

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

torson pro answered 8 years ago

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

torson pro answered 8 years ago

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

Bartłomiej Malanowski staff pro premium answered 8 years ago

can you share your code?

rdellar17 pro premium priority answered 7 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.

Write
Create snippet
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
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
circle preloader progress-bar
Related topics
1
Progress Bar/Preloder-spinners
1
Circular progress bar
1
Preloader path is wrong
0
Linear Stepper Collapses Immediately when Fields prefilled
0
How to use Infinite loading after executing an action in a form?
About author
andrej.belsak
Pro User
10Support score
1Questions 3Answers
0Snippets likes 0Snippets