بارگذاری آیکون
در دسترس آیکون‌ها

آیکون‌های بارگذاری برای نشان دادن این استفاده می‌شوند که یک فرآیند در پیشرفت است یا برنامه داده را دریافت می‌کند. آن‌ها به کاربران بازخورد بصری ارائه می‌دهند تا بدانند که یک عمل در حال انجام است. این بخش نحوه استفاده از آیکون‌های بارگذاری در برنامه وب خود را پوشش می‌دهد و ارائه می‌دهد نمونه‌های مختلف از سبک‌های آیکون بارگذاری.

کد / پیش‌نمایش نمونه
audio
ball-triangle
bars
circles
grid
hearts
oval
puff
rings
spinning-circles
tail-spin
three-dots
            
                HTMLOpenTagdiv class="grid grid-cols-12 gap-y-6 py-3 sm:gap-7"HTMLCloseTag
                                                    HTMLOpenTagdiv
                                                        class="col-span-6 flex flex-col items-center justify-end sm:col-span-3 xl:col-span-2"HTMLCloseTag
                                                        HTMLOpenTagspan class="h-8 w-8"HTMLCloseTag
            HTMLOpenTagsvg
            class="h-full w-full"
            width="15"
            viewBox="0 0 55 80"
            xmlns="http://www.w3.org/2000/svg"
            fill="#2d3748"
        HTMLCloseTag
            HTMLOpenTagg transform="matrix(1 0 0 -1 0 80)"HTMLCloseTag
                HTMLOpenTagrect
                    width="10"
                    height="20"
                    rx="3"
                HTMLCloseTag
                    HTMLOpenTaganimate
                        values="20;45;57;80;64;32;66;45;64;23;66;13;64;56;34;34;2;23;76;79;20"
                        attributeName="height"
                        begin="0s"
                        dur="4.3s"
                        calcMode="linear"
                        repeatCount="indefinite"
                    /HTMLCloseTag
                HTMLOpenTag/rectHTMLCloseTag
                HTMLOpenTagrect
                    x="15"
                    width="10"
                    height="80"
                    rx="3"
                HTMLCloseTag
                    HTMLOpenTaganimate
                        values="80;55;33;5;75;23;73;33;12;14;60;80"
                        attributeName="height"
                        begin="0s"
                        dur="2s"
                        calcMode="linear"
                        repeatCount="indefinite"
                    /HTMLCloseTag
                HTMLOpenTag/rectHTMLCloseTag
                HTMLOpenTagrect
                    x="30"
                    width="10"
                    height="50"
                    rx="3"
                HTMLCloseTag
                    HTMLOpenTaganimate
                        values="50;34;78;23;56;23;34;76;80;54;21;50"
                        attributeName="height"
                        begin="0s"
                        dur="1.4s"
                        calcMode="linear"
                        repeatCount="indefinite"
                    /HTMLCloseTag
                HTMLOpenTag/rectHTMLCloseTag
                HTMLOpenTagrect
                    x="45"
                    width="10"
                    height="30"
                    rx="3"
                HTMLCloseTag
                    HTMLOpenTaganimate
                        values="30;45;13;80;56;72;45;76;34;23;67;30"
                        attributeName="height"
                        begin="0s"
                        dur="2s"
                        calcMode="linear"
                        repeatCount="indefinite"
                    /HTMLCloseTag
                HTMLOpenTag/rectHTMLCloseTag
            HTMLOpenTag/gHTMLCloseTag
        HTMLOpenTag/svgHTMLCloseTag
    HTMLOpenTag/spanHTMLCloseTag
                                                        HTMLOpenTagdiv class="mt-2 text-center text-xs"HTMLCloseTag
                                                            audio
                                                        HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
                                                        class="col-span-6 flex flex-col items-center justify-end sm:col-span-3 xl:col-span-2"HTMLCloseTag
                                                        HTMLOpenTagspan class="h-8 w-8"HTMLCloseTag
            HTMLOpenTagsvg
            class="h-full w-full"
            width="20"
            viewBox="0 0 57 57"
            xmlns="http://www.w3.org/2000/svg"
        HTMLCloseTag
            HTMLOpenTagg
                fill="none"
                fill-rule="evenodd"
            HTMLCloseTag
                HTMLOpenTagg transform="translate(1 1)"HTMLCloseTag
                    HTMLOpenTagcircle
                        cx="5"
                        cy="50"
                        r="5"
                        fill="#2d3748"
                    HTMLCloseTag
                        HTMLOpenTaganimate
                            values="50;5;50;50"
                            attributeName="cy"
                            begin="0s"
                            dur="2.2s"
                            calcMode="linear"
                            repeatCount="indefinite"
                        /HTMLCloseTag
                        HTMLOpenTaganimate
                            values="5;27;49;5"
                            attributeName="cx"
                            begin="0s"
                            dur="2.2s"
                            calcMode="linear"
                            repeatCount="indefinite"
                        /HTMLCloseTag
                    HTMLOpenTag/circleHTMLCloseTag
                    HTMLOpenTagcircle
                        cx="27"
                        cy="5"
                        r="5"
                        fill="#2d3748"
                    HTMLCloseTag
                        HTMLOpenTaganimate
                            values="5;50;50;5"
                            attributeName="cy"
                            begin="0s"
                            dur="2.2s"
                            from="5"
                            to="5"
                            calcMode="linear"
                            repeatCount="indefinite"
                        /HTMLCloseTag
                        HTMLOpenTaganimate
                            values="27;49;5;27"
                            attributeName="cx"
                            begin="0s"
                            dur="2.2s"
                            from="27"
                            to="27"
                            calcMode="linear"
                            repeatCount="indefinite"
                        /HTMLCloseTag
                    HTMLOpenTag/circleHTMLCloseTag
                    HTMLOpenTagcircle
                        cx="49"
                        cy="50"
                        r="5"
                        fill="#2d3748"
                    HTMLCloseTag
                        HTMLOpenTaganimate
                            values="50;50;5;50"
                            attributeName="cy"
                            begin="0s"
                            dur="2.2s"
                            calcMode="linear"
                            repeatCount="indefinite"
                        /HTMLCloseTag
                        HTMLOpenTaganimate
                            values="49;5;27;49"
                            attributeName="cx"
                            from="49"
                            to="49"
                            begin="0s"
                            dur="2.2s"
                            calcMode="linear"
                            repeatCount="indefinite"
                        /HTMLCloseTag
                    HTMLOpenTag/circleHTMLCloseTag
                HTMLOpenTag/gHTMLCloseTag
            HTMLOpenTag/gHTMLCloseTag
        HTMLOpenTag/svgHTMLCloseTag
    HTMLOpenTag/spanHTMLCloseTag
                                                        HTMLOpenTagdiv class="mt-2 text-center text-xs"HTMLCloseTag
                                                            ball-triangle
                                                        HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
                                                        class="col-span-6 flex flex-col items-center justify-end sm:col-span-3 xl:col-span-2"HTMLCloseTag
                                                        HTMLOpenTagspan class="h-8 w-8"HTMLCloseTag
            HTMLOpenTagsvg
            class="h-full w-full"
            width="20"
            viewBox="0 0 135 140"
            xmlns="http://www.w3.org/2000/svg"
            fill="#2d3748"
        HTMLCloseTag
            HTMLOpenTagrect
                y="10"
                width="15"
                height="120"
                rx="6"
            HTMLCloseTag
                HTMLOpenTaganimate
                    values="120;110;100;90;80;70;60;50;40;140;120"
                    attributeName="height"
                    begin="0.5s"
                    dur="1s"
                    calcMode="linear"
                    repeatCount="indefinite"
                /HTMLCloseTag
                HTMLOpenTaganimate
                    values="10;15;20;25;30;35;40;45;50;0;10"
                    attributeName="y"
                    begin="0.5s"
                    dur="1s"
                    calcMode="linear"
                    repeatCount="indefinite"
                /HTMLCloseTag
            HTMLOpenTag/rectHTMLCloseTag
            HTMLOpenTagrect
                x="30"
                y="10"
                width="15"
                height="120"
                rx="6"
            HTMLCloseTag
                HTMLOpenTaganimate
                    values="120;110;100;90;80;70;60;50;40;140;120"
                    attributeName="height"
                    begin="0.25s"
                    dur="1s"
                    calcMode="linear"
                    repeatCount="indefinite"
                /HTMLCloseTag
                HTMLOpenTaganimate
                    values="10;15;20;25;30;35;40;45;50;0;10"
                    attributeName="y"
                    begin="0.25s"
                    dur="1s"
                    calcMode="linear"
                    repeatCount="indefinite"
                /HTMLCloseTag
            HTMLOpenTag/rectHTMLCloseTag
            HTMLOpenTagrect
                x="60"
                width="15"
                height="140"
                rx="6"
            HTMLCloseTag
                HTMLOpenTaganimate
                    values="120;110;100;90;80;70;60;50;40;140;120"
                    attributeName="height"
                    begin="0s"
                    dur="1s"
                    calcMode="linear"
                    repeatCount="indefinite"
                /HTMLCloseTag
                HTMLOpenTaganimate
                    values="10;15;20;25;30;35;40;45;50;0;10"
                    attributeName="y"
                    begin="0s"
                    dur="1s"
                    calcMode="linear"
                    repeatCount="indefinite"
                /HTMLCloseTag
            HTMLOpenTag/rectHTMLCloseTag
            HTMLOpenTagrect
                x="90"
                y="10"
                width="15"
                height="120"
                rx="6"
            HTMLCloseTag
                HTMLOpenTaganimate
                    values="120;110;100;90;80;70;60;50;40;140;120"
                    attributeName="height"
                    begin="0.25s"
                    dur="1s"
                    calcMode="linear"
                    repeatCount="indefinite"
                /HTMLCloseTag
                HTMLOpenTaganimate
                    values="10;15;20;25;30;35;40;45;50;0;10"
                    attributeName="y"
                    begin="0.25s"
                    dur="1s"
                    calcMode="linear"
                    repeatCount="indefinite"
                /HTMLCloseTag
            HTMLOpenTag/rectHTMLCloseTag
            HTMLOpenTagrect
                x="120"
                y="10"
                width="15"
                height="120"
                rx="6"
            HTMLCloseTag
                HTMLOpenTaganimate
                    values="120;110;100;90;80;70;60;50;40;140;120"
                    attributeName="height"
                    begin="0.5s"
                    dur="1s"
                    calcMode="linear"
                    repeatCount="indefinite"
                /HTMLCloseTag
                HTMLOpenTaganimate
                    values="10;15;20;25;30;35;40;45;50;0;10"
                    attributeName="y"
                    begin="0.5s"
                    dur="1s"
                    calcMode="linear"
                    repeatCount="indefinite"
                /HTMLCloseTag
            HTMLOpenTag/rectHTMLCloseTag
        HTMLOpenTag/svgHTMLCloseTag
    HTMLOpenTag/spanHTMLCloseTag
                                                        HTMLOpenTagdiv class="mt-2 text-center text-xs"HTMLCloseTag
                                                            bars
                                                        HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
                                                        class="col-span-6 flex flex-col items-center justify-end sm:col-span-3 xl:col-span-2"HTMLCloseTag
                                                        HTMLOpenTagspan class="h-8 w-8"HTMLCloseTag
            HTMLOpenTagsvg
            class="h-full w-full"
            width="20"
            viewBox="0 0 135 135"
            xmlns="http://www.w3.org/2000/svg"
            fill="#2d3748"
        HTMLCloseTag
            HTMLOpenTagpath
                d="M67.447 58c5.523 0 10-4.477 10-10s-4.477-10-10-10-10 4.477-10 10 4.477 10 10 10zm9.448 9.447c0 5.523 4.477 10 10 10 5.522 0 10-4.477 10-10s-4.478-10-10-10c-5.523 0-10 4.477-10 10zm-9.448 9.448c-5.523 0-10 4.477-10 10 0 5.522 4.477 10 10 10s10-4.478 10-10c0-5.523-4.477-10-10-10zM58 67.447c0-5.523-4.477-10-10-10s-10 4.477-10 10 4.477 10 10 10 10-4.477 10-10z"
            HTMLCloseTag
                HTMLOpenTaganimateTransform
                    type="rotate"
                    attributeName="transform"
                    from="0 67 67"
                    to="-360 67 67"
                    dur="2.5s"
                    repeatCount="indefinite"
                /HTMLCloseTag
            HTMLOpenTag/pathHTMLCloseTag
            HTMLOpenTagpath
                d="M28.19 40.31c6.627 0 12-5.374 12-12 0-6.628-5.373-12-12-12-6.628 0-12 5.372-12 12 0 6.626 5.372 12 12 12zm30.72-19.825c4.686 4.687 12.284 4.687 16.97 0 4.686-4.686 4.686-12.284 0-16.97-4.686-4.687-12.284-4.687-16.97 0-4.687 4.686-4.687 12.284 0 16.97zm35.74 7.705c0 6.627 5.37 12 12 12 6.626 0 12-5.373 12-12 0-6.628-5.374-12-12-12-6.63 0-12 5.372-12 12zm19.822 30.72c-4.686 4.686-4.686 12.284 0 16.97 4.687 4.686 12.285 4.686 16.97 0 4.687-4.686 4.687-12.284 0-16.97-4.685-4.687-12.283-4.687-16.97 0zm-7.704 35.74c-6.627 0-12 5.37-12 12 0 6.626 5.373 12 12 12s12-5.374 12-12c0-6.63-5.373-12-12-12zm-30.72 19.822c-4.686-4.686-12.284-4.686-16.97 0-4.686 4.687-4.686 12.285 0 16.97 4.686 4.687 12.284 4.687 16.97 0 4.687-4.685 4.687-12.283 0-16.97zm-35.74-7.704c0-6.627-5.372-12-12-12-6.626 0-12 5.373-12 12s5.374 12 12 12c6.628 0 12-5.373 12-12zm-19.823-30.72c4.687-4.686 4.687-12.284 0-16.97-4.686-4.686-12.284-4.686-16.97 0-4.687 4.686-4.687 12.284 0 16.97 4.686 4.687 12.284 4.687 16.97 0z"
            HTMLCloseTag
                HTMLOpenTaganimateTransform
                    type="rotate"
                    attributeName="transform"
                    from="0 67 67"
                    to="360 67 67"
                    dur="8s"
                    repeatCount="indefinite"
                /HTMLCloseTag
            HTMLOpenTag/pathHTMLCloseTag
        HTMLOpenTag/svgHTMLCloseTag
    HTMLOpenTag/spanHTMLCloseTag
                                                        HTMLOpenTagdiv class="mt-2 text-center text-xs"HTMLCloseTag
                                                            circles
                                                        HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
                                                        class="col-span-6 flex flex-col items-center justify-end sm:col-span-3 xl:col-span-2"HTMLCloseTag
                                                        HTMLOpenTagspan class="h-8 w-8"HTMLCloseTag
            HTMLOpenTagsvg
            class="h-full w-full"
            width="20"
            viewBox="0 0 105 105"
            xmlns="http://www.w3.org/2000/svg"
            fill="#2d3748"
        HTMLCloseTag
            HTMLOpenTagcircle
                cx="12.5"
                cy="12.5"
                r="12.5"
            HTMLCloseTag
                HTMLOpenTaganimate
                    values="1;.2;1"
                    attributeName="fill-opacity"
                    begin="0s"
                    dur="1s"
                    calcMode="linear"
                    repeatCount="indefinite"
                /HTMLCloseTag
            HTMLOpenTag/circleHTMLCloseTag
            HTMLOpenTagcircle
                cx="12.5"
                cy="52.5"
                r="12.5"
                fill-opacity=".5"
            HTMLCloseTag
                HTMLOpenTaganimate
                    values="1;.2;1"
                    attributeName="fill-opacity"
                    begin="100ms"
                    dur="1s"
                    calcMode="linear"
                    repeatCount="indefinite"
                /HTMLCloseTag
            HTMLOpenTag/circleHTMLCloseTag
            HTMLOpenTagcircle
                cx="52.5"
                cy="12.5"
                r="12.5"
            HTMLCloseTag
                HTMLOpenTaganimate
                    values="1;.2;1"
                    attributeName="fill-opacity"
                    begin="300ms"
                    dur="1s"
                    calcMode="linear"
                    repeatCount="indefinite"
                /HTMLCloseTag
            HTMLOpenTag/circleHTMLCloseTag
            HTMLOpenTagcircle
                cx="52.5"
                cy="52.5"
                r="12.5"
            HTMLCloseTag
                HTMLOpenTaganimate
                    values="1;.2;1"
                    attributeName="fill-opacity"
                    begin="600ms"
                    dur="1s"
                    calcMode="linear"
                    repeatCount="indefinite"
                /HTMLCloseTag
            HTMLOpenTag/circleHTMLCloseTag
            HTMLOpenTagcircle
                cx="92.5"
                cy="12.5"
                r="12.5"
            HTMLCloseTag
                HTMLOpenTaganimate
                    values="1;.2;1"
                    attributeName="fill-opacity"
                    begin="800ms"
                    dur="1s"
                    calcMode="linear"
                    repeatCount="indefinite"
                /HTMLCloseTag
            HTMLOpenTag/circleHTMLCloseTag
            HTMLOpenTagcircle
                cx="92.5"
                cy="52.5"
                r="12.5"
            HTMLCloseTag
                HTMLOpenTaganimate
                    values="1;.2;1"
                    attributeName="fill-opacity"
                    begin="400ms"
                    dur="1s"
                    calcMode="linear"
                    repeatCount="indefinite"
                /HTMLCloseTag
            HTMLOpenTag/circleHTMLCloseTag
            HTMLOpenTagcircle
                cx="12.5"
                cy="92.5"
                r="12.5"
            HTMLCloseTag
                HTMLOpenTaganimate
                    values="1;.2;1"
                    attributeName="fill-opacity"
                    begin="700ms"
                    dur="1s"
                    calcMode="linear"
                    repeatCount="indefinite"
                /HTMLCloseTag
            HTMLOpenTag/circleHTMLCloseTag
            HTMLOpenTagcircle
                cx="52.5"
                cy="92.5"
                r="12.5"
            HTMLCloseTag
                HTMLOpenTaganimate
                    values="1;.2;1"
                    attributeName="fill-opacity"
                    begin="500ms"
                    dur="1s"
                    calcMode="linear"
                    repeatCount="indefinite"
                /HTMLCloseTag
            HTMLOpenTag/circleHTMLCloseTag
            HTMLOpenTagcircle
                cx="92.5"
                cy="92.5"
                r="12.5"
            HTMLCloseTag
                HTMLOpenTaganimate
                    values="1;.2;1"
                    attributeName="fill-opacity"
                    begin="200ms"
                    dur="1s"
                    calcMode="linear"
                    repeatCount="indefinite"
                /HTMLCloseTag
            HTMLOpenTag/circleHTMLCloseTag
        HTMLOpenTag/svgHTMLCloseTag
    HTMLOpenTag/spanHTMLCloseTag
                                                        HTMLOpenTagdiv class="mt-2 text-center text-xs"HTMLCloseTag
                                                            grid
                                                        HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
                                                        class="col-span-6 flex flex-col items-center justify-end sm:col-span-3 xl:col-span-2"HTMLCloseTag
                                                        HTMLOpenTagspan class="h-8 w-8"HTMLCloseTag
            HTMLOpenTagsvg
            class="h-full w-full"
            width="30"
            viewBox="0 0 140 64"
            xmlns="http://www.w3.org/2000/svg"
            fill="#2d3748"
        HTMLCloseTag
            HTMLOpenTagpath
                d="M30.262 57.02L7.195 40.723c-5.84-3.976-7.56-12.06-3.842-18.063 3.715-6 11.467-7.65 17.306-3.68l4.52 3.76 2.6-5.274c3.717-6.002 11.47-7.65 17.305-3.68 5.84 3.97 7.56 12.054 3.842 18.062L34.49 56.118c-.897 1.512-2.793 1.915-4.228.9z"
                fill-opacity=".5"
            HTMLCloseTag
                HTMLOpenTaganimate
                    values="0.5;1;0.5"
                    attributeName="fill-opacity"
                    begin="0s"
                    dur="1.4s"
                    calcMode="linear"
                    repeatCount="indefinite"
                /HTMLCloseTag
            HTMLOpenTag/pathHTMLCloseTag
            HTMLOpenTagpath
                d="M105.512 56.12l-14.44-24.272c-3.716-6.008-1.996-14.093 3.843-18.062 5.835-3.97 13.588-2.322 17.306 3.68l2.6 5.274 4.52-3.76c5.84-3.97 13.592-2.32 17.307 3.68 3.718 6.003 1.998 14.088-3.842 18.064L109.74 57.02c-1.434 1.014-3.33.61-4.228-.9z"
                fill-opacity=".5"
            HTMLCloseTag
                HTMLOpenTaganimate
                    values="0.5;1;0.5"
                    attributeName="fill-opacity"
                    begin="0.7s"
                    dur="1.4s"
                    calcMode="linear"
                    repeatCount="indefinite"
                /HTMLCloseTag
            HTMLOpenTag/pathHTMLCloseTag
            HTMLOpenTagpath
                d="M67.408 57.834l-23.01-24.98c-5.864-6.15-5.864-16.108 0-22.248 5.86-6.14 15.37-6.14 21.234 0L70 16.168l4.368-5.562c5.863-6.14 15.375-6.14 21.235 0 5.863 6.14 5.863 16.098 0 22.247l-23.007 24.98c-1.43 1.556-3.757 1.556-5.188 0z"
            /HTMLCloseTag
        HTMLOpenTag/svgHTMLCloseTag
    HTMLOpenTag/spanHTMLCloseTag
                                                        HTMLOpenTagdiv class="mt-2 text-center text-xs"HTMLCloseTag
                                                            hearts
                                                        HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
                                                        class="col-span-6 flex flex-col items-center justify-end sm:col-span-3 xl:col-span-2"HTMLCloseTag
                                                        HTMLOpenTagspan class="h-8 w-8"HTMLCloseTag
            HTMLOpenTagsvg
            class="h-full w-full"
            width="25"
            viewBox="-2 -2 42 42"
            xmlns="http://www.w3.org/2000/svg"
            stroke="#2d3748"
        HTMLCloseTag
            HTMLOpenTagg
                fill="none"
                fill-rule="evenodd"
            HTMLCloseTag
                HTMLOpenTagg
                    transform="translate(1 1)"
                    stroke-width="4"
                HTMLCloseTag
                    HTMLOpenTagcircle
                        stroke-opacity=".5"
                        cx="18"
                        cy="18"
                        r="18"
                    /HTMLCloseTag
                    HTMLOpenTagpath d="M36 18c0-9.94-8.06-18-18-18"HTMLCloseTag
                        HTMLOpenTaganimateTransform
                            type="rotate"
                            attributeName="transform"
                            from="0 18 18"
                            to="360 18 18"
                            dur="1s"
                            repeatCount="indefinite"
                        /HTMLCloseTag
                    HTMLOpenTag/pathHTMLCloseTag
                HTMLOpenTag/gHTMLCloseTag
            HTMLOpenTag/gHTMLCloseTag
        HTMLOpenTag/svgHTMLCloseTag
    HTMLOpenTag/spanHTMLCloseTag
                                                        HTMLOpenTagdiv class="mt-2 text-center text-xs"HTMLCloseTag
                                                            oval
                                                        HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
                                                        class="col-span-6 flex flex-col items-center justify-end sm:col-span-3 xl:col-span-2"HTMLCloseTag
                                                        HTMLOpenTagspan class="h-8 w-8"HTMLCloseTag
            HTMLOpenTagsvg
            class="h-full w-full"
            width="25"
            viewBox="0 0 44 44"
            xmlns="http://www.w3.org/2000/svg"
            stroke="#2d3748"
        HTMLCloseTag
            HTMLOpenTagg
                fill="none"
                fill-rule="evenodd"
                stroke-width="4"
            HTMLCloseTag
                HTMLOpenTagcircle
                    cx="22"
                    cy="22"
                    r="1"
                HTMLCloseTag
                    HTMLOpenTaganimate
                        values="1; 20"
                        attributeName="r"
                        begin="0s"
                        dur="1.8s"
                        calcMode="spline"
                        keyTimes="0; 1"
                        keySplines="0.165, 0.84, 0.44, 1"
                        repeatCount="indefinite"
                    /HTMLCloseTag
                    HTMLOpenTaganimate
                        values="1; 0"
                        attributeName="stroke-opacity"
                        begin="0s"
                        dur="1.8s"
                        calcMode="spline"
                        keyTimes="0; 1"
                        keySplines="0.3, 0.61, 0.355, 1"
                        repeatCount="indefinite"
                    /HTMLCloseTag
                HTMLOpenTag/circleHTMLCloseTag
                HTMLOpenTagcircle
                    cx="22"
                    cy="22"
                    r="1"
                HTMLCloseTag
                    HTMLOpenTaganimate
                        values="1; 20"
                        attributeName="r"
                        begin="-0.9s"
                        dur="1.8s"
                        calcMode="spline"
                        keyTimes="0; 1"
                        keySplines="0.165, 0.84, 0.44, 1"
                        repeatCount="indefinite"
                    /HTMLCloseTag
                    HTMLOpenTaganimate
                        values="1; 0"
                        attributeName="stroke-opacity"
                        begin="-0.9s"
                        dur="1.8s"
                        calcMode="spline"
                        keyTimes="0; 1"
                        keySplines="0.3, 0.61, 0.355, 1"
                        repeatCount="indefinite"
                    /HTMLCloseTag
                HTMLOpenTag/circleHTMLCloseTag
            HTMLOpenTag/gHTMLCloseTag
        HTMLOpenTag/svgHTMLCloseTag
    HTMLOpenTag/spanHTMLCloseTag
                                                        HTMLOpenTagdiv class="mt-2 text-center text-xs"HTMLCloseTag
                                                            puff
                                                        HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
                                                        class="col-span-6 flex flex-col items-center justify-end sm:col-span-3 xl:col-span-2"HTMLCloseTag
                                                        HTMLOpenTagspan class="h-8 w-8"HTMLCloseTag
            HTMLOpenTagsvg
            class="h-full w-full"
            width="30"
            viewBox="0 0 45 45"
            xmlns="http://www.w3.org/2000/svg"
            stroke="#2d3748"
        HTMLCloseTag
            HTMLOpenTagg
                fill="none"
                fill-rule="evenodd"
                transform="translate(1 1)"
                stroke-width="3"
            HTMLCloseTag
                HTMLOpenTagcircle
                    cx="22"
                    cy="22"
                    r="6"
                    stroke-opacity="0"
                HTMLCloseTag
                    HTMLOpenTaganimate
                        values="6;22"
                        attributeName="r"
                        begin="1.5s"
                        dur="3s"
                        calcMode="linear"
                        repeatCount="indefinite"
                    /HTMLCloseTag
                    HTMLOpenTaganimate
                        values="1;0"
                        attributeName="stroke-opacity"
                        begin="1.5s"
                        dur="3s"
                        calcMode="linear"
                        repeatCount="indefinite"
                    /HTMLCloseTag
                    HTMLOpenTaganimate
                        values="2;0"
                        attributeName="stroke-width"
                        begin="1.5s"
                        dur="3s"
                        calcMode="linear"
                        repeatCount="indefinite"
                    /HTMLCloseTag
                HTMLOpenTag/circleHTMLCloseTag
                HTMLOpenTagcircle
                    cx="22"
                    cy="22"
                    r="6"
                    stroke-opacity="0"
                HTMLCloseTag
                    HTMLOpenTaganimate
                        values="6;22"
                        attributeName="r"
                        begin="3s"
                        dur="3s"
                        calcMode="linear"
                        repeatCount="indefinite"
                    /HTMLCloseTag
                    HTMLOpenTaganimate
                        values="1;0"
                        attributeName="stroke-opacity"
                        begin="3s"
                        dur="3s"
                        calcMode="linear"
                        repeatCount="indefinite"
                    /HTMLCloseTag
                    HTMLOpenTaganimate
                        values="2;0"
                        attributeName="stroke-width"
                        begin="3s"
                        dur="3s"
                        calcMode="linear"
                        repeatCount="indefinite"
                    /HTMLCloseTag
                HTMLOpenTag/circleHTMLCloseTag
                HTMLOpenTagcircle
                    cx="22"
                    cy="22"
                    r="8"
                HTMLCloseTag
                    HTMLOpenTaganimate
                        values="6;1;2;3;4;5;6"
                        attributeName="r"
                        begin="0s"
                        dur="1.5s"
                        calcMode="linear"
                        repeatCount="indefinite"
                    /HTMLCloseTag
                HTMLOpenTag/circleHTMLCloseTag
            HTMLOpenTag/gHTMLCloseTag
        HTMLOpenTag/svgHTMLCloseTag
    HTMLOpenTag/spanHTMLCloseTag
                                                        HTMLOpenTagdiv class="mt-2 text-center text-xs"HTMLCloseTag
                                                            rings
                                                        HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
                                                        class="col-span-6 flex flex-col items-center justify-end sm:col-span-3 xl:col-span-2"HTMLCloseTag
                                                        HTMLOpenTagspan class="h-8 w-8"HTMLCloseTag
            HTMLOpenTagsvg
            class="h-full w-full"
            width="20"
            viewBox="0 0 58 58"
            xmlns="http://www.w3.org/2000/svg"
        HTMLCloseTag
            HTMLOpenTagg
                fill="none"
                fill-rule="evenodd"
            HTMLCloseTag
                HTMLOpenTagg
                    transform="translate(2 1)"
                    stroke="#2d3748"
                    stroke-width="1.5"
                HTMLCloseTag
                    HTMLOpenTagcircle
                        cx="42.601"
                        cy="11.462"
                        r="5"
                        fill-opacity="1"
                        fill="#2d3748"
                    HTMLCloseTag
                        HTMLOpenTaganimate
                            values="1;0;0;0;0;0;0;0"
                            attributeName="fill-opacity"
                            begin="0s"
                            dur="1.3s"
                            calcMode="linear"
                            repeatCount="indefinite"
                        /HTMLCloseTag
                    HTMLOpenTag/circleHTMLCloseTag
                    HTMLOpenTagcircle
                        cx="49.063"
                        cy="27.063"
                        r="5"
                        fill-opacity="0"
                        fill="#2d3748"
                    HTMLCloseTag
                        HTMLOpenTaganimate
                            values="0;1;0;0;0;0;0;0"
                            attributeName="fill-opacity"
                            begin="0s"
                            dur="1.3s"
                            calcMode="linear"
                            repeatCount="indefinite"
                        /HTMLCloseTag
                    HTMLOpenTag/circleHTMLCloseTag
                    HTMLOpenTagcircle
                        cx="42.601"
                        cy="42.663"
                        r="5"
                        fill-opacity="0"
                        fill="#2d3748"
                    HTMLCloseTag
                        HTMLOpenTaganimate
                            values="0;0;1;0;0;0;0;0"
                            attributeName="fill-opacity"
                            begin="0s"
                            dur="1.3s"
                            calcMode="linear"
                            repeatCount="indefinite"
                        /HTMLCloseTag
                    HTMLOpenTag/circleHTMLCloseTag
                    HTMLOpenTagcircle
                        cx="27"
                        cy="49.125"
                        r="5"
                        fill-opacity="0"
                        fill="#2d3748"
                    HTMLCloseTag
                        HTMLOpenTaganimate
                            values="0;0;0;1;0;0;0;0"
                            attributeName="fill-opacity"
                            begin="0s"
                            dur="1.3s"
                            calcMode="linear"
                            repeatCount="indefinite"
                        /HTMLCloseTag
                    HTMLOpenTag/circleHTMLCloseTag
                    HTMLOpenTagcircle
                        cx="11.399"
                        cy="42.663"
                        r="5"
                        fill-opacity="0"
                        fill="#2d3748"
                    HTMLCloseTag
                        HTMLOpenTaganimate
                            values="0;0;0;0;1;0;0;0"
                            attributeName="fill-opacity"
                            begin="0s"
                            dur="1.3s"
                            calcMode="linear"
                            repeatCount="indefinite"
                        /HTMLCloseTag
                    HTMLOpenTag/circleHTMLCloseTag
                    HTMLOpenTagcircle
                        cx="4.938"
                        cy="27.063"
                        r="5"
                        fill-opacity="0"
                        fill="#2d3748"
                    HTMLCloseTag
                        HTMLOpenTaganimate
                            values="0;0;0;0;0;1;0;0"
                            attributeName="fill-opacity"
                            begin="0s"
                            dur="1.3s"
                            calcMode="linear"
                            repeatCount="indefinite"
                        /HTMLCloseTag
                    HTMLOpenTag/circleHTMLCloseTag
                    HTMLOpenTagcircle
                        cx="11.399"
                        cy="11.462"
                        r="5"
                        fill-opacity="0"
                        fill="#2d3748"
                    HTMLCloseTag
                        HTMLOpenTaganimate
                            values="0;0;0;0;0;0;1;0"
                            attributeName="fill-opacity"
                            begin="0s"
                            dur="1.3s"
                            calcMode="linear"
                            repeatCount="indefinite"
                        /HTMLCloseTag
                    HTMLOpenTag/circleHTMLCloseTag
                    HTMLOpenTagcircle
                        cx="27"
                        cy="5"
                        r="5"
                        fill-opacity="0"
                        fill="#2d3748"
                    HTMLCloseTag
                        HTMLOpenTaganimate
                            values="0;0;0;0;0;0;0;1"
                            attributeName="fill-opacity"
                            begin="0s"
                            dur="1.3s"
                            calcMode="linear"
                            repeatCount="indefinite"
                        /HTMLCloseTag
                    HTMLOpenTag/circleHTMLCloseTag
                HTMLOpenTag/gHTMLCloseTag
            HTMLOpenTag/gHTMLCloseTag
        HTMLOpenTag/svgHTMLCloseTag
    HTMLOpenTag/spanHTMLCloseTag
                                                        HTMLOpenTagdiv class="mt-2 text-center text-xs"HTMLCloseTag
                                                            spinning-circles
                                                        HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
                                                        class="col-span-6 flex flex-col items-center justify-end sm:col-span-3 xl:col-span-2"HTMLCloseTag
                                                        HTMLOpenTagspan class="h-8 w-8"HTMLCloseTag
            HTMLOpenTagsvg
            class="h-full w-full"
            width="20"
            viewBox="0 0 38 38"
            xmlns="http://www.w3.org/2000/svg"
        HTMLCloseTag
            HTMLOpenTagdefsHTMLCloseTag
                HTMLOpenTaglinearGradient
                    id="a"
                    x1="8.042%"
                    y1="0%"
                    x2="65.682%"
                    y2="23.865%"
                HTMLCloseTag
                    HTMLOpenTagstop
                        stop-color="#2d3748"
                        stop-opacity="0"
                        offset="0%"
                    /HTMLCloseTag
                    HTMLOpenTagstop
                        stop-color="#2d3748"
                        offset="100%"
                    /HTMLCloseTag
                    HTMLOpenTagstop
                        stop-color="#2d3748"
                        stop-opacity=".631"
                        offset="63.146%"
                    /HTMLCloseTag
                HTMLOpenTag/linearGradientHTMLCloseTag
            HTMLOpenTag/defsHTMLCloseTag
            HTMLOpenTagg
                fill="none"
                fill-rule="evenodd"
            HTMLCloseTag
                HTMLOpenTagg transform="translate(1 1)"HTMLCloseTag
                    HTMLOpenTagpath
                        id="Oval-2"
                        d="M36 18c0-9.94-8.06-18-18-18"
                        stroke="url(#a)"
                        stroke-width="3"
                    HTMLCloseTag
                        HTMLOpenTaganimateTransform
                            type="rotate"
                            attributeName="transform"
                            from="0 18 18"
                            to="360 18 18"
                            dur="0.9s"
                            repeatCount="indefinite"
                        /HTMLCloseTag
                    HTMLOpenTag/pathHTMLCloseTag
                    HTMLOpenTagcircle
                        fill="#2d3748"
                        cx="36"
                        cy="18"
                        r="1"
                    HTMLCloseTag
                        HTMLOpenTaganimateTransform
                            type="rotate"
                            attributeName="transform"
                            from="0 18 18"
                            to="360 18 18"
                            dur="0.9s"
                            repeatCount="indefinite"
                        /HTMLCloseTag
                    HTMLOpenTag/circleHTMLCloseTag
                HTMLOpenTag/gHTMLCloseTag
            HTMLOpenTag/gHTMLCloseTag
        HTMLOpenTag/svgHTMLCloseTag
    HTMLOpenTag/spanHTMLCloseTag
                                                        HTMLOpenTagdiv class="mt-2 text-center text-xs"HTMLCloseTag
                                                            tail-spin
                                                        HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTagdiv
                                                        class="col-span-6 flex flex-col items-center justify-end sm:col-span-3 xl:col-span-2"HTMLCloseTag
                                                        HTMLOpenTagspan class="h-8 w-8"HTMLCloseTag
            HTMLOpenTagsvg
            class="h-full w-full"
            width="25"
            viewBox="0 0 120 30"
            xmlns="http://www.w3.org/2000/svg"
            fill="#2d3748"
        HTMLCloseTag
            HTMLOpenTagcircle
                cx="15"
                cy="15"
                r="15"
            HTMLCloseTag
                HTMLOpenTaganimate
                    values="15;9;15"
                    attributeName="r"
                    from="15"
                    to="15"
                    begin="0s"
                    dur="0.8s"
                    calcMode="linear"
                    repeatCount="indefinite"
                /HTMLCloseTag
                HTMLOpenTaganimate
                    values="1;.5;1"
                    attributeName="fill-opacity"
                    from="1"
                    to="1"
                    begin="0s"
                    dur="0.8s"
                    calcMode="linear"
                    repeatCount="indefinite"
                /HTMLCloseTag
            HTMLOpenTag/circleHTMLCloseTag
            HTMLOpenTagcircle
                cx="60"
                cy="15"
                r="9"
                fill-opacity="0.3"
            HTMLCloseTag
                HTMLOpenTaganimate
                    values="9;15;9"
                    attributeName="r"
                    from="9"
                    to="9"
                    begin="0s"
                    dur="0.8s"
                    calcMode="linear"
                    repeatCount="indefinite"
                /HTMLCloseTag
                HTMLOpenTaganimate
                    values=".5;1;.5"
                    attributeName="fill-opacity"
                    from="0.5"
                    to="0.5"
                    begin="0s"
                    dur="0.8s"
                    calcMode="linear"
                    repeatCount="indefinite"
                /HTMLCloseTag
            HTMLOpenTag/circleHTMLCloseTag
            HTMLOpenTagcircle
                cx="105"
                cy="15"
                r="15"
            HTMLCloseTag
                HTMLOpenTaganimate
                    values="15;9;15"
                    attributeName="r"
                    from="15"
                    to="15"
                    begin="0s"
                    dur="0.8s"
                    calcMode="linear"
                    repeatCount="indefinite"
                /HTMLCloseTag
                HTMLOpenTaganimate
                    values="1;.5;1"
                    attributeName="fill-opacity"
                    from="1"
                    to="1"
                    begin="0s"
                    dur="0.8s"
                    calcMode="linear"
                    repeatCount="indefinite"
                /HTMLCloseTag
            HTMLOpenTag/circleHTMLCloseTag
        HTMLOpenTag/svgHTMLCloseTag
    HTMLOpenTag/spanHTMLCloseTag
                                                        HTMLOpenTagdiv class="mt-2 text-center text-xs"HTMLCloseTag
                                                            three-dots
                                                        HTMLOpenTag/divHTMLCloseTag
                                                    HTMLOpenTag/divHTMLCloseTag
                                                HTMLOpenTag/divHTMLCloseTag
            
        

