Morphing Pagination Indicator With jQuery And CSS3
File Size: | 2.51 KB |
---|---|
Views Total: | 444 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.