Circle loader

Developer
Maharajan
Size
1,799 Kb
Views
6,072
  1. Circle loader Previews
  2. Circle loader HTML Codes
  3. Circle loader CSS Codes

How do I make an circle loader?

What is a circle loader? How do you make a circle loader? This script and codes were developed by Maharajan on 26 January 2023, Thursday.

Circle loader Previews
IQ Test

Circle loader - Script Codes HTML Codes

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

Circle loader - Script Codes CSS Codes

.circle-container
{ width: 200px; height: 200px; background: #c5c5c5; border-radius: 50%; position: relative; overflow: hidden;
}
.circuleFill
{ position:absolute; bottom:0px; height:00%; width:100%; background: #182f4a; height:30%;
/* animation:floatCircle 20s linear 1s infinite */
}
@-webkit-keyframes floatCircle
{ 0%{height:0%} 100%{height:100%}
}
.wave1, .wave2{height: 30px;position: absolute;width: 100%;z-index: 12;left: 0;bottom: 0;}
@-webkit-keyframes wave-animation1 { 0% { background-position: 0 0; } 100% { background-position: 1601px 0; }
}
@-moz-keyframes wave-animation1 { 0% { background-position: 0 0; } 100% { background-position: 1601px 0; }
}
@-o-keyframes wave-animation1 { 0% { background-position: 0 0; } 100% { background-position: 1601px 0; }
}
@keyframes wave-animation1 { 0% { background-position: 0 0; } 100% {background-position: 1601px 0;}
}
.circuleFill:after {
content: ''; background: url(http://www.templates-preview.com/bootstrap-templates/300111854/images/wave2.png) 0 0 repeat-x; -webkit-animation: wave-animation1 8.7s infinite linear; -moz-animation: wave-animation1 8.7s infinite linear; -o-animation: wave-animation1 8.7s infinite linear; position: absolute; animation: wave-animation1 8.7s infinite linear; top: -30px; width: 100%; height: 50px;
}
Circle loader - Script Codes
Circle loader - Script Codes
Home Page Home
Developer Maharajan
Username mhrjnsa1
Uploaded January 26, 2023
Rating 3
Size 1,799 Kb
Views 6,072
Do you need developer help for Circle 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!

Maharajan (mhrjnsa1) Script Codes
Name
Text appearance
Sound waves
Boom
Parallax slider
Drop down options disable
Border hover effect
Hover input
A Pen by maharajan
Pure css loader
Parallax scrolling
Create amazing art & images 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!