پیشنمایش زنده
کد HTML
<div
class="mx-auto w-[500px] bg-gray-950 rounded-xl overflow-hidden drop-shadow-xl"
>
<div class="bg-[#333] flex items-center p-[5px] text-whitec relative">
<div class="flex absolute left-3">
<span class="h-3.5 w-3.5 bg-[#ff605c] rounded-xl mr-2"></span>
<span class="h-3.5 w-3.5 bg-[#ffbd44] rounded-xl mr-2"></span>
<span class="h-3.5 w-3.5 bg-[#00ca4e] rounded-xl"></span>
</div>
<div class="flex-1 text-center text-white">status</div>
</div>
<div class="p-2.5 text-[#0f0]">
<div>
<span class="mr-2">Loading</span>
<span class="animate-[ping_1.5s_0.5s_ease-in-out_infinite]">.</span>
<span class="animate-[ping_1.5s_0.7s_ease-in-out_infinite]">.</span>
<span class="animate-[ping_1.5s_0.9s_ease-in-out_infinite]">.</span>
</div>
</div>
</div>
کد CSS
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.left-3 {
left: 0.75rem;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.mr-2 {
margin-right: 0.5rem;
}
.flex {
display: flex;
}
.h-3 {
height: 0.75rem;
}
.h-3\.5 {
height: 0.875rem;
}
.w-3 {
width: 0.75rem;
}
.w-3\.5 {
width: 0.875rem;
}
.w-\[500px\] {
width: 500px;
}
.flex-1 {
flex: 1 1 0%;
}
@keyframes ping {
75%,
100% {
transform: scale(2);
opacity: 0;
}
}
.animate-\[ping_1\.5s_0\.5s_ease-in-out_infinite\] {
animation: ping 1.5s 0.5s ease-in-out infinite;
}
@keyframes ping {
75%,
100% {
transform: scale(2);
opacity: 0;
}
}
.animate-\[ping_1\.5s_0\.7s_ease-in-out_infinite\] {
animation: ping 1.5s 0.7s ease-in-out infinite;
}
@keyframes ping {
75%,
100% {
transform: scale(2);
opacity: 0;
}
}
.animate-\[ping_1\.5s_0\.9s_ease-in-out_infinite\] {
animation: ping 1.5s 0.9s ease-in-out infinite;
}
.items-center {
align-items: center;
}
.overflow-hidden {
overflow: hidden;
}
.rounded-xl {
border-radius: 0.75rem;
}
.bg-\[\#00ca4e\] {
--tw-bg-opacity: 1;
background-color: rgb(0 202 78 / var(--tw-bg-opacity));
}
.bg-\[\#333\] {
--tw-bg-opacity: 1;
background-color: rgb(51 51 51 / var(--tw-bg-opacity));
}
.bg-\[\#ff605c\] {
--tw-bg-opacity: 1;
background-color: rgb(255 96 92 / var(--tw-bg-opacity));
}
.bg-\[\#ffbd44\] {
--tw-bg-opacity: 1;
background-color: rgb(255 189 68 / var(--tw-bg-opacity));
}
.bg-gray-950 {
--tw-bg-opacity: 1;
background-color: rgb(3 7 18 / var(--tw-bg-opacity));
}
.p-2 {
padding: 0.5rem;
}
.p-2\.5 {
padding: 0.625rem;
}
.p-\[5px\] {
padding: 5px;
}
.text-center {
text-align: center;
}
.text-\[\#0f0\] {
--tw-text-opacity: 1;
color: rgb(0 255 0 / var(--tw-text-opacity));
}
.text-white {
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
.drop-shadow-xl {
--tw-drop-shadow: drop-shadow(0 20px 13px rgb(0 0 0 / 0.03))
drop-shadow(0 8px 5px rgb(0 0 0 / 0.08));
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate)
var(--tw-sepia) var(--tw-drop-shadow);
}