imkopkap

สร้างปุ่ม Loading ฉบับ Front-end ด้วย CSS Animation

ใช้เวลา 20 นาที 30/06/2016

ถ้าพูดถึงปุ่ม Loading ทุกคนน่าจะรู้จักเป็นอย่างดี ในบทความนี้จะมาสอนเรื่อง การทำปุ่ม Loading ฉบับ Front-end ซึ่งในบทความนี้จะแนะแนวการเขียนโค้ดและวิธีการที่จะสร้างปุ่มนีขึ้นมาด้วย HTML CSS และ JS

 

ตัวอย่าง

 

1. ขั้นตอนการวางแผน

สิ่งที่จำเป็นต่อการเขียนโค้ดที่นำมาซึ่งความแข็งแกร่งทางการโค้ดดิ้ง คือ การวางแผน เราจะมาออกแบบกันว่าเจ้าตัวปุ่ม Loading ตัวนี้มีรากฐานการทำงานเป็นอย่างไร

 

1. ออกแบบตำแหน่งของปุ่ม Button

ภาพข้างล่างนี้จะเป็นการออกแบบ Flow การทำงานของ HTML และ CSS

 

pic1.2

 

โดยในโค้ดของ HTML จะมีอยู่หนึ่ง Tag ด้วยกันคือ class loading (.loading) ที่สร้างด้วย div ครอบเป็นกล่องเอาไว้ โดยเราจะทำเป็นปุ่ม Button เพื่อให้ User คลิกลงไป ฉะนั้นภายใน HTML ของเราจะได้เป็นโค้ดแบบนี้

<div class="loading">Submit</div>

ในส่วนของ CSS เราจะกำหนดสไตล์อยู่ 2 ส่วนคือ  body และ .loading

body {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.loading {
  width: 150px;
  height: 40px;
  border: 5px solid #2FCE9E;
  border-radius: 50px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%), rotate(0deg); 
 }

 

อธิบายโค้ด

body กำหนดเป็น relative เพื่อที่จะให้ปุ่ม .loading ของเราลอยอยู่ตรงกลางหน้าจอด้วยความสูงที่ 100vh (สูง 100% ทุกขนาดหน้าจอ) และกำหนด overflow ให้ hidden เพื่อบอกว่า ถ้ามีอะไรหลุดจากกรอบ body ไปให้มันซ่อน

 

.loading เราได้กำหนดความกว้าง 150px และสูง 40px จากนั้นกำหนด เส้นกรอบหนา 5px เป็นเส้นตรงมีสีเขียว (border) ส่วน border-radius จะเป็นการทำมุมจากเหลี่ยมให้เป็นมน

 

ปกติแล้วแกน x กับ แกน y ของเว็บจะอยู่ทางหัวมุมบนซ้ายทุก Tag ของ HTML เราก็กำหนดให้มันลอยกลางหน้าจอด้วย absolute ให้แกน y ขยับลงมา 50% และแกน x ขยับจากซ้ายมา 50%

 

pic2

 

ปัญหาตำแหน่งของ .loading

จากที่เรากำหนด absolute ไปนั้นพบว่าตำแหน่งของปุ่ม Button ยังไม่อยู่ตรงกลาง เราจะต้องหาจุดกึ่งกลางของ Button โดยจำเป็นต้องใช้ CSS ที่ชื่อว่า transform: translate(-50%, -50%) มันหมายความว่าให้ลบตัวเองด้านซ้าย 50% และด้านบน 50% ของความกว้างยาว Button

 

pic3

 

จากนั้นกำหนดให้ตัวอักษรที่อยู่ในปุ่ม Button อยู่ตรงกลางโดยเราจะกำหนดเป็น display: flex และใช้ justifycontent (กำหนดตัวอักษรแนวนอน)  และ align-items (กำหนดตัวอักษรแนวตั้ง) ให้อยู่ตรงกลางของ Button

display: flex;
justify-content: center;
align-items: center;

จากนั้นตกแต่งเพิ่มเติม

font-family: 'Montserrat', sans-serif;
color: #2FCE9E;
transition: all .5s;
margin: -20px -75px;

โดยเราจะกำหนดฟอนต์และสีตัวอักษร ใช้ transition (เคลื่อนไหวแบบ smooth) เมื่อคลิกลงปุ่มเสร็จแล้ว และใช้ margin กำหนดให้ Button อยู่ตรงกลาง เนื่องจากเราใช้ rotate(0deg) จึงทำให้ตำแหน่งมีการผิดเพี้ยน

 

เมื่อเมาส์ชี้ hover ให้เป็น Cursor

