Chat List

Show All

  • A
  • B
  • D
  • J
  • O
Chat with Khelesh

Online

Hi, how are you samim? 8:40 AM, Today
Hi Khalid i am good tnx how about you? 8:55 AM, Today
I am good too, thank you for your chat template 9:00 AM, Today
You are welcome 9:05 AM, Today
I am looking for your next templates 9:07 AM, Today
Ok, thank you have a good day 9:10 AM, Today
Bye, see you 9:12 AM, Today
Hi, how are you samim? 8:40 AM, Today
Hi Khalid i am good tnx how about you? 8:55 AM, Today
I am good too, thank you for your chat template 9:00 AM, Today
You are welcome 9:05 AM, Today
I am looking for your next templates 9:07 AM, Today
Ok, thank you have a good day 9:10 AM, Today
Bye, see you 9:12 AM, Today
Notications

Show All

  • SEVER STATUS
  • KK
  • SOCIAL
  • RU
  • SEVER STATUS
  • AU
  • MO
Notes

Add New Nots

Spinners

Spinners.

Make use of Bootstrap's unique Spinners styles to provide visual feedback for ongoing processes, ensuring users are aware of background activities.

Spinners on Bootstrap

Default Spinner

Loading...

	<div class="spinner-border" role="status">
		<span class="visually-hidden">Loading...</span>
	</div>

Growing Spinner

Loading...

	<div class="spinner-grow" role="status">
		<span class="visually-hidden">Loading...</span>
	</div>

Colorfull Spinners

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

	<div class="spinner-border text-primary" role="status">
		<span class="visually-hidden">Loading...</span>
	</div>
	<div class="spinner-border text-secondary" role="status">
		<span class="visually-hidden">Loading...</span>
	</div>
	<div class="spinner-border text-success" role="status">
		<span class="visually-hidden">Loading...</span>
	</div>
	<div class="spinner-border text-danger" role="status">
		<span class="visually-hidden">Loading...</span>
	</div>
	<div class="spinner-border text-warning" role="status">
		<span class="visually-hidden">Loading...</span>
	</div>
	<div class="spinner-border text-info" role="status">
		<span class="visually-hidden">Loading...</span>
	</div>
	<div class="spinner-border text-light" role="status">
		<span class="visually-hidden">Loading...</span>
	</div>
	<div class="spinner-border text-dark" role="status">
		<span class="visually-hidden">Loading...</span>
	</div>

Colorfull Growing Spinners

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

	<div class="spinner-grow text-primary" role="status">
		<span class="visually-hidden">Loading...</span>
	</div>
	<div class="spinner-grow text-secondary" role="status">
		<span class="visually-hidden">Loading...</span>
	</div>
	<div class="spinner-grow text-success" role="status">
		<span class="visually-hidden">Loading...</span>
	</div>
	<div class="spinner-grow text-danger" role="status">
		<span class="visually-hidden">Loading...</span>
	</div>
	<div class="spinner-grow text-warning" role="status">
		<span class="visually-hidden">Loading...</span>
	</div>
	<div class="spinner-grow text-info" role="status">
		<span class="visually-hidden">Loading...</span>
	</div>
	<div class="spinner-grow text-light" role="status">
		<span class="visually-hidden">Loading...</span>
	</div>
	<div class="spinner-grow text-dark" role="status">
		<span class="visually-hidden">Loading...</span>
	</div>

Alighment Flex

Loading...
Loading...

	<div class="d-flex justify-content-center">
		<div class="spinner-border" role="status">
		<span class="visually-hidden">Loading...</span>
		</div>
	</div>
	<div class="d-flex align-items-center">
		<strong role="status">Loading...</strong>
		<div class="spinner-border ms-auto" aria-hidden="true"></div>
	</div>

Spinner Sizes

Loading...
Loading...
Loading...
Loading...

	<div class="spinner-border me-4 spinner-border-sm" role="status">
		<span class="visually-hidden">Loading...</span>
	</div>
	<div class="spinner-grow me-4 spinner-grow-sm" role="status">
		<span class="visually-hidden">Loading...</span>
	</div>
	<div class="spinner-border me-4" style="width: 3rem; height: 3rem;" role="status">
		<span class="visually-hidden">Loading...</span>
	</div>
	<div class="spinner-grow me-4" style="width: 3rem; height: 3rem;" role="status">
		<span class="visually-hidden">Loading...</span>
	</div>

Buttons Spinner


	<button class="btn btn-primary mb-2 me-2" type="button" disabled>
		<span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
		<span class="visually-hidden" role="status">Loading...</span>
	</button>
	<button class="btn btn-primary mb-2 me-2" type="button" disabled>
		<span class="spinner-border spinner-border-sm" aria-hidden="true"></span>
		<span role="status">Loading...</span>
	</button>
	<button class="btn btn-primary mb-2 me-2" type="button" disabled>
		<span class="spinner-grow spinner-grow-sm" aria-hidden="true"></span>
		<span class="visually-hidden" role="status">Loading...</span>
	</button>
	<button class="btn btn-primary mb-2 me-2" type="button" disabled>
		<span class="spinner-grow spinner-grow-sm" aria-hidden="true"></span>
		<span role="status">Loading...</span>
	</button>
	<button class="btn btn-secondary mb-2 me-2" type="button" disabled>
		<span class="spinner-grow spinner-grow-sm" aria-hidden="true"></span>
		<span role="status">Loading...</span>
	</button>
	<button class="btn btn-success mb-2 me-2" type="button" disabled>
		<span class="spinner-grow spinner-grow-sm" aria-hidden="true"></span>
		<span role="status">Loading...</span>
	</button>
	<button class="btn btn-danger mb-2 me-2" type="button" disabled>
		<span class="spinner-grow spinner-grow-sm" aria-hidden="true"></span>
		<span role="status">Loading...</span>
	</button>
	<button class="btn btn-warning mb-2 me-2" type="button" disabled>
		<span class="spinner-grow spinner-grow-sm" aria-hidden="true"></span>
		<span role="status">Loading...</span>
	</button>
	<button class="btn btn-info mb-2 me-2" type="button" disabled>
		<span class="spinner-grow spinner-grow-sm" aria-hidden="true"></span>
		<span role="status">Loading...</span>
	</button>
	<button class="btn btn-dark mb-2 me-2" type="button" disabled>
		<span class="spinner-grow spinner-grow-sm" aria-hidden="true"></span>
		<span role="status">Loading...</span>
	</button>