Cara membuat bar animasi kemampuan atau skill menggunakan CSS + HTML
bagaimana cara membuat animasi bar skill menggunakan css dan html
by
muzadidil
Petunjuk Pengguna Windows
- Buat Folder Baru
- Buka aplikasi NOTEPAD ++
- Copy Paste File HTML dan dimpan menggunakan format HTML
- Copy Paste File CSS dan simpan dengan nama style.css
- Cek kembali kode yang kalian simpan pastikan sudah benar
- Buka Folder tempat kalian menyimpan file sebelumnya
- klik 2x pada file HTML-nya
- Preview akan di tampilkan, Jika terdapat yang tidak sesuai cek ulang kembali di File HTML atau CSS-nya
Petunjuk Pengguna ANDROID
- Buat Folder Baru
- Buka aplikasi anWriter
- Copy Paste File HTML dan dimpan menggunakan format HTML
- Copy Paste File CSS dan simpan dengan nama style.css
- Buka aplikasi anWriternya
- Buka file htmlnya di menu pojok kiri (burger button)
- kemdian tekan preview
- Preview akan di tampilkan, Jika terdapat yang tidak sesuai cek ulang kembali di File HTML atau CSS-nya
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Skills Bars</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="skills">
<div class="skill">
<div class="skill-name">HTML</div>
<div class="skill-bar">
<div class="skill-per" per="90%" style="max-width:90%"></div>
</div>
</div>
<div class="skill">
<div class="skill-name">CSS</div>
<div class="skill-bar">
<div class="skill-per" per="70%" style="max-width:70%"></div>
</div>
</div>
<div class="skill">
<div class="skill-name">Javascript</div>
<div class="skill-bar">
<div class="skill-per" per="60%" style="max-width:60%"></div>
</div>
</div>
</div>
</body>
</html>
Salin kode di bawah ini kemudian simpan dengan format CSS, Format penyimpanan harus sama yaitu style.css
CSS
*{
margin: 0;
padding: 0;
font-family: "Ubuntu", sans-serif;
box-sizing: border-box;
}
body{
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #111;
}
.skills{
width: 100%;
max-width: 600px;
padding: 0 20px;
}
.skill-name{
font-size: 18px;
font-weight: 700;
color: #f1f1f1;
text-transform: uppercase;
margin: 20px 0;
}
.skill-bar{
height: 14px;
background: #282828;
border-radius: 3px;
}
.skill-per{
height: 14px;
background: #d13639;
border-radius: 3px;
position: relative;
animation: fillBars 2.5s 1;
}
.skill-per::before{
content: attr(per);
position: absolute;
padding: 4px 6px;
background: #f1f1f1;
border-radius: 4px;
font-size: 12px;
top: -35px;
right: 0;
transform: translateX(50%);
}
.skill-per::after{
content: "";
position: absolute;
width: 10px;
height: 10px;
background: #f1f1f1;
top: -20px;
right: 0;
transform: translateX(50%) rotate(45deg);
border-radius: 2px;
}
@keyframes fillBars{
from{
width: 0;
}
to{
width: 100%;
}
}
Tags
muzadidil
Intovert, Cepat beradaptasi, simple, Fokus, Cenderung Lebih suka makan daripada Minum.
Komentar