پیشنمایش زنده
کد HTML
<div class="flex items-center justify-center min-h-[220px]">
<div
class="relative w-32 h-32 text-[#002D5A]"
aria-label="Loading"
role="status"
>
<div
class="absolute inset-0 rounded-full blur-md opacity-20 bg-gradient-to-tr from-[#002D5A] via-[#0892A5] to-[#C9910D]"
></div>
<svg viewBox="0 0 120 120" class="relative w-full h-full">
<g class="origin-center animate-[spin_8s_linear_infinite]">
<circle
cx="60"
cy="60"
r="54"
class="fill-none"
stroke="currentColor"
stroke-width="3"
opacity="0.25"
></circle>
<g
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
opacity="0.6"
>
<g class="origin-center">
<line x1="60" y1="6" x2="60" y2="12"></line>
<line x1="60" y1="108" x2="60" y2="114"></line>
<line x1="6" y1="60" x2="12" y2="60"></line>
<line x1="108" y1="60" x2="114" y2="60"></line>
</g>
<g>
<g class="origin-center">
<line x1="60" y1="8" x2="60" y2="12"></line>
</g>
<g class="origin-center rotate-45">
<line x1="60" y1="8" x2="60" y2="12"></line>
</g>
<g class="origin-center rotate-90">
<line x1="60" y1="8" x2="60" y2="12"></line>
</g>
<g class="origin-center rotate-[135deg]">
<line x1="60" y1="8" x2="60" y2="12"></line>
</g>
<g class="origin-center rotate-[22.5deg]">
<line x1="60" y1="8" x2="60" y2="12"></line>
</g>
<g class="origin-center rotate-[67.5deg]">
<line x1="60" y1="8" x2="60" y2="12"></line>
</g>
<g class="origin-center rotate-[112.5deg]">
<line x1="60" y1="8" x2="60" y2="12"></line>
</g>
<g class="origin-center rotate-[157.5deg]">
<line x1="60" y1="8" x2="60" y2="12"></line>
</g>
</g>
</g>
</g>
<g class="origin-center animate-[spin_5s_linear_infinite_reverse]">
<polygon
points="60,22 66,60 60,98 54,60"
fill="#C9910D"
opacity="0.95"
></polygon>
<polygon
points="22,60 60,66 98,60 60,54"
fill="#0892A5"
opacity="0.9"
></polygon>
<circle
cx="60"
cy="60"
r="6"
fill="white"
stroke="currentColor"
stroke-width="2"
></circle>
</g>
<g class="origin-center animate-[swing_1.8s_ease-in-out_infinite]">
<line
x1="60"
y1="60"
x2="60"
y2="18"
stroke="#C9910D"
stroke-width="3"
stroke-linecap="round"
></line>
<circle cx="60" cy="60" r="3" fill="#C9910D"></circle>
</g>
<g class="origin-center">
<path
d="M12 82 Q 24 76 36 82 T 60 82 T 84 82 T 108 82"
fill="none"
stroke="#0892A5"
stroke-width="3"
class="animate-[waveDash_2.2s_linear_infinite]"
></path>
<path
d="M12 90 Q 24 84 36 90 T 60 90 T 84 90 T 108 90"
fill="none"
stroke="#4E3822"
stroke-width="2"
opacity="0.4"
class="animate-[waveDash_3s_linear_infinite, bob_2.4s_ease-in-out_infinite]"
></path>
</g>
</svg>
</div>
</div>
کد CSS
/* ! tailwindcss v3.4.17 | MIT License | s://tailwindcss.com */
*,
::after,
::before {
box-sizing: border-box;
border-width: 0;
border-style: solid;
border-color: #e5e7eb;
}
::after,
::before {
--tw-content: "";
}
:host,
html {
line-height: 1.5;
-webkit-text-size-adjust: 100%;
-moz-tab-size: 4;
tab-size: 4;
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
"Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-feature-settings: normal;
font-variation-settings: normal;
-webkit-tap-highlight-color: transparent;
}
body {
margin: 0;
line-height: inherit;
}
hr {
height: 0;
color: inherit;
border-top-width: 1px;
}
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
a {
color: inherit;
text-decoration: inherit;
}
b,
strong {
font-weight: bolder;
}
code,
kbd,
pre,
samp {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
"Liberation Mono", "Courier New", monospace;
font-feature-settings: normal;
font-variation-settings: normal;
font-size: 1em;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
table {
text-indent: 0;
border-color: inherit;
border-collapse: collapse;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-size: 100%;
font-weight: inherit;
line-height: inherit;
letter-spacing: inherit;
color: inherit;
margin: 0;
padding: 0;
}
button,
select {
text-transform: none;
}
button,
input:where([type="button"]),
input:where([type="reset"]),
input:where([type="submit"]) {
-webkit-appearance: button;
background-color: transparent;
background-image: none;
}
:-moz-focusring {
outline: auto;
}
:-moz-ui-invalid {
box-shadow: none;
}
progress {
vertical-align: baseline;
}
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
[type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}
summary {
display: list-item;
}
blockquote,
dd,
dl,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
pre {
margin: 0;
}
fieldset {
margin: 0;
padding: 0;
}
legend {
padding: 0;
}
menu,
ol,
ul {
list-style: none;
margin: 0;
padding: 0;
}
dialog {
padding: 0;
}
textarea {
resize: vertical;
}
input::placeholder,
textarea::placeholder {
opacity: 1;
color: #9ca3af;
}
[role="button"],
button {
cursor: pointer;
}
:disabled {
cursor: default;
}
audio,
canvas,
embed,
iframe,
img,
object,
svg,
video {
display: block;
vertical-align: middle;
}
img,
video {
max-width: 100%;
height: auto;
}
[hidden]:where(:not([hidden="until-found"])) {
display: none;
}
.absolute {
position: absolute;
}
.relative {
position: relative;
}
.inset-0 {
inset: 0px;
}
.flex {
display: flex;
}
.h-32 {
height: 8rem;
}
.h-full {
height: 100%;
}
.min-h-\[220px\] {
min-height: 220px;
}
.w-32 {
width: 8rem;
}
.w-full {
width: 100%;
}
.origin-center {
transform-origin: center;
}
.rotate-45 {
--tw-rotate: 45deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-90 {
--tw-rotate: 90deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-\[112\.5deg\] {
--tw-rotate: 112.5deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-\[135deg\] {
--tw-rotate: 135deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-\[157\.5deg\] {
--tw-rotate: 157.5deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-\[22\.5deg\] {
--tw-rotate: 22.5deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-\[67\.5deg\] {
--tw-rotate: 67.5deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y))
rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.animate-\[spin_5s_linear_infinite_reverse\] {
animation: spin 5s linear infinite reverse;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.animate-\[spin_8s_linear_infinite\] {
animation: spin 8s linear infinite;
}
.animate-\[swing_1\.8s_ease-in-out_infinite\] {
animation: swing 1.8s ease-in-out infinite;
}
.animate-\[waveDash_2\.2s_linear_infinite\] {
animation: waveDash 2.2s linear infinite;
}
.items-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
.rounded-full {
border-radius: 9999px;
}
.bg-gradient-to-tr {
background-image: linear-gradient(to top right, var(--tw-gradient-stops));
}
.from-\[\#002D5A\] {
--tw-gradient-from: #002d5a var(--tw-gradient-from-position);
--tw-gradient-to: rgb(0 45 90 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-\[\#0892A5\] {
--tw-gradient-to: rgb(8 146 165 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from),
#0892a5 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-\[\#C9910D\] {
--tw-gradient-to: #c9910d var(--tw-gradient-to-position);
}
.fill-none {
fill: none;
}
.text-\[\#002D5A\] {
--tw-text-opacity: 1;
color: rgb(0 45 90 / var(--tw-text-opacity, 1));
}
.opacity-20 {
opacity: 0.2;
}
.blur-md {
--tw-blur: blur(12px);
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);
}