پیشنمایش زنده
کد HTML
<div class="text-center">
<div
class="w-16 h-16 border-4 border-dashed rounded-full animate-spin border-yellow-500 mx-auto"
></div>
<h2 class="text-zinc-900 dark:text-white mt-4">Loading...</h2>
<p class="text-zinc-600 dark:text-zinc-400">
Your adventure is about to begin
</p>
</div>
کد CSS
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.mt-4 {
margin-top: 1rem;
}
.h-16 {
height: 4rem;
}
.w-16 {
width: 4rem;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.animate-spin {
animation: spin 1s linear infinite;
}
.rounded-full {
border-radius: 9999px;
}
.border-4 {
border-width: 4px;
}
.border-dashed {
border-style: dashed;
}
.border-yellow-500 {
--tw-border-opacity: 1;
border-color: rgb(234 179 8 / var(--tw-border-opacity));
}
.text-center {
text-align: center;
}
.text-zinc-600 {
--tw-text-opacity: 1;
color: rgb(82 82 91 / var(--tw-text-opacity));
}
.text-zinc-900 {
--tw-text-opacity: 1;
color: rgb(24 24 27 / var(--tw-text-opacity));
}
@media (prefers-color-scheme: dark) {
.dark\:text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.dark\:text-zinc-400 {
--tw-text-opacity: 1;
color: rgb(161 161 170 / var(--tw-text-opacity));
}
}