Pagination indicators

Developer
Moses Holmström
Size
3,263 Kb
Views
44,528
  1. Pagination indicators Previews
  2. Pagination indicators HTML Codes
  3. Pagination indicators CSS Codes
  4. Pagination indicators JS Codes

How do I make an pagination indicators?

What is a pagination indicators? How do you make a pagination indicators? This script and codes were developed by Moses Holmström on 21 August 2022, Sunday.

Pagination indicators Previews
IQ Test

Pagination indicators - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>pagination indicators</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="pindicator"> <div class="bullet past"> <span class="icon">1</span> <div class="text">Step 1</div> </div> <div class="bullet current"> <span class="icon">2</span> <div class="text">Step 2</div> </div> <div class="bullet next future"> <span class="icon">3</span> <div class="text">Step 3</div> </div> <div class="bullet future"> <span class="icon">4</span> <div class="text">Step 4</div> </div> <div class="bullet future"> <span class="icon">5</span> <div class="text">Step 5</div> </div> <div class="bullet future"> <span class="icon">6</span> <div class="text">Step 6</div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Pagination indicators - Script Codes CSS Codes

.pindicator { background-color: white; display: -webkit-box; display: -ms-flexbox; display: flex; margin: 2rem auto 0; width: 30rem;
}
.pindicator .bullet { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; position: relative; text-align: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d;
}
.pindicator .bullet::before,
.pindicator .bullet::after { content: ''; display: block; position: absolute; height: .5rem; top: 1.25rem; -webkit-transform: translate3d(0, 0, -1px); transform: translate3d(0, 0, -1px);
}
.pindicator .bullet::before { background-color: lightgray; width: 100%;
}
.pindicator .bullet::after { background-color: black; -webkit-transition: opacity .25s ease-out; transition: opacity .25s ease-out; opacity: 0; width: 100%;
}
.pindicator .bullet:first-child::before,
.pindicator .bullet:first-child::after { left: 50%; width: 50%;
}
.pindicator .bullet:last-child::before,
.pindicator .bullet:last-child::after { width: 50%;
}
.pindicator .icon { background-color: lightgray; border-radius: 100%; color: transparent; cursor: pointer; font-size: 1.5rem; display: inline-block; height: 2em; line-height: 2; text-align: center; -webkit-transition: background-color .25s ease-out; transition: background-color .25s ease-out; width: 2em;
}
.pindicator .text { color: lightgray; font-size: .75rem; margin-top: 1rem; text-transform: uppercase; -webkit-transition: background-color .25s ease-out; transition: background-color .25s ease-out;
}
.pindicator .past .icon,
.pindicator .current .icon { background-color: black; color: white;
}
.pindicator .past::after,
.pindicator .current::after { opacity: 1;
}
.pindicator .past .text,
.pindicator .current .text,
.pindicator .next .text { color: black;
}

Pagination indicators - Script Codes JS Codes

console.clear();
(function() { "use strict"; var bulletClasses = { elements: { container: ".pindicator", bullet: ".bullet", }, helpers: { past: "past", current: "current", next: "next", future: "future", } }; var bulletEls; document.addEventListener("DOMContentLoaded", initBullets); function initBullets() { bulletEls = Array.prototype.slice.call( document.body.querySelectorAll(bulletClasses.elements.bullet) ); bulletEls.forEach(function(el) { el.addEventListener("mousedown", function(event) { gotoPage(bulletEls.indexOf(this) + 1); }); el.addEventListener("touchstart", function(event) { event.preventDefault(); gotoPage(bulletEls.indexOf(this) + 1); }); }); } function gotoPage(pageNum) { bulletEls.forEach(function(e) { e.classList.remove.apply(e.classList, Object.keys(bulletClasses.helpers).map(function(e){ return bulletClasses.helpers[e]; }) ) }); bulletEls[pageNum - 1].classList.add(bulletClasses.helpers.current); if(pageNum > 1) { for(var i = 0; i < pageNum; i++) { bulletEls[i].classList.add(bulletClasses.helpers.past); } } if(pageNum < bulletEls.length) { bulletEls[pageNum].classList.add(bulletClasses.helpers.next); for(var i = bulletEls.length - 1; i >= pageNum; i--) { bulletEls[i].classList.add(bulletClasses.helpers.future); } } }
})();
Pagination indicators - Script Codes
Pagination indicators - Script Codes
Home Page Home
Developer Moses Holmström
Username thykka
Uploaded August 21, 2022
Rating 4
Size 3,263 Kb
Views 44,528
Do you need developer help for Pagination indicators?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Moses Holmström (thykka) Script Codes
Name
Three.js Planetoid
Rotary control with value display
Strange sphere thing
Pageful Catalogue
Eclipse
I long for quaternions....
Freaky Shadow Effect
Animated Unlock Tutorial
Tripples
Thing
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!