.loading ของเราเมื่อลองเอาเมาส์ชี้แล้วจะเป็นรูปเมาส์ปกติ เราจะทำให้เป็นรูปมือให้เหมือนว่า Button นี้สามารถคลิกได้ โดยกำหนด :hover แล้วใช้ CSS ที่ชื่อว่า cursor: pointer

.loading:hover {
  cursor: pointer;
}

pic4

 

2. เพิ่ม Class ด้วย Javascript

เราจะกำหนดว่า เมื่อเมาส์คลิกไปที่ .loading ให้มันเพิ่ม .is-loading ใน .loading เพื่อจะให้ปุ่ม Button หมุนเป็นวงกลมทำเป็นตัว loading

.loading.is-loading {
  transition: all .17s ease-out;
  font-size: 0;
  color: transparent;
  width: 40px;
  height: 40px;
  border: 5px solid #B9B9B9;
  border-top: 5px solid #2FCE9E;
  border-radius: 100%; 
  animation: rotate 1s infinite linear; 
  transform-origin:center center;
  margin: -20px;
}

.loading.finish {
 transition: all .2s;
 color: #fff;
 background-color: #2FCE9E;
}

อธิบายโค้ด

1. กำหนด color เป็นโปร่งใส เพื่อที่จะซ่อนคำตอน loading

2. เปลี่ยนขนาดความกว้างให้เป็น 40px

3. แล้วใช้ border กำหนดเส้นขอบหนา 5px เป็นสีเทาจะได้ดังรูปด้านล่าง

 

 

4. กำหนด border-top เป็นสีเขียว เพื่อที่จะทำเป็นเหมือนตัวหมุนๆ ในวงกลม

 

 
5. ใช้ border-radius: 50% เพื่อให้เป็นวงกลมจะได้ดังภาพด้านล่าง

 

 

6. เราใช้ CSS ที่ชื่อ animate เพื่อกำหนดให้ .loading.is-loading เป็น animation ให้มันหมุนอัตโนมัติ โดยเรากำหนด Keyframes ชื่อว่า rotate สามารถข้ามไปดูข้อ 3 ใหญ่ด้านล่างได้เลย

 

7. ในส่วนของ .isloading.finish จะเป็นการ reset CSS ของ .loading ใหักลับมาเหมือนเริ่มต้น (ลบ .is-loading ออก)

 

3. สร้าง Animation ให้ .loading

เราจะทำการสร้าง Keyframes เพื่อให้วงกลมหมุนอัตโนมัติ เมื่อ User คลิกเมาส์ไปที่ Button โดยเราจะกำหนด transform: rotate เพื่อให้มันหมุนจาก 0 ไป 360 องศา

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

 

4. มาเขียน JS กัน

var loading = document.getElementsByClassName('loading')[0];

loading.addEventListener('click', function(event) {
    loading.className += ' is-loading';
  
    setTimeout(function() {
      loading.className = 'loading finish';
      loading.innerHTML = 'Finish';
    }, 3000);
  
  setTimeout(function() {
    loading.className = 'loading';
  }, 4000);
  
  setTimeout(function() {
    loading.innerHTML = 'Submit';
  }, 4100);
});

 

อธิบายโค้ด

1. สร้างตัวแปร loading โดยให้ไปดึง .loading ใน HTML

2. กำหนด addEventListener เพื่อบอกว่า เมื่อ User ได้คลิกลงปุ่ม Button ให้มันทำใน function ข้างใน

3. เพิ่ม .is-loading ใน .loading ด้วย className ใน Javascirpt

loading.className += ' is-loading';

4. เราใช้ setTimeout เพื่อบอกว่า หลังจาก 3000ms (3วินาที) ให้เปลี่ยน .is-loading เหมือนเดิมโดยเพิ่ม .finish ลงใน .loading เพื่อให้มันเกิดการ fade ของ transition (ย้อนดู CSS ของ .finish)  และเปลี่ยนข้อความเป็น Finish

setTimeout(function() {
     loading.className = 'loading finish';
     loading.innerHTML = 'Finish';
}, 3000);

5. หลังจาก 4000ms (4วินาที) ให้รีเซตเป็นปกติ

setTimeout(function() {
    loading.className = 'loading';
}, 4000);

6. หลังจาก 4100ms (4.1วินาที) ให้เปลี่ยนข้อความเป็น Submit

setTimeout(function() {
    loading.innerHTML = 'Submit';
}, 4100);

บันทึกแนะนำ

  • Joke Pattanajareansuk

    .js นี้เขียนไวที่ไหนครับ ?