loader

Simple Square Avatar

img img img img img
<span class="avatar" style="background-image: url(./https://laravel.spruko.com/hogo/Leftmenu-Icon-LightSidebar/assets/images/users/male/1.jpg)"></span>
<span class="avatar" style="background-image: url(https://laravel.spruko.com/hogo/Leftmenu-Icon-LightSidebar/assets/images/users/male/2.jpg)"></span>
<span class="avatar" style="background-image: url(https://laravel.spruko.com/hogo/Leftmenu-Icon-LightSidebar/assets/images/users/female/1.jpg)"></span>
<span class="avatar" style="background-image: url(https://laravel.spruko.com/hogo/Leftmenu-Icon-LightSidebar/assets/images/users/female/2.jpg)"></span>
<span class="avatar" style="background-image: url(https://laravel.spruko.com/hogo/Leftmenu-Icon-LightSidebar/assets/images/users/male/3.jpg)"></span>

Simple Round Avatar

img img img img img
<span class="avatar  brround" style="background-image: url(./https://laravel.spruko.com/hogo/Leftmenu-Icon-LightSidebar/assets/images/users/male/12.jpg)"></span>
<span class="avatar  brround" style="background-image: url(https://laravel.spruko.com/hogo/Leftmenu-Icon-LightSidebar/assets/images/users/male/13.jpg)"></span>
<span class="avatar  brround" style="background-image: url(https://laravel.spruko.com/hogo/Leftmenu-Icon-LightSidebar/assets/images/users/female/11.jpg)"></span>
<span class="avatar  brround" style="background-image: url(https://laravel.spruko.com/hogo/Leftmenu-Icon-LightSidebar/assets/images/users/female/12.jpg)"></span>
<span class="avatar  brround" style="background-image: url(https://laravel.spruko.com/hogo/Leftmenu-Icon-LightSidebar/assets/images/users/male/14.jpg)"></span>

Avatar Size

img img img img img img
<span class="avatar avatar-sm" style="background-image: url(./https://laravel.spruko.com/hogo/Leftmenu-Icon-LightSidebar/assets/images/users/male/4.jpg)"></span>
<span class="avatar" style="background-image: url(./https://laravel.spruko.com/hogo/Leftmenu-Icon-LightSidebar/assets/images/users/female/3.jpg)"></span>
<span class="avatar avatar-md" style="background-image: url(https://laravel.spruko.com/hogo/Leftmenu-Icon-LightSidebar/assets/images/users/male/6.jpg)"></span>
<span class="avatar avatar-lg" style="background-image: url(https://laravel.spruko.com/hogo/Leftmenu-Icon-LightSidebar/assets/images/users/male/6.jpg)"></span>
<span class="avatar avatar-xl" style="background-image: url(https://laravel.spruko.com/hogo/Leftmenu-Icon-LightSidebar/assets/images/users/female/4.jpg)"></span>
<span class="avatar avatar-xxl" style="background-image: url(https://laravel.spruko.com/hogo/Leftmenu-Icon-LightSidebar/assets/images/users/male/7.jpg)"></span>

Rounded Avatar Size

img img img img img img
<span class="avatar avatar-sm brround" style="background-image: url(./https://laravel.spruko.com/hogo/Leftmenu-Icon-LightSidebar/assets/images/users/male/15.jpg)"></span>
<span class="avatar brround" style="background-image: url(./https://laravel.spruko.com/hogo/Leftmenu-Icon-LightSidebar/assets/images/users/female/13.jpg)"></span>
<span class="avatar avatar-md brround" style="background-image: url(https://laravel.spruko.com/hogo/Leftmenu-Icon-LightSidebar/assets/images/users/male/16.jpg)"></span>
<span class="avatar avatar-lg brround" style="background-image: url(https://laravel.spruko.com/hogo/Leftmenu-Icon-LightSidebar/assets/images/users/male/17.jpg)"></span>
<span class="avatar avatar-xl brround" style="background-image: url(https://laravel.spruko.com/hogo/Leftmenu-Icon-LightSidebar/assets/images/users/female/14.jpg)"></span>
<span class="avatar avatar-xxl brround" style="background-image: url(https://laravel.spruko.com/hogo/Leftmenu-Icon-LightSidebar/assets/images/users/male/18.jpg)"></span>

Avatar Status

<span class="avatar" style="background-image: url(https://laravel.spruko.com/hogo/Leftmenu-Icon-LightSidebar/assets/images/users/male/8.jpg)"></span>
<span class="avatar" style="background-image: url(https://laravel.spruko.com/hogo/Leftmenu-Icon-LightSidebar/assets/images/users/female/5.jpg)">
  <span class="avatar-status"></span>
</span>
<span class="avatar" style="background-image: url(https://laravel.spruko.com/hogo/Leftmenu-Icon-LightSidebar/assets/images/users/male/9.jpg)">
  <span class="avatar-status bg-red"></span>
</span>
<span class="avatar" style="background-image: url(https://laravel.spruko.com/hogo/Leftmenu-Icon-LightSidebar/assets/images/users/female/6.jpg)">
  <span class="avatar-status bg-green"></span>
