หลักสูตรที่นำมาทำโหลดเครื่องยนต์

เรียนรู้วิธีการใช้ CSS ที่ทำโหลดเครื่องยนต์เข้าใจ

亲自试一试

หลักสูตรที่นำมาทำโหลดเครื่องยนต์

ขั้นที่หนึ่ง - เพิ่ม HTML:

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

ขั้นที่สอง - เพิ่ม CSS:

.loader {
  border: 16px solid #f3f3f3; /* สีเทาของแถบที่เล็กที่สุด */
  border-top: 16px solid #3498db; /* สีฟ้า */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

亲自试一试

ตัวอย่างการอธิบาย:

border รูปแบบที่กำหนดขนาดและสีของเส้นขอบโหลดเครื่องยนต์border-radius รูปแบบที่จะเปลี่ยนโหลดเครื่องยนต์เป็นทรงกลม

ส่วนที่สีสีฟ้าหมุนด้านในของเส้นขอบมีขนาดโดย border-top รูปแบบเพื่อที่จะสามารถใช้ "โหลดเครื่องยนต์" มากกว่า border-bottom、border-left และ/หรือ border-rightดูตัวอย่างด้านล่าง)

ขนาดของโหลดเครื่องยนต์ดังกล่าวมีขนาดโดย width และ height เพื่อกำหนดค่าของรูปแบบ

ในที่สุด เราได้เพิ่มการทำการออกแบบที่ทำให้ส่วนที่สีสีฟ้าหมุนเป็นเวลาทั้งหมดด้วยความเร็วการออกแบบ 2 วินาที

แจ้งเตือน:สำหรับตัวแปลที่ไม่สนับสนุน animation และ transform ของตัวแปลที่มีความสามารถเชื่อมโยงเข้ากับ -webkit- โปรดคลิกตัวอย่างเพื่อดูวิธีการปฏิบัติ

เพิ่มเครื่องหมายบอลหมุนเพิ่มเติม

实例

.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;
}

亲自试一试

另一个例子

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

实例

亲自试一试