<div class="demoContainer">
  <div class="projHeader">
    <div class="primaryText">Pagination UI</div>
    <div class="createdBy">Created By <a href="https://www.dropinks.com/pagination-ui-for-web-app/">Dropinks</a>/<a href="https://dribbble.com/shots/17066526-Pagination-UI-for-Web-App" target="_blank">Dribbble</a></div>
    <p class="message">For Better usability and interaction use web browsers - chrome, firefox</p>
  </div>



  <div class="paginationContainer" id="paginationContainer">
    <span class="pageInnerElm" id="pageInnerElm"></span>
    <ul class="paginationUl" id="paginationUl">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>

.demoContainer{position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); width: 400px;} 
.primaryText{
  font-weight: 300;
  font-size: 50px;
  text-shadow: 2px 2px 1px rgba(0,0,0,0.3);
}
.secondaryText{
  font-weight: 300;
  font-size: 25px;
}
.createdBy {
  font-weight: 300;
  font-size: 17px;
  margin-top: 10px;
}
.createdBy a{
  color: #333;
  font-weight: 500;
}
.message {
  background: rgba(255, 255, 255, 0.31);
  padding: 10px;
  display: inline-block;
  text-align: center;
  color: #000;
  margin: 25px 0;
  font-size: 13px;
  box-shadow: 2px 2px 0px 1px rgba(0,0,0,0.2);
  border-radius: 4px;
}
.projHeader{
  text-align: center;
}

body{background: #333; font-family: poppins;}
.projHeader, .createdBy a, .message{color: #fff;}
.message{background: rgba(255, 255, 255, 0.1);}


.paginationContainer{
  position: relative;
  display: flex;
  justify-content: center;
}
.paginationUl{
  list-style-type: none;
  margin: 0; 
  padding: 0;
}
.paginationUl li{
  box-sizing: border-box;
  border: 2px solid #fff;
  border-radius: 20px;
  float: left;
  width: 22px;
  height: 22px;
  margin: 0px 10px;
  cursor: pointer;
}
.pageInnerElm{
  content: "";
  position: absolute;
  left: 0px;
  top: 6px;
  width: auto;
  height: 10px;
  border-radius: 20px;
  background: #fd1874;
  display: none;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pageInnerElm.inProgress{
  transform: scaleY(0.4);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), right  0.3s ease 0.1s, left 0.3s ease 0.1s;
}

var paginationContainer = $("#paginationContainer");
var ul = $("#paginationUl");
var pageInnerElm = $("#pageInnerElm");
var ulLeft, ulRight;

function setActiveLi(elm){
  var activeElm = ul.find("li.activeLi");
  activeElm.removeClass("activeLi");
  elm.addClass("activeLi");
}
function setPageInnerElm(liIndex){
  var firstLi = $(ul.find("li")[liIndex]);
  setActiveLi(firstLi);
  var offset = {};
  offset.left = firstLi.offset().left-paginationContainerLeft+6;
  offset.right = window.innerWidth-firstLi.offset().left-paginationContainerLeft-16;

  return offset;
}
$(document).ready(function(){
  paginationContainerLeft = paginationContainer[0].getBoundingClientRect().left;
  paginationContainerRight = paginationContainer[0].getBoundingClientRect().right;
  var offset = setPageInnerElm(0);
  pageInnerElm.css({"display": "block", "left": offset.left+"px", "right": offset.right+"px"});
})

ul.on("click", function(ev){
  var activeElm = $(".activeLi");
  var activeElmIndex = activeElm.index();

  var targetElm = $(ev.target);
  if(targetElm[0].nodeName === "LI"){
    var targetElmIndex = targetElm.index();
    var offset = setPageInnerElm(targetElmIndex);

    pageInnerElm.addClass("inProgress");
    if(targetElmIndex>activeElmIndex){
      pageInnerElm.css({"right":offset.right+"px"});
      pageInnerElm.off('transitionend');
      pageInnerElm.on('transitionend', function() {	
        pageInnerElm.css({"left":offset.left+"px"});
        pageInnerElm.removeClass("inProgress");
      })
    }
    else{
      pageInnerElm.css({"left":offset.left+"px"});
      pageInnerElm.off('transitionend');
      pageInnerElm.on('transitionend', function() {	
        pageInnerElm.css({"right":offset.right+"px"});
        pageInnerElm.removeClass("inProgress");
      })
    }
  }
});