 |
| Cara Membuat Loading Spinner || Ngoding-Nyantai |
Nah oleh karenanya banyak web developer yang mengembangkan dan mengkreasikan icon loading dengan berbagai macam kreasi. Seperti ada titik yang bersinar, atau ada yang bergerak memutar dan banyak lagi deh, dengan tujuan para visitor atau pengunjung website tidak bosan menunggu loadingnya.
Dan pada tulisan kali ini kita akan membahas tentang bagaimana cara membuat loading spinner dengan menggunakan HTML & CSS.
Perhatikan dan copy kode berikut ini :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Loading Spinner</title>
<style type="text/css">
.spinner {
border: 16px solid #28e2c6;
border-radius: 50%;
border-top: 16px solid #f5b00a;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
margin-top: 70px;
}
@keyframes spin{
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
h1 {
margin-top: 130px;
}
</style>
</head>
<body>
<center>
<h1>Cara Membuat Loading Spinner Dengan HTML & CSS</h1>
<div class="spinner"></div></center>
</body>
</html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Loading Spinner</title>
<style type="text/css">
.spinner {
border: 16px solid #28e2c6;
border-radius: 50%;
border-top: 16px solid #f5b00a;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
margin-top: 70px;
}
@keyframes spin{
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
h1 {
margin-top: 130px;
}
</style>
</head>
<body>
<center>
<h1>Cara Membuat Loading Spinner Dengan HTML & CSS</h1>
<div class="spinner"></div></center>
</body>
</html>
Nah setelah kamu copy silahkan pastekan di text editor kalian lalu simpan dengan ekstensi .html . Jika teman-teman ingin lebih detail silahkan lihat tutorial versi videonya :
No comments:
Post a Comment