</span>
<span class="avatar" style="background-image: url(https://laravel.spruko.com/hogo/Leftmenu-Icon-LightSidebar/assets/images/users/female/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/hogo/Leftmenu-Icon-LightSidebar/assets/images/users/male/19.jpg)"></span>
<span class="avatar brround" style="background-image: url(https://laravel.spruko.com/hogo/Leftmenu-Icon-LightSidebar/assets/images/users/female/15.jpg)">
  <span class="avatar-status"></span>
</span>
<span class="avatar brround" style="background-image: url(https://laravel.spruko.com/hogo/Leftmenu-Icon-LightSidebar/assets/images/users/male/20.jpg)">
  <span class="avatar-status bg-red"></span>
</span>
<span class="avatar brround" style="background-image: url(https://laravel.spruko.com/hogo/Leftmenu-Icon-LightSidebar/assets/images/users/female/16.jpg)">
  <span class="avatar-status bg-green"></span>
</span>
<span class="avatar brround" style="background-image: url(https://laravel.spruko.com/hogo/Leftmenu-Icon-LightSidebar/assets/images/users/female/17.jpg)">
  <span class="avatar-status bg-yellow"></span>
</span>

Avatars List

img img img img img
<div class="avatar-list avatar-list-stacked">
  <span class="avatar" style="background-image: url(https://laravel.spruko.com/hogo/Leftmenu-Icon-LightSidebar/assets/images/users/female/10.jpg)"></span>
  <span class="avatar" style="background-image: url(https://laravel.spruko.com/hogo/Leftmenu-Icon-LightSidebar/assets/images/users/female/8.jpg)"></span>
  <span class="avatar" style="background-image: url(https://laravel.spruko.com/hogo/Leftmenu-Icon-LightSidebar/assets/images/users/female/9.jpg)"></span>
  <span class="avatar" style="background-image: url(https://laravel.spruko.com/hogo/Leftmenu-Icon-LightSidebar/assets/images/users/female/10.jpg)"></span>
  <span class="avatar" style="background-image: url(https://laravel.spruko.com/hogo/Leftmenu-Icon-LightSidebar/assets/images/users/male/11.jpg)"></span>
  <span class="avatar">+8</span>
</div>

Rounded Avatars List

img img img img img
<div class="avatar-list avatar-list-stacked">
  <span class="avatar brround" style="background-image: url(https://laravel.spruko.com/hogo/Leftmenu-Icon-LightSidebar/assets/images/users/female/12.jpg')}})"></span>
  <span class="avatar brround" style="background-image: url(https://laravel.spruko.com/hogo/Leftmenu-Icon-LightSidebar/assets/images/users/female/21.jpg)"></span>
  <span class="avatar brround" style="background-image: url(https://laravel.spruko.com/hogo/Leftmenu-Icon-LightSidebar/assets/images/users/female/29.jpg)"></span>
  <span class="avatar brround" style="background-image: url(https://laravel.spruko.com/hogo/Leftmenu-Icon-LightSidebar/assets/images/users/female/2.jpg)"></span>
  <span class="avatar brround" style="background-image: url(https://laravel.spruko.com/hogo/Leftmenu-Icon-LightSidebar/assets/images/users/male/34.jpg)"></span>
  <span class="avatar brround">+8</span>
</div>

Simple Radius Avatar

img img img img img
<span class="avatar bradius" style="background-image: url(./https://laravel.spruko.com/hogo/Leftmenu-Icon-LightSidebar/assets/images/users/male/1.jpg)"></span>
	<span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/hogo/Leftmenu-Icon-LightSidebar/assets/images/users/male/2.jpg)"></span>
	<span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/hogo/Leftmenu-Icon-LightSidebar/assets/images/users/female/1.jpg)"></span>
	<span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/hogo/Leftmenu-Icon-LightSidebar/assets/images/users/female/2.jpg)"></span>
	<span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/hogo/Leftmenu-Icon-LightSidebar/assets/images/users/male/3.jpg)"></span>

Radius Avatar Size

img img img img img img
<span class="avatar avatar-sm bradius" style="background-image: url(./https://laravel.spruko.com/hogo/Leftmenu-Icon-LightSidebar/assets/images/users/male/4.jpg)"></span>
<span class="avatar bradius" style="background-image: url(./https://laravel.spruko.com/hogo/Leftmenu-Icon-LightSidebar/assets/images/users/female/3.jpg)"></span>
<span class="avatar bradius avatar-md" style="background-image: url(https://laravel.spruko.com/hogo/Leftmenu-Icon-LightSidebar/assets/images/users/male/6.jpg)"></span>
<span class="avatar  bradius avatar-lg" style="background-image: url(https://laravel.spruko.com/hogo/Leftmenu-Icon-LightSidebar/assets/images/users/male/6.jpg')}})"></span>
<span class="avatar bradius avatar-xl" style="background-image: url(https://laravel.spruko.com/hogo/Leftmenu-Icon-LightSidebar/assets/images/users/female/4.jpg)"></span>
<span class="avatar bradius avatar-xxl" style="background-image: url(https://laravel.spruko.com/hogo/Leftmenu-Icon-LightSidebar/assets/images/users/male/7.jpg)"></span>
Copyright © 2019 Hogo. Designed by Spruko All rights reserved.