Loading svg

Developer
Adem Ilter
Size
2,319 Kb
Views
125,488
  1. Loading svg Previews
  2. Loading svg HTML Codes
  3. Loading svg CSS Codes
  4. Loading svg JS Codes

How do I make an loading svg?

What is a loading svg? How do you make a loading svg? This script and codes were developed by Adem Ilter on 11 June 2022, Saturday.

Loading svg Previews
IQ Test

Loading svg - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>loading svg</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="loading"> <svg xmlns="http://www.w3.org/2000/svg" width="124" height="124" viewBox="0 0 124 124"> <circle id="circle" class="circle-bg" cx="62" cy="62" r="59" /> <circle id="circle" class="circle-color" cx="62" cy="62" r="59" transform="rotate(-90 62 62)" /> <polyline id="check" class="check" points="73.56 48.63 57.88 72.69 49.38 62" /> </svg>
</div>
<button class="reload" role="button" onclick="run()">reload</button> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Loading svg - Script Codes CSS Codes

body { text-align: center; padding: 40px;
}
.reload { display: none;
}
.reload.show { margin-top: 20px; display: inline-block;
}
circle,
polyline { fill: none; stroke-width: 6px; stroke-linecap: round; stroke-linejoin: round;
}
.circle-bg { stroke: #eee;
}
.circle-color { stroke: #007AFF; stroke-dasharray: 380; stroke-dashoffset: 380;
}
.check { stroke: #007AFF; stroke-dasharray: 47; stroke-dashoffset: -46;
}
.loading.isComplated .check { stroke-dashoffset: 0; -webkit-transition: .5s; transition: .5s;
}
.loading { margin: 0 auto; font-size: 124px; width: 1em; height: 1em;
}
.loading svg { display: block; width: 100%; height: 100%;
}

Loading svg - Script Codes JS Codes

$loading = $(".loading");
var svgStrokeLength = 380;
function loading(percent, delay) { var percent = svgStrokeLength - (svgStrokeLength * percent / 100) $loading.find("circle.circle-color").animate({ 'stroke-dashoffset': percent }, delay, function() { if (percent == 0) { setTimeout(function() { $loading.addClass("isComplated"); $(".reload").addClass("show"); }, delay); } })
}
function run() { $loading.removeClass("isComplated"); $(".reload").removeClass("show"); $loading.find("circle.circle-color") .css('stroke-dashoffset', svgStrokeLength) loading(10, 200); loading(15, 600); loading(42, 1200); loading(55, 400); loading(86, 2000); loading(100, 100);
};
run();
Loading svg - Script Codes
Loading svg - Script Codes
Home Page Home
Developer Adem Ilter
Username ademilter
Uploaded June 11, 2022
Rating 3
Size 2,319 Kb
Views 125,488
Do you need developer help for Loading svg?

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!

Adem Ilter (ademilter) Script Codes
Name
Fluid width step-navigation
A Pen by Adem ilter
Pure CSS3 iPad Clock
Responsive table
Fake loading
404 No signal
Border box arrow
Circle loading
Timeline with css
Navigation Knob
Create amazing video scripts 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!