loader

Simple Square Avatar

img img img img img
<div class="avatar-list">
	<span><img class="avatar mr-2" src="https://laravel.spruko.com/indoui/Horizontal-Light-ltr/assets/images/users/male/1.jpg" alt="img"></span>
	<span><img class="avatar mr-2" src="https://laravel.spruko.com/indoui/Horizontal-Light-ltr/assets/images/users/male/2.jpg" alt="img"></span>
	<span><img class="avatar mr-2" src="https://laravel.spruko.com/indoui/Horizontal-Light-ltr/assets/images/users/female/1.jpg" alt="img"></span>
	<span><img class="avatar mr-2" src="https://laravel.spruko.com/indoui/Horizontal-Light-ltr/assets/images/users/female/2.jpg" alt="img"></span>
	<span><img class="avatar mr-2" src="https://laravel.spruko.com/indoui/Horizontal-Light-ltr/assets/images/users/male/3.jpg" alt="img"></span>
</div>

Simple Round Avatar

img img img img img
<div class="avatar-list">
	<span><img class="avatar brround mr-2" src="https://laravel.spruko.com/indoui/Horizontal-Light-ltr/assets/images/users/male/4.jpg" alt="img"></span>
	<span><img class="avatar brround mr-2" src="https://laravel.spruko.com/indoui/Horizontal-Light-ltr/assets/images/users/male/5.jpg" alt="img"></span>
	<span><img class="avatar brround mr-2" src="https://laravel.spruko.com/indoui/Horizontal-Light-ltr/assets/images/users/female/3.jpg" alt="img"></span>
	<span><img class="avatar brround mr-2" src="https://laravel.spruko.com/indoui/Horizontal-Light-ltr/assets/images/users/female/4.jpg" alt="img"></span>
	<span><img class="avatar brround mr-2" src="https://laravel.spruko.com/indoui/Horizontal-Light-ltr/assets/images/users/male/6.jpg" alt="img"></span>
</div>
img img img img img img
<div class="avatar-list">
	<span><img class="avatar avatar-sm mr-2" src="https://laravel.spruko.com/indoui/Horizontal-Light-ltr/assets/images/users/male/4.jpg" alt="img"></span>
	<span><img class="avatar mr-2" src="https://laravel.spruko.com/indoui/Horizontal-Light-ltr/assets/images/users/female/3.jpg" alt="img"></span>
	<span><img class="avatar avatar-md mr-2" src="https://laravel.spruko.com/indoui/Horizontal-Light-ltr/assets/images/users/male/5.jpg" alt="img"></span>
	<span><img class="avatar avatar-lg mr-2" src="https://laravel.spruko.com/indoui/Horizontal-Light-ltr/assets/images/users/male/6.jpg" alt="img"></span>
	<span><img class="avatar avatar-xl mr-2" src="https://laravel.spruko.com/indoui/Horizontal-Light-ltr/assets/images/users/female/4.jpg" alt="img"></span>
	<span><img class="avatar avatar-xxl mr-2" src="https://laravel.spruko.com/indoui/Horizontal-Light-ltr/assets/images/users/male/7.jpg" alt="img"></span>
</div>

Rounded Avatar Size

img img img img img img
<div class="avatar-list">
	<span><img class="avatar avatar-sm brround mr-2" src="https://laravel.spruko.com/indoui/Horizontal-Light-ltr/assets/images/users/male/7.jpg" alt="img"></span>
	<span><img class="avatar brround mr-2" src="https://laravel.spruko.com/indoui/Horizontal-Light-ltr/assets/images/users/female/5.jpg" alt="img"></span>
	<span><img class="avatar avatar-md brround mr-2" src="https://laravel.spruko.com/indoui/Horizontal-Light-ltr/assets/images/users/male/8.jpg" alt="img"></span>
	<span><img class="avatar avatar-lg brround mr-2" src="https://laravel.spruko.com/indoui/Horizontal-Light-ltr/assets/images/users/male/9.jpg" alt="img"></span>
	<span><img class="avatar avatar-xl brround mr-2" src="https://laravel.spruko.com/indoui/Horizontal-Light-ltr/assets/images/users/female/6.jpg" alt="img"></span>
	<span><img class="avatar avatar-xxl brround mr-2" src="https://laravel.spruko.com/indoui/Horizontal-Light-ltr/assets/images/users/male/10.jpg" alt="img"></span>
</div>

Avatar Status

<div class="avatar-list">
	<span class="avatar  cover-image" data-image-src="https://laravel.spruko.com/indoui/Horizontal-Light-ltr/assets/images/users/male/1.jpg"></span>
	<span class="avatar  cover-image" data-image-src="https://laravel.spruko.com/indoui/Horizontal-Light-ltr/assets/images/users/female/7.jpg">
		<span class="avatar-status"></span>
	</span>
	<span class="avatar cover-image" data-image-src="https://laravel.spruko.com/indoui/Horizontal-Light-ltr/assets/images/users/male/2.jpg">
		<span class="avatar-status bg-red"></span>
	</span>
	<span class="avatar cover-image" data-image-src="https://laravel.spruko.com/indoui/Horizontal-Light-ltr/assets/images/users/female/8.jpg">
		<span class="avatar-status bg-green"></span>
	</span>
	<span class="avatar cover-image" data-image-src="https://laravel.spruko.com/indoui/Horizontal-Light-ltr/assets/images/users/female/9.jpg">
		<span class="avatar-status bg-yellow"></span>
	</span>
