loader

Simple Square Avatar

<span class="avatar" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/1.jpg)"></span>
<span class="avatar" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/2.jpg)"></span>
<span class="avatar" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/1.jpg)"></span>
<span class="avatar" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/2.jpg)"></span>
<span class="avatar" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/3.jpg)"></span>

Simple Round Avatar

<span class="avatar  brround" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/12.jpg)"></span>
<span class="avatar  brround" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/13.jpg)"></span>
<span class="avatar  brround" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/11.jpg)"></span>
<span class="avatar  brround" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/12.jpg)"></span>
<span class="avatar  brround" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/14.jpg)"></span>

Simple Radius Avatar

<span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/1.jpg)"></span>
	<span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/2.jpg)"></span>
	<span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/1.jpg)"></span>
	<span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/2.jpg)"></span>
	<span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/3.jpg)"></span>

Avatar Size

<span class="avatar avatar-sm" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/4.jpg)"></span>
<span class="avatar" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/3.jpg)"></span>
<span class="avatar avatar-md" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/6.jpg)"></span>
<span class="avatar avatar-lg" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/6.jpg)"></span>
<span class="avatar avatar-xl" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/4.jpg)"></span>
<span class="avatar avatar-xxl" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/7.jpg)"></span>

Rounded Avatar Size

<span class="avatar avatar-sm brround" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/15.jpg)"></span>
<span class="avatar brround" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/13.jpg)"></span>
<span class="avatar avatar-md brround" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/16.jpg)"></span>
<span class="avatar avatar-lg brround" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/17.jpg)"></span>
<span class="avatar avatar-xl brround" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/14.jpg)"></span>
<span class="avatar avatar-xxl brround" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/18.jpg)"></span>

Radius Avatar Size

<span class="avatar avatar-sm bradius" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/15.jpg)"></span>
<span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/13.jpg)"></span>
<span class="avatar avatar-md bradius" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/16.jpg)"></span>
<span class="avatar avatar-lg bradius" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/17.jpg)"></span>
<span class="avatar avatar-xl bradius" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/14.jpg)"></span>
<span class="avatar avatar-xxl bradius" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/18.jpg)"></span>

Avatar Status

<span class="avatar" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/8.jpg)"></span>
<span class="avatar" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/5.jpg)">
  <span class="avatar-status"></span>
</span>
<span class="avatar" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/9.jpg)">
  <span class="avatar-status bg-red"></span>
</span>
<span class="avatar" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/6.jpg)">
  <span class="avatar-status bg-green"></span>
</span>
<span class="avatar" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/7.jpg)">
  <span class="avatar-status bg-yellow"></span>
</span>

Rounded Avatar Status

<span class="avatar brround" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/19.jpg)"></span>
<span class="avatar brround" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/15.jpg)">
  <span class="avatar-status"></span>
</span>
<span class="avatar brround" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/20.jpg)">
  <span class="avatar-status bg-red"></span>
</span>
<span class="avatar brround" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/16.jpg)">
  <span class="avatar-status bg-green"></span>
</span>
<span class="avatar brround" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/17.jpg)">
  <span class="avatar-status bg-yellow"></span>
</span>

Radius Avatar Status

<span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/19.jpg)"></span>
<span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/15.jpg)">
  <span class="avatar-status"></span>
</span>
<span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/20.jpg)">
  <span class="avatar-status bg-red"></span>
</span>
<span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/16.jpg)">
  <span class="avatar-status bg-green"></span>
</span>
<span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/17.jpg)">
  <span class="avatar-status bg-yellow"></span>
</span>

Avatars List

+8
<div class="avatar-list avatar-list-stacked">
  <span class="avatar" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/10.jpg)"></span>
  <span class="avatar" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/8.jpg)"></span>
  <span class="avatar" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/9.jpg)"></span>
  <span class="avatar" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/10.jpg)"></span>
  <span class="avatar" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/11.jpg)"></span>
  <span class="avatar">+8</span>
</div>

Rounded Avatars List

+8
<div class="avatar-list avatar-list-stacked">
  <span class="avatar brround" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/12.jpg)"></span>
  <span class="avatar brround" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/21.jpg)"></span>
  <span class="avatar brround" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/29.jpg)"></span>
  <span class="avatar brround" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/2.jpg)"></span>
  <span class="avatar brround" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/34.jpg)"></span>
  <span class="avatar brround">+8</span>
</div>

Radius Avatars List

+8
<div class="avatar-list avatar-list-stacked">
  <span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/12.jpg)"></span>
  <span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/21.jpg)"></span>
  <span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/29.jpg)"></span>
  <span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/2.jpg)"></span>
  <span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/clont/Horizontal-Light-rtl/assets/images/users/34.jpg)"></span>
  <span class="avatar bradius">+8</span>
</div>