massPaging / Progress Bar

Progress Bar

This is not a standard type of pagination. With it is possible to estimate the percentage of readed pages.

Not supported browsers: IE8 and below

Very Long Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor purus vel vulputate ornare. Integer imperdiet tincidunt tortor, at fringilla nisl egestas pretium. Integer blandit dignissim felis. Nulla nec tellus risus. Suspendisse cursus ex vel mi varius sollicitudin. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam aliquet nunc vitae ultrices molestie. Morbi elementum libero dictum, congue arcu quis, auctor lectus. Aenean lobortis porttitor tristique. Fusce sed risus tempor augue consectetur consequat. Integer sem ex, hendrerit ac laoreet sed, volutpat dignissim libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc nec tellus lectus. Aliquam semper, ipsum sagittis gravida feugiat, ipsum arcu imperdiet dolor, eget convallis dolor erat at libero. Donec mattis nibh risus, sit amet sollicitudin nisi ultrices ut. Etiam elementum vehicula mi, ac faucibus lorem euismod vel. Curabitur maximus pharetra diam sed fermentum. Nullam tempor scelerisque scelerisque. Nullam blandit facilisis ante, ut vehicula odio pharetra at. Proin molestie mauris orci, ac auctor tortor molestie in. Ut semper tincidunt sem a tristique. Sed at consequat lorem. Etiam sed accumsan nunc, sit amet mollis ante. Suspendisse id interdum turpis. Quisque venenatis, est et viverra molestie, risus massa maximus ex, nec lacinia quam magna id felis. Phasellus eget odio a metus ultricies auctor eu sed felis. Morbi venenatis molestie nibh vitae lacinia. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vel elit metus. Nullam vitae ornare leo. Nunc lobortis sem dictum varius congue. Aliquam non augue dictum, fringilla risus et, tempus elit. Vestibulum auctor justo vitae pellentesque posuere. Etiam fermentum posuere lacus, ac convallis libero vestibulum vitae. Nam arcu velit, viverra auctor fringilla sed, tempor eu nisi. Curabitur quis ligula pulvinar nisi ornare blandit. In hendrerit interdum diam sit amet tincidunt. Morbi porttitor ultricies urna ut mattis. Donec ut tortor sit amet nunc facilisis blandit vel pellentesque elit. Sed in magna odio. Sed eleifend elementum auctor. Quisque pulvinar nunc nisl, nec congue mi suscipit sed. Nunc facilisis congue lacus, nec fermentum eros dignissim nec. Nulla ullamcorper, mauris quis cursus lobortis, magna nulla scelerisque sapien, quis varius quam lorem sed nulla. Nulla justo nunc, sodales vehicula facilisis porta, euismod at nulla. Suspendisse potenti. Donec porttitor urna a imperdiet elementum. Donec finibus nisl eu nunc lobortis, sed convallis orci mattis. Nunc imperdiet risus at lorem pulvinar lacinia. Suspendisse pretium neque velit, a pretium nulla dapibus vel. Mauris vehicula, risus ac elementum luctus, velit metus imperdiet nulla, non vulputate dolor orci et ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec non molestie neque. Sed cursus tortor mi, vel luctus est dapibus vel. Morbi mattis ante in condimentum feugiat. Praesent ultrices id nisi eget lobortis. Suspendisse potenti. Phasellus viverra semper consectetur. Sed rutrum mi justo, eu scelerisque odio iaculis laoreet. Maecenas posuere imperdiet pulvinar. Proin feugiat sem in velit ullamcorper, eu maximus tellus porttitor. Etiam at est vitae lacus hendrerit suscipit in in libero. Nam blandit felis eu fringilla elementum. Nulla imperdiet at augue vitae consequat. Vivamus lacinia fermentum lectus in tincidunt. Morbi dictum enim a ligula pretium, a pretium tortor faucibus. Mauris malesuada urna quis tempus euismod. In a enim eget massa tincidunt auctor in eu magna. Maecenas suscipit, erat quis mollis suscipit, ipsum tortor dictum metus, non sodales nibh sem nec massa. Phasellus tellus velit, finibus non suscipit nec, sodales nec purus. Morbi id sodales lectus. Etiam a libero ut nulla dictum hendrerit a quis eros. Nunc dolor enim, bibendum sed sollicitudin a, condimentum in purus. Vivamus tincidunt quis purus pellentesque ullamcorper. Donec accumsan non risus vel vulputate. Proin tincidunt, orci sed faucibus rhoncus, tellus purus pellentesque metus, sed mattis nibh nulla ut mi. Curabitur venenatis dui quam, in elementum neque venenatis nec. Maecenas ligula metus, viverra at egestas egestas, suscipit et quam. Cras iaculis nunc ut fermentum volutpat. Sed nec nisi dapibus, volutpat augue nec, facilisis orci. Duis consequat turpis diam, at suscipit nibh ornare sed. Nullam molestie enim et eros sodales tristique. Pellentesque at sapien eu ipsum pharetra mattis. Integer fringilla mattis nisi. Nullam ut diam ut turpis aliquet sollicitudin et iaculis lectus. In tristique tristique dolor eget venenatis. Phasellus ut augue porta, ornare neque quis, ultrices dui. Duis non felis nec magna egestas maximus nec id justo. Maecenas nunc sapien, laoreet sit amet ultricies non, pretium eget libero. Nunc posuere massa vitae felis egestas, vitae placerat dolor euismod. Praesent consequat leo ipsum. Phasellus at tortor vitae turpis cursus porta. Vivamus fermentum malesuada leo ut finibus. Nam vel pellentesque risus, ultricies rutrum neque. Curabitur lobortis leo nec urna ultricies venenatis. Pellentesque risus urna, convallis et tellus sed, mollis venenatis turpis. Mauris commodo nec magna et posuere. Vestibulum porttitor mattis urna. Integer dictum sem ante, ac vestibulum massa sodales scelerisque. Etiam ullamcorper pharetra mauris, quis mollis sem blandit id. Vestibulum non pellentesque tortor. Etiam orci sem, sagittis in sagittis quis, fringilla id felis. Pellentesque venenatis, ante at elementum semper, leo dui efficitur ex, non molestie mi massa nec tortor. Quisque quis nisi a eros auctor viverra vel eget libero. Vivamus eu erat mi. Donec ullamcorper vulputate eros vitae ornare. Fusce ex elit, ultrices id placerat quis, consequat congue ipsum. Integer egestas eros eget turpis porttitor, at vehicula metus sagittis. Aliquam ut elementum nisi, eu luctus libero. Proin id libero non leo molestie molestie. Donec porttitor sodales orci tincidunt tincidunt. Cras commodo rhoncus sem ut varius. Vestibulum a bibendum magna, a faucibus arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla eu bibendum purus, tristique rhoncus lorem. Sed gravida justo et sapien ornare rhoncus. Aenean et ornare quam. Nunc ultricies est quis ipsum tristique, vel maximus massa gravida. Pellentesque ac erat sed libero accumsan dignissim eu non elit. Morbi condimentum dui a mi aliquam, sit amet ultrices felis faucibus. Suspendisse finibus fringilla arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc elementum odio et pellentesque egestas. Vestibulum id faucibus dui, a placerat turpis. Maecenas dictum, justo a tristique fringilla, sem quam convallis lectus, vel scelerisque dolor mi vel mi. Maecenas gravida mauris at cursus molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam efficitur purus et velit rhoncus tincidunt. Pellentesque elementum porta nulla, id sagittis nisi vulputate vitae. Etiam laoreet eu ex et semper. Duis sit amet sodales augue, vitae ullamcorper enim. Nam est orci, mattis ut nisl pellentesque, euismod ullamcorper tortor. Aenean nec tincidunt dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent vel lorem erat. Mauris imperdiet, tellus vitae auctor laoreet, nulla libero mattis metus, aliquet venenatis lacus quam eget quam. Vivamus in ipsum elit. Nunc quis euismod ex. Quisque lobortis feugiat nulla, eu consequat felis mollis id. Nullam in venenatis velit. Quisque dolor elit, feugiat non sollicitudin ut, convallis porttitor odio. Vivamus luctus tempus neque sit amet pulvinar. Vestibulum risus risus, sollicitudin et vehicula et, faucibus ac elit. Vestibulum vitae ligula porta, venenatis dui quis, facilisis sem. Vestibulum cursus nulla a eros tincidunt tempus. Nunc maximus turpis eget hendrerit faucibus. Ut eget aliquet dui, at sollicitudin lectus. Nam tincidunt tortor eu mattis pretium. Donec mattis luctus fermentum. Nam dictum faucibus finibus. Vivamus quis nunc ut ex convallis scelerisque. Proin rhoncus magna arcu, sed elementum elit volutpat eu. Morbi molestie eros sed tellus lacinia vehicula. Nulla sagittis sem eget ligula placerat egestas. Donec quis imperdiet massa, at lacinia enim. Pellentesque consectetur cursus sapien vitae tincidunt. Praesent at justo in risus blandit interdum. Donec ullamcorper tellus vel ligula lacinia dictum. Integer venenatis, odio sodales dictum dictum, arcu risus sagittis nibh, ac tincidunt nulla dui et ante. Praesent sit amet neque mollis, congue augue sit amet, tincidunt ante. Integer consequat facilisis vehicula. Aliquam erat volutpat. Nullam fringilla ultricies eleifend. Cras tincidunt finibus nisl id aliquam. Nullam eu vulputate nisi, ac tristique augue.

