Dynamic ring loader
How do I make an dynamic ring loader?
What is a dynamic ring loader? How do you make a dynamic ring loader? This script and codes were developed by Henri Peetsmann on 09 December 2022, Friday.
Dynamic ring loader - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Dynamic ring loader</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="demo-wrap"> <h1 class="demo-heading"> Test heading 1<span class="rngloadr rngloadr--margin-left rngloadr--thin" data-rngloadr-opacity="0.2"></span> </h1> <p class="demo-paragraph">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit eligendi, tenetur neque dolor, inventore <span class="rngloadr"></span> adipisci maiores totam repellendus, odio, blanditiis consequatur minus modi quas nesciunt ullam velit aperiam facere facilis?</p> <div> <button class="demo-button" type="button"> Test button <span class="rngloadr rngloadr--margin-left"></span> </button> <button class="demo-button-alt" type="button"> Test button <span class="rngloadr rngloadr--margin-left"></span> </button> <button class="demo-button-alt2" type="button"> Test button qT <span class="rngloadr rngloadr--margin-left"></span> </button> </div> <h1 class="demo-heading-alt"> <span class="rngloadr rngloadr--thin rngloadr--margin-right"></span> Test heading 2 </h1> <div class="demo-background"> <p class="demo-paragraph-alt">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit eligendi, tenetur neque dolor, inventore <span class="rngloadr rngloadr--inverted"></span> adipisci maiores totam repellendus, odio, blanditiis consequatur minus modi quas nesciunt ullam velit aperiam facere facilis?</p> </div>
</div>
</body>
</html>
Dynamic ring loader - Script Codes CSS Codes
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
*::before, *::after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.rngloadr { position: relative; display: inline-block; vertical-align: baseline; font-size: inherit; width: 1em; height: 1em; line-height: 1; opacity: 0.2;
}
.rngloadr::before { content: ''; position: absolute; display: block; top: 50%; left: 50%; width: 100%; height: 100%; margin-left: -50%; margin-top: -34%; border: solid 0.2em #000000; border-bottom-color: transparent; border-top-color: transparent; border-radius: 50%; -webkit-animation: rngloadr-animation .85s linear infinite; animation: rngloadr-animation .85s linear infinite;
}
.rngloadr--thin::before { margin-top: -37.25%; border-width: 0.15em;
}
.rngloadr--margin { margin-left: 0.33em; margin-right: 0.33em;
}
.rngloadr--margin-left { margin-left: 0.33em;
}
.rngloadr--margin-right { margin-right: 0.33em;
}
.rngloadr--inverted { opacity: 0.4;
}
.rngloadr--inverted::before { border-left-color: #ffffff; border-right-color: #ffffff;
}
.rngloadr[data-rngloadr-opacity="0.1"] { opacity: 0.1;
}
.rngloadr[data-rngloadr-opacity="0.2"] { opacity: 0.2;
}
.rngloadr[data-rngloadr-opacity="0.3"] { opacity: 0.3;
}
.rngloadr[data-rngloadr-opacity="0.4"] { opacity: 0.4;
}
.rngloadr[data-rngloadr-opacity="0.5"] { opacity: 0.5;
}
.rngloadr[data-rngloadr-opacity="0.6"] { opacity: 0.6;
}
.rngloadr[data-rngloadr-opacity="0.7"] { opacity: 0.7;
}
.rngloadr[data-rngloadr-opacity="0.8"] { opacity: 0.8;
}
.rngloadr[data-rngloadr-opacity="0.9"] { opacity: 0.9;
}
.rngloadr[data-rngloadr-opacity="1"] { opacity: 1;
}
@-webkit-keyframes rngloadr-animation { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes rngloadr-animation { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
body { font-size: 14px; font-family: sans-serif;
}
.demo-wrap { width: 80%; max-width: 600px; margin: 0 auto;
}
.demo-heading { font-size: 36px;
}
.demo-heading-alt { font-size: 24px;
}
.demo-paragraph { font-size: 18px;
}
.demo-paragraph-alt { font-size: 14px;
}
.demo-button { padding: 7px 15px; font-size: 18px;
}
.demo-button-alt { padding: 5px 10px; font-size: 14px;
}
.demo-button-alt2 { padding: 2px 5px; font-size: 12px;
}
.demo-background { color: #fff; background: navy; padding: 10px 20px;
}
Developer | Henri Peetsmann |
Username | henripeetsmann |
Uploaded | December 09, 2022 |
Rating | 3 |
Size | 3,331 Kb |
Views | 8,096 |
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 |
A Pen by Henri Peetsmann | 3,559 Kb |
Price ribbon | 2,089 Kb |
Search box | 2,434 Kb |
Sponsor logos | 3,285 Kb |
Responsive SVG cross-browser | 2,078 Kb |
Responsive MacBook retina mockup | 3,228 Kb |
Full size Vimeo background cover | 2,491 Kb |
EM Units Experiment | 1,921 Kb |
Modified Bootstrap dropdown | 2,534 Kb |
Centre aligned responsive header | 2,493 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 |
Horizontal Navigation with Floats | Gymratpacks | 5,403 Kb |
APortfolio | Skybutterfly | 5,174 Kb |
Responsive Minimal Blog Layout | Hackthevoid | 5,261 Kb |
Animated SVG stroke-dasharray | Netsi1964 | 3,179 Kb |
Web Spiral - p5.js | TWAIN | 2,183 Kb |
Ghost Buttons with CSS3 | Mithicher | 2,509 Kb |
Awesome | Samarthpd | 2,901 Kb |
Header | Er40 | 1,542 Kb |
Gradient-ui-button-mark-fx | Tabspace | 1,881 Kb |
Halo 5 REQ Guide Bookmarklet | Cwacht | 3,993 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!