Paano gumawa: CSS loader

Matututunan kung paano gumawa ng preloader gamit ang CSS.

亲自试一试

Paano gumawa ng loader

Unang hakbang - Magdagdag ng HTML：

<div class="loader"></div>

Ikalawa na hakbang - Magdagdag ng CSS：

.loader {
  border: 16px solid #f3f3f3; /* Mapula */
  border-top: 16px solid #3498db; /* Asul */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

亲自试一试

Halimbawa:

border ang katangian ay nagtatalaga sa laki at kulay ng border ng loader.border-radius ang katangian ay magpalit sa loader bilang sirkular.

Ang bahaging asul na palapag sa loob ng border ay umiikot sa pamamagitan ng border-top ang mga katangian na nagtatalaga sa laki at kulay ng border ng loader. Kung gusto mong magkaroon ng mas maraming 'rotator', maaring idagdag din ang border-bottom,border-left at/o border-right（tingnan ang mga halimbawa sa ibaba）。

Ang laki ng loader ay dinadagdag sa pamamagitan ng width at height ang pagtatalaga ng mga katangian.

Sa wakas, idinagdag namin ang isang animation para ang bahaging asul na palapag ay umiikot ng walang hanggan sa 2 segundo na bilis ng animasyon.

Babala:para sa hindi sumusuporta animation at transform ng mga browser na may suporta sa -webkit- ang pangalan. I-click ang sample upang makita kung paano gagawin.

magdagdag ng mas maraming rotator

实例

.loader {
  border-top: 16px solid blue;
  border-bottom: 16px solid blue;
}

亲自试一试

实例

.loader {
  border-top: 16px solid blue;
  border-right: 16px solid green;
  border-bottom: 16px solid red;
}

亲自试一试

实例

.loader {
  border-top: 16px solid blue;
  border-right: 16px solid green;
  border-bottom: 16px solid red;
  border-left: 16px solid pink;
}

亲自试一试

另一个例子

如何将加载器放置在页面中间，并在加载完成时显示“页面内容”：

实例

亲自试一试