CSS?? ????? ??? ? ?? ??? ????. 1. HTML ? CSS? ?? ??? ?????? ???? ?? ???? ?? ???? ??????. 2. ?? ??? ??? ?? ???? ???? ?? ?? ??? ?? ?? ??? ??????. 3. ??? ????? ???? JavaScript? ?? ???? ?????? ??? ?????. ? ?? ??? ??? ??? ????? ?? ??, ??, ??? ? ?? ???? ?? ?? ?? ??? ???? ?????.

CSS? ?? ???? ??? ?? ??????? ?? ??? ??? ????? ??? ?????. ??? ??????? JavaScript? ???? ????. HTML ? CSS ? ????. ??? ?? ? ??? ???? ???? ???? ?????.

??? ???? ?? ???

???? ??? ?? ??? ?? ? ??? ??? ??? ???? CSS ??????? ???? ????.

HTML :

 <div class = "Spinner"> </div>

CSS :

 .spinner {
  ?? : 40px;
  ?? : 40px;
  ?? : 4px Solid #CCC;
  ??-? ?? : #333;
  ??-???? : 50%;
  ????? : ?? 1s ?? ??;
}

@keyframes ?? {
  to {transform : ?? (360deg); }
}

• border ? ??? ????.
• border-top-color ??? ? ???? "??"??? ?????.
• spin ? ???? ??? ??? ??????.

? ??? ?? ??? ??? ?????.

?? ?? ???? ??? ???

?? ??? ? ??? ? ?? ???? ?? ?? ??? ?? ??? ??????.

HTML :

 <div class = "dot-spinner">
  <div class = "dot"> </div>
  <div class = "dot"> </div>
  <div class = "dot"> </div>
</div>

CSS :

 .dot-spinner {
  ????? : Flex;
  ? : 5px;
}

.dot {
  ?? : 8px;
  ?? : 8px;
  ??? : #333;
  ??-???? : 50%;
  ????? : ??? 1.2S ?? ???;
}

.DOT : nth-Child (1) {?????-?? : -0.32s; }
.DOT : Nth-Child (2) {????? ?? : -0.16S; }

@keyframes ??? {
  0%, 80%, 100%{?? : ??? (0); }
  40% {?? : ??? (1); }
}

• ? ?? ?? ?? ??? ???? ????.
• ? ?? ??? ?????? ?? ?? ?? ??? ?????.
• ?? ???? ??? ????? ???? ??? ? ????.

? ??? ???? ??? ???? ??? ??? ?? UI? ?????.

??? ????? ??

??? ??? ?? ? ? ?? ?? ???? ???? ?? ?? ????.

HTML :

 <button class = "loading-btn">
  <span class = "btn-text"> ?? </span>
  <span class = "Spinner"> </span>
</??>

CSS (??) :

 .loading-btn .spinner {
  ????? : ??;
  ?? : 16px;
  ?? : 16px;
  ?? : 2px Solid #fff;
  ??-? ?? : ??;
  ??-???? : 50%;
  ????? : ?? 0.8S ?? ???;
  ?? ?? : 8px;
}

.loading-btn.loading .spinner {
  ????? : ??? ??;
}

.loading-btn.loading .btn-text {
  ???? : 0;
}

• ??? loading ???? ??? ???? ???? ???? ?????.
• ??? ??? ??? ? ? JavaScript? ???? ???? ?????.

? ???? ? ??? ?? ?? ?? ????? ??? ???? ???? ?????.

??? ?? ?

??? ???? ? ? ????????? ? ?? ?? ????.

• ??? ?? ?? : ??? ??? ?? ? ???? ?????.
• ?? ?????? : ???? ???? ??? ??? ????? ????.
• ???? ?????? : ??? ?? ARIA ??? ?????? ( aria-busy , role="status" ).
• ?? ??? : ??? ??? ?? ??? ??? ??? ?????? ?????.

????? ??? ?? ??? ??? ????? ??? ? ? ????.

????? CSS? ???? ???? ??? ???? ?????. ????? ??? ?? ??? ???? ??? ?????? ???? ???? ??? ??? ????.

? ??? ?? ??? ? ????? ????? CSS ????? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!