RPG Cooldown
How do I make an rpg cooldown?
Common cooldown effect for spells and such in rpg games. What is a rpg cooldown? How do you make a rpg cooldown? This script and codes were developed by Adam Grayson on 10 November 2022, Thursday.
RPG Cooldown - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>RPG Cooldown</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container"> <div class="cooldown"> <svg class="circleFill"> <circle cx="50%" cy="50%" r="50%" stroke="rgba(0,0,0,0.5)" stroke-width="100%" fill="none"></circle> </svg> </div> <div class="icon"></div>
</div>
<div class="container"> <div class="cooldown"> <svg class="circleFill"> <circle cx="50%" cy="50%" r="50%" stroke="rgba(0,0,0,0.5)" stroke-width="100%" fill="none"></circle> </svg> </div> <div class="icon"></div>
</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>
RPG Cooldown - Script Codes CSS Codes
.container { width: 110px; height: 110px; overflow: hidden; margin: 20px auto; cursor: pointer;
}
.container .cooldown { position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
.container .cooldown svg { width: 100%; height: 100%;
}
.container .cooldown svg.circleFill { z-index: 1; stroke-dasharray: 346; stroke-dashoffset: 0; -webkit-transition: all 1s linear; transition: all 1s linear; -webkit-transform: rotate(-90deg) scale(1, -1); transform: rotate(-90deg) scale(1, -1);
}
.container .cooldown svg.circleFill.filled { stroke-dashoffset: 346;
}
.container .cooldown { position: relative; width: 100%; height: 100%; background: #CCC;
}
RPG Cooldown - Script Codes JS Codes
(function() { $(document).ready(function() { return $('.container').click(function() { var target; target = $(this).find('.circleFill'); return target.attr("class", "circleFill filled"); }); });
}).call(this);
Developer | Adam Grayson |
Username | agrayson |
Uploaded | November 10, 2022 |
Rating | 3 |
Size | 2,902 Kb |
Views | 54,648 |
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 |
HTML5 GeoLocation Example | 3,685 Kb |
Sliding Lines Animation | 2,572 Kb |
Dynamic circle menus with SASS | 3,928 Kb |
Responsive square grid in pure CSS | 2,140 Kb |
Spinning Circles | 3,581 Kb |
Responsive Carousel | 3,291 Kb |
Centered background Image with hot spots | 3,869 Kb |
Minimal Solar System | 3,425 Kb |
Form Progress Bar | 4,644 Kb |
CCS3 Navigation Hover Effect | 1,953 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 |
Adding Items | Valhead | 4,008 Kb |
Pictos font library from CodePen | Jstam | 3,790 Kb |
Drifting Clouds | Benedikte | 2,247 Kb |
Wip elementary os navbar | Nickcolley | 2,993 Kb |
Cloud upload | Jaflo | 2,774 Kb |
Nested table email layout | Massimo-cassandro | 2,355 Kb |
404 Page | Saransh | 2,666 Kb |
CSS Infinite 360 | APinix | 5,564 Kb |
Price | Catcode | 2,623 Kb |
Improved Page Flipping Effect | Usaphp | 5,201 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!