## Page Loaders

Using loaders classes

To use the effect you need a minimum structure consisting of the following elements:

1. The parent element with the `be-loading` class

2. Directly inside `be-loading` you have to include the `be-spinner` element which contains the SVG.

Then to trigger the effect, add the `be-loading-active` class on the `be-loading` element.

    <div class="be-loading">
     <!-- Here goes your content -->

     <div class="be-spinner">
      <svg width="40px" height="40px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
        <circle fill="none" stroke-width="4" stroke-linecap="round" cx="33" cy="33" r="30" class="circle"></circle>
      </svg>
     </div>
    </div>

Load Example

Aliquam posuere volutpat turpis, ut euimod diam pellentesque at. Sed sit amet nulla a dui dignisim euismod. Morbi luctus elementum dictum. Donec convallis mattis elit id varius. Quisque facilisis sapien quis mauris, erat condimentum.