</div>

Rounded Avatar Status

<div class="avatar-list">
	<span class="avatar brround cover-image" data-image-src="https://laravel.spruko.com/indoui/Horizontal-Light-ltr/assets/images/users/male/3.jpg"></span>
	<span class="avatar brround cover-image" data-image-src="https://laravel.spruko.com/indoui/Horizontal-Light-ltr/assets/images/users/female/10.jpg">
		<span class="avatar-status"></span>
	</span>
	<span class="avatar brround cover-image" data-image-src="https://laravel.spruko.com/indoui/Horizontal-Light-ltr/assets/images/users/male/4.jpg">
		<span class="avatar-status bg-red"></span>
	</span>
	<span class="avatar brround cover-image" data-image-src="https://laravel.spruko.com/indoui/Horizontal-Light-ltr/assets/images/users/female/1.jpg">
		<span class="avatar-status bg-green"></span>
	</span>
	<span class="avatar brround cover-image" data-image-src="https://laravel.spruko.com/indoui/Horizontal-Light-ltr/assets/images/users/female/2.jpg">
		<span class="avatar-status bg-yellow"></span>
	</span>
</div>

Avatars List

img img img img img
<div class="avatar-list avatar-list-stacked">
	<span><img class="avatar mr-2" src="https://laravel.spruko.com/indoui/Horizontal-Light-ltr/assets/images/users/male/5.jpg" alt="img"></span>
	<span><img class="avatar mr-2" src="https://laravel.spruko.com/indoui/Horizontal-Light-ltr/assets/images/users/female/3.jpg" alt="img"></span>
	<span><img class="avatar mr-2" src="https://laravel.spruko.com/indoui/Horizontal-Light-ltr/assets/images/users/female/4.jpg" alt="img"></span>
	<span><img class="avatar mr-2" src="https://laravel.spruko.com/indoui/Horizontal-Light-ltr/assets/images/users/female/5.jpg" alt="img"></span>
	<span><img class="avatar mr-2" src="https://laravel.spruko.com/indoui/Horizontal-Light-ltr/assets/images/users/male/6.jpg" alt="img"></span>
</div>

Rounded Avatars List

img img img img img
<div class="avatar-list avatar-list-stacked">
	<span><img class="avatar brround" src="https://laravel.spruko.com/indoui/Horizontal-Light-ltr/assets/images/users/female/6.jpg" alt="img"></span>
	<span><img class="avatar brround" src="https://laravel.spruko.com/indoui/Horizontal-Light-ltr/assets/images/users/female/7.jpg" alt="img"></span>
	<span><img class="avatar brround" src="https://laravel.spruko.com/indoui/Horizontal-Light-ltr/assets/images/users/female/8.jpg" alt="img"></span>
	<span><img class="avatar brround" src="https://laravel.spruko.com/indoui/Horizontal-Light-ltr/assets/images/users/female/9.jpg" alt="img"></span>
	<span><img class="avatar brround" src="https://laravel.spruko.com/indoui/Horizontal-Light-ltr/assets/images/users/male/7.jpg" alt="img"></span>
</div>

Simple Radius Avatar

img img img img img
<div class="avatar-list">
	<span><img class="avatar bradius mr-2" src="https://laravel.spruko.com/indoui/Horizontal-Light-ltr/assets/images/users/male/8.jpg" alt="img"></span>
	<span><img class="avatar bradius mr-2" src="https://laravel.spruko.com/indoui/Horizontal-Light-ltr/assets/images/users/male/9.jpg" alt="img"></span>
	<span><img class="avatar bradius mr-2" src="https://laravel.spruko.com/indoui/Horizontal-Light-ltr/assets/images/users/female/10.jpg" alt="img"></span>
	<span><img class="avatar bradius mr-2" src="https://laravel.spruko.com/indoui/Horizontal-Light-ltr/assets/images/users/female/1.jpg" alt="img"></span>
	<span><img class="avatar bradius mr-2" src="https://laravel.spruko.com/indoui/Horizontal-Light-ltr/assets/images/users/male/10.jpg" alt="img"></span>
</div>

Radius Avatar Size

img img img img img img
<div class="avatar-list">
	<span><img class="avatar bradius avatar-sm mr-2" src="https://laravel.spruko.com/indoui/Horizontal-Light-ltr/assets/images/users/male/4.jpg" alt="img"></span>
	<span><img class="avatar bradius mr-2" src="https://laravel.spruko.com/indoui/Horizontal-Light-ltr/assets/images/users/female/3.jpg" alt="img"></span>
	<span><img class="avatar  bradius avatar-md mr-2" src="https://laravel.spruko.com/indoui/Horizontal-Light-ltr/assets/images/users/male/5.jpg" alt="img"></span>
	<span><img class="avatar bradius avatar-lg mr-2" src="https://laravel.spruko.com/indoui/Horizontal-Light-ltr/assets/images/users/male/6.jpg" alt="img"></span>
	<span><img class="avatar  bradius avatar-xl mr-2" src="https://laravel.spruko.com/indoui/Horizontal-Light-ltr/assets/images/users/female/4.jpg" alt="img"></span>
	<span><img class="avatar  bradius avatar-xxl mr-2" src="https://laravel.spruko.com/indoui/Horizontal-Light-ltr/assets/images/users/male/7.jpg" alt="img"></span>
</div>
Copyright © 2019 IndoUi. Designed by Spruko All rights reserved.