Very Long Text with the plugin «massPaging»

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor purus vel vulputate ornare. Integer imperdiet tincidunt tortor, at fringilla nisl egestas pretium. Integer blandit dignissim felis. Nulla nec tellus risus. Suspendisse cursus ex vel mi varius sollicitudin. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam aliquet nunc vitae ultrices molestie. Morbi elementum libero dictum, congue arcu quis, auctor lectus. Aenean lobortis porttitor tristique. Fusce sed risus tempor augue consectetur consequat. Integer sem ex, hendrerit ac laoreet sed, volutpat dignissim libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc nec tellus lectus. Aliquam semper, ipsum sagittis gravida feugiat, ipsum arcu imperdiet dolor, eget convallis dolor erat at libero. Donec mattis nibh risus, sit amet sollicitudin nisi ultrices ut. Etiam elementum vehicula mi, ac faucibus lorem euismod vel. Curabitur maximus pharetra diam sed fermentum. Nullam tempor scelerisque scelerisque. Nullam blandit facilisis ante, ut vehicula odio pharetra at. Proin molestie mauris orci, ac auctor tortor molestie in. Ut semper tincidunt sem a tristique. Sed at consequat lorem. Etiam sed accumsan nunc, sit amet mollis ante. Suspendisse id interdum turpis. Quisque venenatis, est et viverra molestie, risus massa maximus ex, nec lacinia quam magna id felis. Phasellus eget odio a metus ultricies auctor eu sed felis. Morbi venenatis molestie nibh vitae lacinia. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer vel elit metus. Nullam vitae ornare leo. Nunc lobortis sem dictum varius congue. Aliquam non augue dictum, fringilla risus et, tempus elit. Vestibulum auctor justo vitae pellentesque posuere. Etiam fermentum posuere lacus, ac convallis libero vestibulum vitae. Nam arcu velit, viverra auctor fringilla sed, tempor eu nisi. Curabitur quis ligula pulvinar nisi ornare blandit. In hendrerit interdum diam sit amet tincidunt. Morbi porttitor ultricies urna ut mattis. Donec ut tortor sit amet nunc facilisis blandit vel pellentesque elit. Sed in magna odio. Sed eleifend elementum auctor. Quisque pulvinar nunc nisl, nec congue mi suscipit sed. Nunc facilisis congue lacus, nec fermentum eros dignissim nec. Nulla ullamcorper, mauris quis cursus lobortis, magna nulla scelerisque sapien, quis varius quam lorem sed nulla. Nulla justo nunc, sodales vehicula facilisis porta, euismod at nulla. Suspendisse potenti. Donec porttitor urna a imperdiet elementum. Donec finibus nisl eu nunc lobortis, sed convallis orci mattis. Nunc imperdiet risus at lorem pulvinar lacinia. Suspendisse pretium neque velit, a pretium nulla dapibus vel. Mauris vehicula, risus ac elementum luctus, velit metus imperdiet nulla, non vulputate dolor orci et ligula. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec non molestie neque. Sed cursus tortor mi, vel luctus est dapibus vel. Morbi mattis ante in condimentum feugiat. Praesent ultrices id nisi eget lobortis. Suspendisse potenti. Phasellus viverra semper consectetur. Sed rutrum mi justo, eu scelerisque odio iaculis laoreet. Maecenas posuere imperdiet pulvinar. Proin feugiat sem in velit ullamcorper, eu maximus tellus porttitor. Etiam at est vitae lacus hendrerit suscipit in in libero. Nam blandit felis eu fringilla elementum. Nulla imperdiet at augue vitae consequat. Vivamus lacinia fermentum lectus in tincidunt. Morbi dictum enim a ligula pretium, a pretium tortor faucibus. Mauris malesuada urna quis tempus euismod. In a enim eget massa tincidunt auctor in eu magna. Maecenas suscipit, erat quis mollis suscipit, ipsum tortor dictum metus, non sodales nibh sem nec massa. Phasellus tellus velit, finibus non suscipit nec, sodales nec purus. Morbi id sodales lectus. Etiam a libero ut nulla dictum hendrerit a quis eros. Nunc dolor enim, bibendum sed sollicitudin a, condimentum in purus. Vivamus tincidunt quis purus pellentesque ullamcorper. Donec accumsan non risus vel vulputate. Proin tincidunt, orci sed faucibus rhoncus, tellus purus pellentesque metus, sed mattis nibh nulla ut mi. Curabitur venenatis dui quam, in elementum neque venenatis nec. Maecenas ligula metus, viverra at egestas egestas, suscipit et quam. Cras iaculis nunc ut fermentum volutpat. Sed nec nisi dapibus, volutpat augue nec, facilisis orci. Duis consequat turpis diam, at suscipit nibh ornare sed. Nullam molestie enim et eros sodales tristique. Pellentesque at sapien eu ipsum pharetra mattis. Integer fringilla mattis nisi. Nullam ut diam ut turpis aliquet sollicitudin et iaculis lectus. In tristique tristique dolor eget venenatis. Phasellus ut augue porta, ornare neque quis, ultrices dui. Duis non felis nec magna egestas maximus nec id justo. Maecenas nunc sapien, laoreet sit amet ultricies non, pretium eget libero. Nunc posuere massa vitae felis egestas, vitae placerat dolor euismod. Praesent consequat leo ipsum. Phasellus at tortor vitae turpis cursus porta. Vivamus fermentum malesuada leo ut finibus. Nam vel pellentesque risus, ultricies rutrum neque. Curabitur lobortis leo nec urna ultricies venenatis. Pellentesque risus urna, convallis et tellus sed, mollis venenatis turpis. Mauris commodo nec magna et posuere. Vestibulum porttitor mattis urna. Integer dictum sem ante, ac vestibulum massa sodales scelerisque. Etiam ullamcorper pharetra mauris, quis mollis sem blandit id. Vestibulum non pellentesque tortor. Etiam orci sem, sagittis in sagittis quis, fringilla id felis. Pellentesque venenatis, ante at elementum semper, leo dui efficitur ex, non molestie mi massa nec tortor. Quisque quis nisi a eros auctor viverra vel eget libero. Vivamus eu erat mi. Donec ullamcorper vulputate eros vitae ornare. Fusce ex elit, ultrices id placerat quis, consequat congue ipsum. Integer egestas eros eget turpis porttitor, at vehicula metus sagittis. Aliquam ut elementum nisi, eu luctus libero. Proin id libero non leo molestie molestie. Donec porttitor sodales orci tincidunt tincidunt. Cras commodo rhoncus sem ut varius. Vestibulum a bibendum magna, a faucibus arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla eu bibendum purus, tristique rhoncus lorem. Sed gravida justo et sapien ornare rhoncus. Aenean et ornare quam. Nunc ultricies est quis ipsum tristique, vel maximus massa gravida. Pellentesque ac erat sed libero accumsan dignissim eu non elit. Morbi condimentum dui a mi aliquam, sit amet ultrices felis faucibus. Suspendisse finibus fringilla arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc elementum odio et pellentesque egestas. Vestibulum id faucibus dui, a placerat turpis. Maecenas dictum, justo a tristique fringilla, sem quam convallis lectus, vel scelerisque dolor mi vel mi. Maecenas gravida mauris at cursus molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam efficitur purus et velit rhoncus tincidunt. Pellentesque elementum porta nulla, id sagittis nisi vulputate vitae. Etiam laoreet eu ex et semper. Duis sit amet sodales augue, vitae ullamcorper enim. Nam est orci, mattis ut nisl pellentesque, euismod ullamcorper tortor. Aenean nec tincidunt dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent vel lorem erat. Mauris imperdiet, tellus vitae auctor laoreet, nulla libero mattis metus, aliquet venenatis lacus quam eget quam. Vivamus in ipsum elit. Nunc quis euismod ex. Quisque lobortis feugiat nulla, eu consequat felis mollis id. Nullam in venenatis velit. Quisque dolor elit, feugiat non sollicitudin ut, convallis porttitor odio. Vivamus luctus tempus neque sit amet pulvinar. Vestibulum risus risus, sollicitudin et vehicula et, faucibus ac elit. Vestibulum vitae ligula porta, venenatis dui quis, facilisis sem. Vestibulum cursus nulla a eros tincidunt tempus. Nunc maximus turpis eget hendrerit faucibus. Ut eget aliquet dui, at sollicitudin lectus. Nam tincidunt tortor eu mattis pretium. Donec mattis luctus fermentum. Nam dictum faucibus finibus. Vivamus quis nunc ut ex convallis scelerisque. Proin rhoncus magna arcu, sed elementum elit volutpat eu. Morbi molestie eros sed tellus lacinia vehicula. Nulla sagittis sem eget ligula placerat egestas. Donec quis imperdiet massa, at lacinia enim. Pellentesque consectetur cursus sapien vitae tincidunt. Praesent at justo in risus blandit interdum. Donec ullamcorper tellus vel ligula lacinia dictum. Integer venenatis, odio sodales dictum dictum, arcu risus sagittis nibh, ac tincidunt nulla dui et ante. Praesent sit amet neque mollis, congue augue sit amet, tincidunt ante. Integer consequat facilisis vehicula. Aliquam erat volutpat. Nullam fringilla ultricies eleifend. Cras tincidunt finibus nisl id aliquam. Nullam eu vulputate nisi, ac tristique augue.

Source

<link rel="stylesheet" href="css/massPaging.css">
<script src="js/jquery-3.7.1.min.js"></script>
<script src="js/jquery.masspaging.js"></script>
<script>
$(window).on('load',function(){
	var opt = {
		pageHeight:300,
		navProgressWrapper:'.boxNavProgress'
	}
	$('#veryLongContent').massPaging(opt);
})
</script>

<div id="veryLongContent">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor...
</div>

<div class="boxNavProgress" style="width:50%; margin:auto;"></div>