Current indicator
How do I make an current indicator?
Indicator based on this shot: https://dribbble.com/shots/2090803-Rubber-IndicatorStill a WIP!. What is a current indicator? How do you make a current indicator? This script and codes were developed by Sandro Walet on 12 June 2022, Sunday.
Current indicator - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Current indicator</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="rubber-indicator"> <ol class="page-dots"> <li class="dot"></li> <li class="dot current"></li> <li class="dot"></li> <li class="dot"></li> <li class="dot"></li> </ol>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Current indicator - Script Codes CSS Codes
html,
body { background-color: #8d608c;
}
.rubber-indicator { width: 100%;
}
.page-dots { background-color: #5b3256; list-style: none; display: inline-block; padding: 10px 20px; border-radius: 40px; position: absolute; z-index: 2; width: 100%; max-width: 190px; text-align: center; top: 50%; left: 50%; transform: translateY(-100%) translateX(-50%);
}
.page-dots .dot { display: inline-block; vertical-align: middle; width: 10px; height: 10px; margin: 0 8px; background: #f58f84; border-radius: 50%; cursor: pointer; border: 4px solid transparent; transition: all 0.4s cubic-bezier(0.3, 0, 0, 1.3);
}
.page-dots .current { background: #c93756; position: relative; transform: scale(3); border-color: #5b3256;
}
Current indicator - Script Codes JS Codes
$(function(){ $('.dot').click(function(){ $(".dot.current").removeClass("current"); $(this).addClass("current"); });
});
Developer | Sandro Walet |
Username | tamashi |
Uploaded | June 12, 2022 |
Rating | 4.5 |
Size | 2,598 Kb |
Views | 72,864 |
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!
Name | Size |
Bounce.js Hover Animation | 2,336 Kb |
Material inspired grid | 4,443 Kb |
A Pen by Sandro Walet | 1,923 Kb |
Gooey Preloader with Anime.js | 2,469 Kb |
Material Inspired Panel | 2,159 Kb |
Rotating Preloader with Anime.js | 2,450 Kb |
Expanding Share Button | 3,746 Kb |
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!
Name | Username | Size |
Matrix | Stathisnikolaidis | 1,922 Kb |
Animating characters with jQuery | 042 | 2,776 Kb |
Simple Carousel Pure CSS | Dangvanthanh | 4,080 Kb |
Arrow Navigation | Hinducows | 1,973 Kb |
Ball bouncing loading animation | Adam2326 | 3,144 Kb |
A Pen by Moeid Saleem | Moeidsaleem | 1,862 Kb |
HTML5 Video Autoplay | Zivcos | 1,352 Kb |
Lazy Load for Background Images | The_ruther4d | 2,977 Kb |
Adding and Removing Element | Accimeesterlin | 2,119 Kb |
No Vacancy 404 CSS Only | Sethkontny | 0 Kb |
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!