Pager-dots concept

Developer

Size

4,731 Kb

Views

42,504

Pager-dots concept Previews
Pager-dots concept HTML Codes
Pager-dots concept CSS Codes
Pager-dots concept JS Codes

How do I make an pager-dots concept?

Just a simple concept for some pagersmaterial design. What is a pager-dots concept? How do you make a pager-dots concept? This script and codes were developed by Gregor Adams on 24 July 2022, Sunday.

Pager-dots concept Previews

Pager-dots concept - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>pager-dots concept</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container page-1"> <div class="nav prev">prev</div> <div class="track"> <div class="line"> </div> </div> <div class="pagers"> <div class="pager __1"> <div class="inner"></div> </div> <div class="pager __2"> <div class="inner"></div> </div> <div class="pager __3"> <div class="inner"></div> </div> <div class="pager __4"> <div class="inner"></div> </div> <div class="pager __5"> <div class="inner"></div> </div> <div class="pager __6"> <div class="inner"></div> </div> </div> <div class="nav next">next</div>
</div> <script src="js/index.js"></script>
</body>
</html>

Pager-dots concept - Script Codes CSS Codes

.container { height: 40px; width: 440px; position: absolute; top: 50%; left: 50%; margin: -20px -220px;
}
.track { height: 2px; width: 440px; position: absolute; top: 50%; left: 0%; margin-top: -1px; background: #D9D9D9; overflow: hidden;
}
.track .line { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: #3297D9; -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-transition: -webkit-transform 0.45s linear; transition: -webkit-transform 0.45s linear; transition: transform 0.45s linear; transition: transform 0.45s linear, -webkit-transform 0.45s linear; -webkit-transition-delay: 0s; transition-delay: 0s; -webkit-transform: scaleX(0.1); transform: scaleX(0.1);
}
.page-1.container .track .line { -webkit-transform: scaleX(0.13636); transform: scaleX(0.13636);
}
.page-2.container .track .line { -webkit-transform: scaleX(0.31818); transform: scaleX(0.31818);
}
.page-3.container .track .line { -webkit-transform: scaleX(0.5); transform: scaleX(0.5);
}
.page-4.container .track .line { -webkit-transform: scaleX(0.68182); transform: scaleX(0.68182);
}
.page-5.container .track .line { -webkit-transform: scaleX(0.86364); transform: scaleX(0.86364);
}
.page-6.container .track .line { -webkit-transform: scaleX(1.04545); transform: scaleX(1.04545);
}
.pagers { height: 40px; width: 440px; position: absolute; top: 50%; left: 0%; margin-top: -20px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
}
.pagers .pager { display: block; position: relative; height: 30px; width: 30px; background: #D9D9D9; border-radius: 100%; overflow: hidden; -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC");
}
.pagers .pager:before { content: ''; position: absolute; top: 50%; left: 50%; height: 100%; width: 100%; margin: -50%; background: #3297D9; pointer-events: none; -webkit-transform: translateX(-100%) scale(1); transform: translateX(-100%) scale(1); -webkit-transition: -webkit-transform 0.075s linear; transition: -webkit-transform 0.075s linear; transition: transform 0.075s linear; transition: transform 0.075s linear, -webkit-transform 0.075s linear; -webkit-transition-delay: 0.15s; transition-delay: 0.15s; -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%;
}
.pagers .pager .inner { content: ''; position: absolute; top: 50%; left: 50%; height: calc(100% - 4px); width: calc(100% - 4px); margin: calc(-50% + 2px); background: none; border-radius: 100%; pointer-events: none; overflow: hidden; -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC");
}
.pagers .pager .inner:before { content: ''; position: absolute; top: 50%; left: 50%; height: 100%; width: 100%; margin: -50%; background: white; border-radius: 100%; -webkit-transition: -webkit-transform 0.15s linear; transition: -webkit-transform 0.15s linear; transition: transform 0.15s linear; transition: transform 0.15s linear, -webkit-transform 0.15s linear; -webkit-transform: translateX(0%) scale(0, 0); transform: translateX(0%) scale(0, 0); -webkit-transition-delay: 0.225s; transition-delay: 0.225s; pointer-events: none;
}
.page-1.container .pagers .pager.__1 .inner:before { -webkit-transform: translateX(0%) scale(1, 1); transform: translateX(0%) scale(1, 1);
}
.page-1.container .pagers .pager.__0 .inner:before { -webkit-transform: translateX(0%) scale(0); transform: translateX(0%) scale(0); -webkit-transition-delay: 0s; transition-delay: 0s;
}
.page-1.container .pagers .pager.__1 .inner:before { -webkit-transform: translateX(0%) scale(1, 1); transform: translateX(0%) scale(1, 1); -webkit-transition-delay: 0s; transition-delay: 0s;
}
.page-1.container .pagers .pager.__1:before { -webkit-transition-delay: 0.15s; transition-delay: 0.15s; -webkit-transition-duration: 0.15s; transition-duration: 0.15s; -webkit-transform: translateX(0%) scale(1, 1); transform: translateX(0%) scale(1, 1);
}
.page-2.container .pagers .pager.__2 .inner:before { -webkit-transform: translateX(0%) scale(1, 1); transform: translateX(0%) scale(1, 1);
}
.page-2.container .pagers .pager.__1 .inner:before { -webkit-transform: translateX(0%) scale(0); transform: translateX(0%) scale(0); -webkit-transition-delay: 0s; transition-delay: 0s;
}
.page-2.container .pagers .pager.__2 .inner:before { -webkit-transform: translateX(0%) scale(1, 1); transform: translateX(0%) scale(1, 1); -webkit-transition-delay: 0s; transition-delay: 0s;
}
.page-2.container .pagers .pager.__2:before { -webkit-transition-delay: 0.15s; transition-delay: 0.15s; -webkit-transition-duration: 0.15s; transition-duration: 0.15s; -webkit-transform: translateX(0%) scale(1, 1); transform: translateX(0%) scale(1, 1);
}
.page-3.container .pagers .pager.__3 .inner:before { -webkit-transform: translateX(0%) scale(1, 1); transform: translateX(0%) scale(1, 1);
}
.page-3.container .pagers .pager.__2 .inner:before { -webkit-transform: translateX(0%) scale(0); transform: translateX(0%) scale(0); -webkit-transition-delay: 0s; transition-delay: 0s;
}
.page-3.container .pagers .pager.__3 .inner:before { -webkit-transform: translateX(0%) scale(1, 1); transform: translateX(0%) scale(1, 1); -webkit-transition-delay: 0s; transition-delay: 0s;
}
.page-3.container .pagers .pager.__3:before { -webkit-transition-delay: 0.15s; transition-delay: 0.15s; -webkit-transition-duration: 0.15s; transition-duration: 0.15s; -webkit-transform: translateX(0%) scale(1, 1); transform: translateX(0%) scale(1, 1);
}
.page-4.container .pagers .pager.__4 .inner:before { -webkit-transform: translateX(0%) scale(1, 1); transform: translateX(0%) scale(1, 1);
}
.page-4.container .pagers .pager.__3 .inner:before { -webkit-transform: translateX(0%) scale(0); transform: translateX(0%) scale(0); -webkit-transition-delay: 0s; transition-delay: 0s;
}
.page-4.container .pagers .pager.__4 .inner:before { -webkit-transform: translateX(0%) scale(1, 1); transform: translateX(0%) scale(1, 1); -webkit-transition-delay: 0s; transition-delay: 0s;
}
.page-4.container .pagers .pager.__4:before { -webkit-transition-delay: 0.15s; transition-delay: 0.15s; -webkit-transition-duration: 0.15s; transition-duration: 0.15s; -webkit-transform: translateX(0%) scale(1, 1); transform: translateX(0%) scale(1, 1);
}
.page-5.container .pagers .pager.__5 .inner:before { -webkit-transform: translateX(0%) scale(1, 1); transform: translateX(0%) scale(1, 1);
}
.page-5.container .pagers .pager.__4 .inner:before { -webkit-transform: translateX(0%) scale(0); transform: translateX(0%) scale(0); -webkit-transition-delay: 0s; transition-delay: 0s;
}
.page-5.container .pagers .pager.__5 .inner:before { -webkit-transform: translateX(0%) scale(1, 1); transform: translateX(0%) scale(1, 1); -webkit-transition-delay: 0s; transition-delay: 0s;
}
.page-5.container .pagers .pager.__5:before { -webkit-transition-delay: 0.15s; transition-delay: 0.15s; -webkit-transition-duration: 0.15s; transition-duration: 0.15s; -webkit-transform: translateX(0%) scale(1, 1); transform: translateX(0%) scale(1, 1);
}
.page-6.container .pagers .pager.__6 .inner:before { -webkit-transform: translateX(0%) scale(1, 1); transform: translateX(0%) scale(1, 1);
}
.page-6.container .pagers .pager.__5 .inner:before { -webkit-transform: translateX(0%) scale(0); transform: translateX(0%) scale(0); -webkit-transition-delay: 0s; transition-delay: 0s;
}
.page-6.container .pagers .pager.__6 .inner:before { -webkit-transform: translateX(0%) scale(1, 1); transform: translateX(0%) scale(1, 1); -webkit-transition-delay: 0s; transition-delay: 0s;
}
.page-6.container .pagers .pager.__6:before { -webkit-transition-delay: 0.15s; transition-delay: 0.15s; -webkit-transition-duration: 0.15s; transition-duration: 0.15s; -webkit-transform: translateX(0%) scale(1, 1); transform: translateX(0%) scale(1, 1);
}
.nav { position: absolute; top: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-family: 'Roboto',sans-serif; text-transform: uppercase; padding: 0.5em 0.75em; border-radius: 3px; background: #eee; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; margin-top: 24px;
}
.nav:hover { background: #D9D9D9;
}
.nav.prev { left: 0%;
}
.nav.next { right: 0%;
}

