Trang chủHiệu ứng Load trang đẹp giống Youtube với CSS3
Thông thường khi các bạn lướt trên Youtube thì nó có hiệu ứng load trang bằng một thanh ngang nhỏ trông rất đẹp, vậy làm thế nào để có được thanh load như vậy, bài viết sau mình sẽ hướng dẫn các bạn cách làm thanh load trang giống youtube, cũng rất dễ thôi, copy paste vào vài cái là xong ngay ấy mà
demo: http://nhanhnao.xyz /example/progress- bar/index.html
Làm như thế nào: Các bạn chỉ cần cho đoạn code sau vào phần đầu trang của Wapsite (header):
Ở đoạn code trên các bạn có thể thay đổi mã màu hoặc style theo cách của bạn nhé
Chúc các bạn thành công!
Nguồn: Thạch - Diễn đàn NhanhNao.Xyz
progress-bar.css (1.21KB)
nprogress.js (7.22KB)
jquery.js (82.34KB)
demo: http://nhanhnao.xyz /example/progress- bar/index.html
Làm như thế nào: Các bạn chỉ cần cho đoạn code sau vào phần đầu trang của Wapsite (header):
<link rel="stylesheet" href="
http://nhanhnao.xyz/theme/default/progress-bar.css">
<script type="text/javascript" src=" http://nhanhnao.xyz/cdn/jquery.js"></script>
<script type="text/javascript" src=" http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script src=" http://nhanhnao.xyz/cdn/nprogress.js"></script>
<script>
$(document).ready(function() {
NProgress.start();
$('#nprogress .bar').css({'background': '#2196F3'});
$('#nprogress .bar').css({'border': '0px solid #009688'});
$('#nprogress .peg').css({'box-shadow': '0 0 10px #2196F3, 0 0 5px #2196F3'});
$('#nprogress .spinner-icon').css({'border-top-color': '#2196F3', 'border-left-color': '#2196F3'});
NProgress.done();
});
</script>
<script type="text/javascript" src=" http://nhanhnao.xyz/cdn/jquery.js"></script>
<script type="text/javascript" src=" http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script src=" http://nhanhnao.xyz/cdn/nprogress.js"></script>
<script>
$(document).ready(function() {
NProgress.start();
$('#nprogress .bar').css({'background': '#2196F3'});
$('#nprogress .bar').css({'border': '0px solid #009688'});
$('#nprogress .peg').css({'box-shadow': '0 0 10px #2196F3, 0 0 5px #2196F3'});
$('#nprogress .spinner-icon').css({'border-top-color': '#2196F3', 'border-left-color': '#2196F3'});
NProgress.done();
});
</script>
Ở đoạn code trên các bạn có thể thay đổi mã màu hoặc style theo cách của bạn nhé
Chúc các bạn thành công!
Nguồn: Thạch - Diễn đàn NhanhNao.Xyz
progress-bar.css (1.21KB)
nprogress.js (7.22KB)
jquery.js (82.34KB)