Loading animasi ini tidak untuk diterapkan pada blog karena hanya untuk pengetahuan dan pemusan diri terhadap hebatnya kombinasi CSS, Javascript, dan Jquery.
Kenapa kenny bilang tidak bisa diterapkan pada blog? Bukannya tidak bisa hanya saja kenny kurang paham dan agak malas untuk oprek template blog lagi.
Mungkin kalian bisa menerapkannya jika memang ingin dengan mencari sendiri tentunya.
Berikut Kode Loading Animasi Vertical
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Loader Vertical</title>
<style type="text/css">
* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
body { padding: 20px; background: #1a1a1a; color: #DDD; font-family: "Open Sans", sans-serif; font-size: 17px; font-weight: 400; }
.progress-container, .progress { border-radius: 5px; }
.progress-container { width: 82px; height: 450px; border: solid 1px #111; background: #151515; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); margin: 0 auto; position: relative; overflow: hidden;}
.done { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 2px darken(#11AF19, 10%);}
.progress { background: darken(#11AF19, 5%); }
.progress-overlay { display: none; }
.progress, .progress-overlay { position: absolute; }
.progress { width: 80px; background: #114BAF; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); z-index: 1; bottom: 0; text-align: center; color: #151515; text-shadow: 0 1px 0 rgba(255, 255, 255, .25); font-weight: bold; transition: background 250ms ease; }
@keyframes uploadarrow {
0% { bottom: 0%; border-bottom-color: rgba(255, 255, 255, 0); }
50% { border-bottom-color: rgba(255, 255, 255, .1); }
100% { bottom: 100%; border-bottom-color: rgba(255, 255, 255, 0); }
}
@-webkit-keyframes uploadarrow {
0% { bottom: 0%; border-bottom-color: rgba(255, 255, 255, 0); }
50% { border-bottom-color: rgba(255, 255, 255, .1); }
100% { bottom: 100%; border-bottom-color: rgba(255, 255, 255, 0); }
}
.progress-overlay { z-index: 2; width: 0; height: 100%; bottom: 0; left: 15px; border: solid 20px transparent; border-width: 0 25px 20px 25px; border-bottom-color: rgba(255, 255, 255, .25); -webkit-animation: uploadarrow 900ms infinite ease-out; -moz-animation: uploadarrow 900ms infinite linear; -o-animation: uploadarrow 900ms infinite linear; animation: uploadarrow 900ms infinite linear; }
</style>
</head>
<body>
<div class="progress-container" id="prog">
<div class="progress" style="height: 0%">0</div>
<div class="progress-overlay"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript">
// Demostration JS
(function ($) {
var
$cont = $('#prog'),
$bar = $cont.find('.progress'),
value = 0,
time = 35;
function reset() {
value = 0;
$cont.removeClass('done');
$bar.css('height', '0%').text('0');
setTimeout(increment, 500);
}
function increment() {
value += 1;
$bar.css('height', value + '%')
.text(value);
if (value === 100) {
$cont.addClass('done');
setTimeout(reset, 3000);
return;
}
setTimeout(increment, time);
}
reset();
}(this.jQuery));
</script>
</body>
</html>
Silahkan Copy dan jalankan pada browser anda.
Demo