Pager-dots concept - Script Codes JS Codes

'use strict';
var next = document.querySelector('.next');
var prev = document.querySelector('.prev');
var container = document.querySelector('.container');
var currentPage = 1;
var maxPages = 6;
var minPages = 1;
container.classList.add('page-' + currentPage);
next.addEventListener('click', function (e) { e.preventDefault(); if (currentPage < maxPages) { currentPage++; container.classList.add('page-' + currentPage); }
});
prev.addEventListener('click', function (e) { e.preventDefault(); if (currentPage > minPages) { container.classList.remove('page-' + currentPage); currentPage--; }
});

Home Page	Home
Developer	Gregor Adams
Username	pixelass
Uploaded	July 24, 2022
Rating	4.5
Size	4,731 Kb
Views	42,504

Do you need developer help for Pager-dots concept?

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!

Gregor Adams (pixelass) Script Codes

Name	Size
Cantor Set in CSS	2,143 Kb
Fractal curve generator	13,870 Kb
SVG sine wave	2,988 Kb
Netfix logo animation CSS	10,303 Kb
RubiCSS cube	12,148 Kb
Pure CSS marching ants border	3,837 Kb
Material button pure CSS	3,594 Kb
3D Particle Heart	5,711 Kb
Fractal tree	5,511 Kb
Diagonal scroll	5,113 Kb

Create amazing SEO content 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!

Similar Scripts & Codes

Name	Username	Size
Pure CSS Torch Light	Juliendargelos	2,727 Kb
About Us	Francescaedits	1,902 Kb
Button shaking	SusanneLundblad	2,227 Kb
Popup Modal	Aldlevine	3,696 Kb
A Pen by Kenny Mark	Kennymark	5,574 Kb
Nav Test -- cats 1	Payls	4,735 Kb
Wip elementary os navbar	Nickcolley	2,993 Kb
Sitemap generator for Sharepoint	Gyusza	2,518 Kb
CSSOff 2013 Submission	Codewunder	14,766 Kb
Feedback Page	TessDiNapoli	2,836 Kb

Do you want hide your ip address?

Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!