آیکون‌های بارگذاری برای ارائه بازخورد به کاربران در طول عملیات ناهمزمان ضروری هستند. با استفاده از مؤلفه `LoadingIcon` و سفارشی‌سازی ظاهر آن، می‌توانید تجربه‌ی بارگذاری ثابت و جذاب بصری را در برنامه وب خود ایجاد کنید. حتماً یک استایل آیکون بارگذاری مناسب را انتخاب کنید که با طراحی برنامه شما همخوانی داشته باشد و بازخورد روشنی به کاربران ارائه دهد.

رابط اجزاء

در این بخش، شما اطلاعات دقیقی درباره ویژگی‌ها، کلاس‌ها، و گزینه‌های موجود که می‌توان با این مؤلفه استفاده کرد را پیدا خواهید کرد. درک این ویژگی‌ها برای سفارشی‌سازی و پیکربندی مؤلفه برای تنظیمات خاص شما بسیار مهم است.

در زیر لیستی از ویژگی‌هایی که می‌توان به اجزاء منتقل کرد، آمده است:

Tab
پراپ نوع شرح
`icon` `audio`, `ball-triangle`, `bars`, `circles` , `grid`, `hearts`, `oval`, `puff`, `rings` , `spinning-circles`, `tail-spin`, `three-dots` نام آیکون بارگذاری را برای نمایش مشخص می‌کند
`color` `string` رنگ آیکون را مشخص می‌کند