Cool Loader

Developer
Samuel Janes
Size
1,782 Kb
Views
56,672
  1. Cool Loader Previews
  2. Cool Loader HTML Codes
  3. Cool Loader CSS Codes

How do I make an cool loader?

What is a cool loader? How do you make a cool loader? This script and codes were developed by Samuel Janes on 14 September 2022, Wednesday.

Cool Loader Previews
IQ Test

Cool Loader - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Cool Loader</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="center"> <div class="loader-circle"> </div>
</div>
</body>
</html>

Cool Loader - Script Codes CSS Codes

body{ margin:0; padding:0;
}
.center{ position:absolute; left:50%; top:50%; transform: translate(-50%, -50%);
}
.loader-circle{ width:100px; height:100px; border-radius:50%; background-color:#65f;
}
.loader-circle:before{ content: ""; display:block; width:100px; height:50px; border-top-left-radius:50px; border-top-right-radius:50px; background-color:#69f; opacity:.75; transform-origin: bottom center; animation: loader-animate 1.5s linear infinite; -webkit-animation: loader-animate 1.5s linear infinite;
}
@keyframes loader-animate { 0%{ transform: rotateX(0deg); } 70%{ background-color:#65f; } 70%, 100%{ transform: rotateX(360deg); } 100%{ background: #69f; }
}
@-webkit-keyframes loader-animate { 0%{ transform: rotateX(0deg); } 70%, 100%{ transform: rotateX(360deg); background-color: #66f; }
}
.loader-circle:after{ content: ""; display:block; width:125px; height:125px; border-radius:50%; background-color:transparent; border: 10px solid #ddd; border-right: 10px solid #65f; position:absolute; top:50%; left:50%; margin-left:-72.5px; margin-top:-72.5px; animation: loader-before-animate 1.5s linear infinite; -webkit-animation: loader-before-animate 1.5s linear infinite 1.5s linear; transform-origin: center;
}
@keyframes loader-before-animate { 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); }
}
@-webkit-keyframes loader-before-animate { 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); }
}
Cool Loader - Script Codes
Cool Loader - Script Codes
Home Page Home
Developer Samuel Janes
Username SamuelJanes
Uploaded September 14, 2022
Rating 3
Size 1,782 Kb
Views 56,672
Do you need developer help for Cool Loader?

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!

Samuel Janes (SamuelJanes) Script Codes
Name
Responsive Carousel Slider with Jquery
Modest Mouse Night on the Sun in CSS
Multi-Step Sign Up Form
Hamburger Menus
Queens of the Stone Age Rated R Album Cover in CSS
Navigation triangle
Navigation layout
Bottom Right Menu
CSS only tooltips
Material Ripple Effect on Button
Create amazing blog posts 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!