Morphing Pagination Indicator With jQuery And CSS3

A modern animated pagination control indicator that consists of a series of dots and rounded bars, written in jQuery and CSS/CSS3.

How to use it:

1. Add buttons to the pagination control.

<div class="button active"></div>
<div class="button"></div>
<div class="button"></div>
<div class="button"></div>
<!-- More Buttons Here -->

2. Style the pagination buttons.

.button {
  background-color: #fff;
  width: 20px;
  height: 20px;
  float: left;
  margin-right: 20px;
  border-radius: 20px;
  cursor: pointer;
  transition: 0.3s ease width;
}

.button:last-child {
  margin-right: 0;
}

.button.active {
  width: 60px;
  cursor: auto;
}

3. Load the latest jQuery library at the end of the document.

<script src="/path/to/cdn/jquery.slim.min.js"></script>

4. Morph the dots into rounded bars (which indicates the current page) when switching between content.

$(function () {
  var button = $(".button");
  function switchToNext() {
    var _this = $(this);
    if (_this.hasClass("active")) {
      return false;
    } else {
      $(".button.active").removeClass("active");
      _this.addClass("active");
    }
  }
  button.on("click", switchToNext);
});

---

This awesome jQuery plugin is developed by blank-yt. For more Advanced Usages, please check the demo page or visit the official website.