loader

Simple Square Avatar

Html
<div class="avatar-list">
	<span class="avatar" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/1.jpg)"></span>
	<span class="avatar" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/2.jpg)"></span>
	<span class="avatar" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/1.jpg)"></span>
	<span class="avatar" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/2.jpg)"></span>
	<span class="avatar" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/3.jpg)"></span>
</div>

Simple Round Avatar

Html
<div class="avatar-list">
	<span class="avatar brround" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/1.jpg)"></span>
	<span class="avatar brround" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/2.jpg)"></span>
	<span class="avatar brround" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/1.jpg)"></span>
	<span class="avatar brround" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/2.jpg)"></span>
	<span class="avatar brround" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/3.jpg)"></span>
</div>

Simple Radius Avatar

Html
<div class="avatar-list">
	<span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/1.jpg)"></span>
	<span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/2.jpg)"></span>
	<span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/1.jpg)"></span>
	<span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/2.jpg)"></span>
	<span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/3.jpg)"></span>
</div>

Avatar Size

Html
<div class="avatar-list">
	<span class="avatar avatar-sm" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/4.jpg)"></span>
	<span class="avatar" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/3.jpg)"></span>
	<span class="avatar avatar-md" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/5.jpg)"></span>
	<span class="avatar avatar-lg" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/6.jpg)"></span>
	<span class="avatar avatar-xl" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/4.jpg)"></span>
	<span class="avatar avatar-xxl" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/7.jpg)"></span>
</div>

Rounded Avatar Size

Html
<div class="avatar-list">
	<span class="avatar avatar-sm brround" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/15.jpg)"></span>
	<span class="avatar brround" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/13.jpg)"></span>
	<span class="avatar avatar-md brround" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/16.jpg)"></span>
	<span class="avatar avatar-lg brround" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/7.jpg)"></span>
	<span class="avatar avatar-xl brround" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/14.jpg)"></span>
	<span class="avatar avatar-xxl brround" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/8.jpg)"></span>
</div>

Radius Avatar Size

Html
<div class="avatar-list">
	<span class="avatar avatar-sm bradius" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/15.jpg)"></span>
	<span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/13.jpg)"></span>
	<span class="avatar avatar-md bradius" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/16.jpg)"></span>
	<span class="avatar avatar-lg bradius" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/7.jpg)"></span>
	<span class="avatar avatar-xl bradius" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/14.jpg)"></span>
	<span class="avatar avatar-xxl bradius" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/8.jpg)"></span>
</div>

Avatar Status

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

Rounded Avatar Status

Html
<div class="avatar-list">
	<span class="avatar brround" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/9.jpg)"></span>
	<span class="avatar brround" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/15.jpg)">
		<span class="avatar-status"></span>
	</span>
	<span class="avatar brround" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/2.jpg)">
		<span class="avatar-status bg-red"></span>
	</span>
	<span class="avatar brround" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/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/dashtic/Horizontal-Dark-ltr/assets/images/users/7.jpg)">
		<span class="avatar-status bg-yellow"></span>
	</span>
</div>

Radius Avatar Status

Html
<div class="avatar-list">
	<span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/9.jpg)"></span>
	<span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/15.jpg)">
		<span class="avatar-status"></span>
	</span>
	<span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/2.jpg)">
		<span class="avatar-status bg-red"></span>
	</span>
	<span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/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/dashtic/Horizontal-Dark-ltr/assets/images/users/7.jpg)">
		<span class="avatar-status bg-yellow"></span>
	</span>
</div>

Avatars List

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

Rounded Avatars List

+8
Html
<div class="avatar-list avatar-list-stacked">
	<span class="avatar brround" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/12.jpg)"></span>
	<span class="avatar brround" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/2.jpg)"></span>
	<span class="avatar brround" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/9.jpg)"></span>
	<span class="avatar brround" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/2.jpg)"></span>
	<span class="avatar brround" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/4.jpg)"></span>
	<span class="avatar brround">+8</span>
</div>

Radius Avatars List

+8
Html
<div class="avatar-list avatar-list-stacked">
	<span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/12.jpg)"></span>
	<span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/2.jpg)"></span>
	<span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/9.jpg)"></span>
	<span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/2.jpg)"></span>
	<span class="avatar bradius" style="background-image: url(https://laravel.spruko.com/dashtic/Horizontal-Dark-ltr/assets/images/users/4.jpg)"></span>
	<span class="avatar bradius">+8</span>
</div>