artikel Design Development tips Web

Membuat Animasi Loading Bar | Html, Css, Js

Oke temen-temen, pada kesempatan kali ini, kita akan belajar bersama untuk bagai mana cara membuat sebuah Animasi Loading Bar yang keren.

sudah banyak template yang lagi ngetrend sekarang ini, mulai membuat efek loading yang beragam dan berbagai bentuk. bentuknya pun sangat keren-keren ya teman-teman. dulu gambar animasi loading di buat dengan gambar yang berekstensi gif. dan gambar nya hanya tinggal di letakkan pada bagian website yang ingin di munculkan animasi loading. tetapi seiring berkembangnya dunia development, atas perpaduan dari css dan js kini telah mampu membuat animasi loading yang sanga keren.

Membuat Animasi Loading Bar | Html, Css, Js

Langsung saja kita masuk ke cara membuat animasi loading bar dengan menggunakan html, css dan js. tutorial loading animasi dengan css ini saya kutip dari sini. teman-teman bisa mempelajari nya lebih lanjut. di sini saya hanya mencoba mereview sekaligus menjelaskan tentang fungsi-fungsi dasarnya untuk menciptakan efek loading dengan css juga js yang keren.

Oke langsung saja. siapkan sebuah file php atau html terserah teman-teman.

file html.
πŸ‘‡πŸ‘‡πŸ‘‡

<div id="container">
<input type="checkbox" id="water"/>
<label for="water">
<div id="fill"></div>
</label>
<span>Progress</span>
<span id="progress">0%</span>
</div>

file css.
πŸ‘‡πŸ‘‡πŸ‘‡

@keyframes grow {
from {
width: 0%
}
to {
width: 100%;
}
}
html, body {
margin: 0;
height: 100%;
width: 100%;
}
body {
background: #26323D;
background-image: radial-gradient(transparent 65%, rgba(black, 0.3));
font-family: sans-serif;
}
#container {
position: relative;
width: 50vw;
top: 50%;
left: 50%;
transform: translate3d(-50%, -50%, 0);
}
input {
display: none;
}
label {
position: relative;
display: block;
width: 100%;
height: 40px;
background: transparent;
border-radius: 0.4rem;
border: 2px solid white;
overflow: hidden;
box-shadow: -2px 0 8px 0 rgba(white, 0.6);
div {
position: absolute;
top: 0;
left: 0;
background: linear-gradient(to bottom, #A3E2EF 35%, #4F9CC0);
height: 100%;
width: 0%;
animation: grow 2s forwards;
box-shadow: 0 0 8px 1px white inset;
&:before {
content: '';
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/172299/bubbles-mask.gif);
mix-blend-mode: overlay;
opacity: 0.5;
}
}
}
span {
display: inline-block;
color: #4F9CC0;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 1.5px;
margin-top: 0.7rem;
&:last-child {
float: right;
}
}

 

File .Js
πŸ‘‡πŸ‘‡πŸ‘‡

window.onload = function(){
var elm = document.querySelector('#progress');
setInterval(function(){
if(!elm.innerHTML.match(/100%/gi)){
elm.innerHTML = (parseInt(elm.innerHTML) + 1) + '%';
} else {
clearInterval();
}
}, 18)
}

 

dan jalankan pada Browser:

 

gimana temen-temen, cukup membantu kan !!!
jadi kita tak perlu repot-repot banyak menuliskan sebuah Code, namun dengan adanya Syntax Emmet ini kita bisa menulis codingan kita dengan cepat.

Ikuti Tips seputar Starup dan teknologi pada aku instagramΒ @harris.bahrudin

dan bagi anda seorang perintis Starup dan Pembisnis silahkan untuk ikuti kami diΒ @harisbahrudin.com,Β Β disana kami akan memberikan FREE Konsultasi untuk pengembangan bisnis dan starup anda.

 

Author

Admin

Leave a comment

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *