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="">
    <circle fill="none" stroke-width="4" stroke-linecap="round" cx="33" cy="33" r="30" class="circle"></circle>
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.