Another nice loader
How do I make an another nice loader?
Just for fun. What is a another nice loader? How do you make a another nice loader? This script and codes were developed by Niels Oeltjen on 30 December 2022, Friday.
Another nice loader - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Another nice loader</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ /* Rotation */
@keyframes rotate { from {transform: rotate(0deg);} to {transform: rotate(360deg);}
}
/* The loader */
div { /* Dimensions */ width: 4em; height: 4em; z-index: 0; /* Draw circle */ border-radius: 50%; /* Position */ position: relative; margin: 3em auto; /* Border */ border: 0.25em solid #decaff; /* Background color*/ background-color: #decaff; /* Animate */ animation: rotate 1.5s infinite linear;
}
/* Position a circle underneath */
div:after { /* Must have this to work */ content: ""; /* Dimensions */ width: 4em; height: 4em; /* Draw circle */ border-radius: 50%; /* Border */ border: 0.25em solid #888; border-top: 0.25em solid #decaff; border-right: 0.25em solid #decaff; /* Dimensions */ width: 3.5em; height: 3.5em; /* Position underneath div */ z-index: -1; /* Background color*/ background-color: #decaff; /* Position */ position: absolute; left: 0em; top: 0em;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
Another nice loader - Script Codes CSS Codes
/* Rotation */
@keyframes rotate { from {transform: rotate(0deg);} to {transform: rotate(360deg);}
}
/* The loader */
div { /* Dimensions */ width: 4em; height: 4em; z-index: 0; /* Draw circle */ border-radius: 50%; /* Position */ position: relative; margin: 3em auto; /* Border */ border: 0.25em solid #decaff; /* Background color*/ background-color: #decaff; /* Animate */ animation: rotate 1.5s infinite linear;
}
/* Position a circle underneath */
div:after { /* Must have this to work */ content: ""; /* Dimensions */ width: 4em; height: 4em; /* Draw circle */ border-radius: 50%; /* Border */ border: 0.25em solid #888; border-top: 0.25em solid #decaff; border-right: 0.25em solid #decaff; /* Dimensions */ width: 3.5em; height: 3.5em; /* Position underneath div */ z-index: -1; /* Background color*/ background-color: #decaff; /* Position */ position: absolute; left: 0em; top: 0em;
}
Developer | Niels Oeltjen |
Username | NielsOeltjen |
Uploaded | December 30, 2022 |
Rating | 3 |
Size | 2,267 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 |
Simple spinner | 1,810 Kb |
Button toggle box | 3,043 Kb |
Semantic vertical centering | 2,394 Kb |
Pretty css spinner | 1,792 Kb |
Single element Adobe Brackets logo | 1,955 Kb |
Expanding text links | 2,099 Kb |
Sun | 3,603 Kb |
Loading animation | 2,298 Kb |
Animated background colours | 1,979 Kb |
Prose.io repo icon | 2,162 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 |
Reviews and Ratings Star | Zbnmstry | 1,591 Kb |
Pagepilling.js | Blossk | 6,554 Kb |
Navier Stoke Fluid Simulation | Esimov | 8,584 Kb |
Tooltip in table | Roine | 3,713 Kb |
A Pen by lizz | Lizz | 10,068 Kb |
Responsive Table-less Shopping Cart | Alex_rodrigues | 6,637 Kb |
Drag and Drop Quiz | Cgspicer | 3,837 Kb |
Simple animated hover effect | Pobee-norris | 3,044 Kb |
A Pen by Ash | Littleginger | 2,386 Kb |
A Pen by Jess | Jessamyne | 5,100 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!