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>