Bài tập javascript 17 - Viết hiệu ứng Loading bằng javascript phần 2

Ở bài tập javascript 17 này, chúng ta sẽ tiếp tục với hiệu ứng loading bằng javascript. Bài này chỉ sử dụng html và css là chính thôi. Phần javascript chúng ta chỉ cần gọi sự kiện onload để sau khi load nó sẽ bỏ đi cái hiệu ứng này . Okê mình sẽ làm một hiệu ứng đơn giản.

Kiến thức cần có:

Bài tập javascript 17- Viết hiệu ứng Viết hiệu ứng Loading bằng javascript phần 2

Mô tả bài tập: Mở trang web lên nó sẽ xuất hiện một cái vòng tròn quay quay, sau khi load được thì biến mất 😀

Demo:

Click vào bài tập js 17 để xem kết quả. Ở phần code javascript mình đã gọi sự kiện onload để sau khi load sẽ bỏ đi cái hiệu ứng này, nhưng mình chỉ để chú thích thôi. Vì chúng ta sẽ không thể thấy được vì file này rất nhẹ nên nó load nhanh lắm. Nên chúng ta sẽ không thấy được hiệu ứng.

Mình sẽ code và giải thích chi tiết ở ngay phía sau.

Code: html

<!doctype html>
<html>
<head>
<head>
<body>
    <div class="load"></div> 
</body>
</html>

<!doctype html>

<html>

<head>

<body>

</body>

</html>

Code: css

body{
		width: 100%;
		height: 100%;
		overflow: hidden;
		background: black;
	}

	.load{
		width: 40px;
		height: 50px;
		border: 2px solid #f3f3f3;
		border-top: 3px solid #f25a4100;
		border-radius: 100%;
		position: absolute;
		top:0;
		bottom:0;
		left:0;
		right: 0;
		margin: auto;
		animation: spin 1s infinite linear;
		display: none;
	}

	@keyframes spin {
		from{
			transform: rotate(0deg);
			}to{
				transform: rotate(360deg);
			}
		}

body{

width: 100%;

height: 100%;

overflow: hidden;

background: black;

}

.load{

width: 40px;

height: 50px;

border: 2px solid #f3f3f3;

border-top: 3px solid #f25a4100;

border-radius: 100%;

position: absolute;

top:0;

bottom:0;

left:0;

right: 0;

margin: auto;

animation: spin 1s infinite linear;

display: none;

}

@keyframes spin {

from{

transform: rotate(0deg);

}to{

transform: rotate(360deg);

}

Code: js

window.addEventListener("load",function(){
			var load = document.querySelector('.load');
			// load.style.display = 'none';

		})

window.addEventListener("load",function(){

var load = document.querySelector('.load');

// load.style.display = 'none';

})

Kết quả:

Giải thích:

Có gì để giải thích không ta 😀
Cái này thì chúng ta chỉ cần sử dụng animation của css để nó quay thôi, các bạn sử dụng thuộc tính quay là rotate() cho nó quay một góc 360 deg là nó cứ quay một vòng trái đất thôi :D.
Chắc là cũng hết cái để giải thích rồi nhỉ, mạng ai miền núi có thể bỏ cái chú thích ra để xem hiệu ứng kết thúc.
Không thì chúng ta sẽ giả lập network trên chrome cũng được, thiết lập 1kb/s.

Vậy là mình đã xử lý xong hiệu ứng Loading bằng javascript phần 2 rồi nhé. Mình sẽ trở lại với những hiệu ứng khác. Mình xin được kết thúc bài viết tại đây.

Xem bài viết tiếp theo tại đây.