Hướng dẫn tạo hiệu ứng progress bar cho Blog

Trước khi đi vào bài mình giới thiệu qua cái tên, lúc đầu mình tính đặt tên Hướng dẫn tạo thanh tiến trình cho Blog nhưng suy nghĩ lại chưa chắc nhiều bạn đã biết thanh tiến trình nó là cái gì cho nên ghi là progress bar chắc sẽ nhiều người biết hơn.

Hiểu theo cách đơn giản thì progress bar là một đoạn có màu sắc chạy ngang trên đầu giao diện Blog. Ở đây có 2 loại đó là progress bar xuất hiện khi tải trang và khi scroll kéo thanh cuộn xuống.

Với hiệu ứng progress bar khi tải trang sử dụng css kết hợp jquery

Copy


<style type='text/css'>

#progress {

  position:fixed;

  z-index:101;

  top:0;

  left:-6px;

  width:1%;

  height:3px;

  background:#448aff;

  -moz-border-radius:1px;

  -webkit-border-radius:1px;

  border-radius:1px;

  -moz-transition:width 500ms ease-out,opacity 400ms linear;

  -ms-transition:width 500ms ease-out,opacity 400ms linear;

  -o-transition:width 500ms ease-out,opacity 400ms linear;

  -webkit-transition:width 500ms ease-out,opacity 400ms linear;

  transition:width 500ms ease-out,opacity 400ms linear;

}

#progress dt {

  opacity:.6;

  width:180px;

  right:-80px;

  clip:rect(-6px,90px,14px,-6px);

}

#progress dd {

  opacity:.6;

  width:20px;

  right:0;

  clip:rect(-6px,22px,14px,10px);

}

</style>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

<script>//<![CDATA[

$(function() {

  $('body').append($('<div><dt/><dd/></div>').attr('id', 'progress'))

  $('#progress').width(100 + '%')

  $('#progress').width('101%').delay(800).fadeOut(400, function() {

    $(this).remove()

  })

})

//]]></script>

Nếu muốn sử dụng hiệu ứng khi cuộn trang chỉ sử dụng jquery:

Copy


<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

<script>//<![CDATA[

$(function() {

  $.fn.prognroll = function(options) {

    var settings = $.extend({

      height: 3,

      color: "#448aff",

      custom: false

    }, options)

    return this.each(function() {

      if ($(this).data('prognroll')) {

        return false

      }

      $(this).data('prognroll', true)

      var $span = $("<span>", {

        class: "bar"

      })

      $("body").prepend($span);

      $span.css({

        position: "fixed",

        top: 0,

        left: 0,

        width: 0,

        height: settings.height,

        backgroundColor: settings.color,

        zindex: 200

      })

      if (settings.custom === false) {

        $(window).scroll(function(e) {

          e.preventDefault()

          var windowScrollTop = $(window).scrollTop()

          var windowHeight = $(window).outerHeight()

          var bodyHeight = $(document).height()

          var total = (windowScrollTop / (bodyHeight - windowHeight)) * 100

          $(".bar").css("width", total + "%")

        })

      } else {

        $(this).scroll(function(e) {

          e.preventDefault();

          var customScrollTop = $(this).scrollTop()

          var customHeight = $(this).outerHeight()

          var customScrollHeight = $(this).prop("scrollHeight")

          var total = (customScrollTop / (customScrollHeight - customHeight)) * 100

          $(".bar").css("width", total + "%")

        })

      }

      $(window).on('hashchange', function(e) {

        e.preventDefault()

        console.log($(window).scrollTop())

      });

      $(window).trigger('hashchange')

      var windowScrollTop = $(window).scrollTop()

      var windowHeight = $(window).outerHeight()

      var bodyHeight = $("body").outerHeight()

      var total = (windowScrollTop / (bodyHeight - windowHeight)) * 100

      $(".bar").css("width", total + "%")

    })

  }

  $('body').prognroll()

})

//]]></script>