Telecom preloader in SVG

Developer
Size
3,220 Kb
Views
46,552

How do I make an telecom preloader in svg?

What is a telecom preloader in svg? How do you make a telecom preloader in svg? This script and codes were developed by Jermaine on 26 August 2022, Friday.

Telecom preloader in SVG Previews

Telecom preloader in SVG - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Telecom preloader in SVG</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper-main"> <div class="wrapper-inner"> <svg xmlns="http://www.w3.org/2000/svg" width="76" height="82" viewBox="0 0 76 82"> <title>Preloader animation KPN Telecom</title> <path class="line_01" d="M14.47,37.5c-1.49-3.67-3.15-9-3.15-13.73,0-7.4,1.83-14.32,5.75-18.1A11.21,11.21,0,0,1,24.8,2.51h0.88C33.76,2.73,48.15,9.86,54,23.2" fill="none" stroke="#7b7b7b" stroke-miterlimit="10" stroke-width="4"/> <path class="line_02" d="M53.92,29.34a27,27,0,0,1,3.56-.23c6.68,0,10.56,2.47,12.63,4.54a11.8,11.8,0,0,1,3.56,8.24c0,3.51-1.7,7.57-3.34,11.5a61.63,61.63,0,0,0-2.84,8.13c-1.6,6.42-4.32,17.15-11.86,17.15-3.19,0-6.4-2-9.36-4.57" fill="none" stroke="#7b7b7b" stroke-miterlimit="10" stroke-width="4"/> <path class="line_03" d="M43.36,68.69a24.25,24.25,0,0,1-9.18,1.74A38.66,38.66,0,0,1,8,59.73C4.47,56.22,2.5,52.45,2.5,49.22A12.22,12.22,0,0,1,8.27,38.5" fill="none" stroke="#7b7b7b" stroke-miterlimit="10" stroke-width="4"/> <path d="M37,35.49V31.54a12.05,12.05,0,0,0-3.22-.41c-4.62,0-6.89,3.12-6.89,6.27,0,3,1.11,5.86,5.27,12.3a47.89,47.89,0,0,1,5-.41c-3.63-6.72-4.51-9.08-4.51-10.8,0-2,1.15-3,3.5-3C36.48,35.46,36.74,35.47,37,35.49Z" fill="#7b7b7b"/> <path d="M24.4,41.31a15.07,15.07,0,0,1-.69-3.4c-3.68-.12-6.44,2-6.44,4.94,0,2.39,1.22,4.51,6.29,8.8,1.26-.42,3-0.91,4.48-1.23-5-4.62-5.73-5.85-5.73-7.23C22.31,42.18,23,41.52,24.4,41.31Z" fill="#7b7b7b"/> <path d="M40.39,35.49V31.54a12.07,12.07,0,0,1,3.22-.41c4.62,0,6.89,3.12,6.89,6.27,0,3-1.11,5.86-5.27,12.3a47.86,47.86,0,0,0-5-.41c3.63-6.72,4.51-9.08,4.51-10.8,0-2-1.15-3-3.5-3C40.89,35.46,40.64,35.47,40.39,35.49Z" fill="#7b7b7b"/> <path d="M53,41.31a15.07,15.07,0,0,0,.69-3.4c3.68-.12,6.44,2,6.44,4.94,0,2.39-1.22,4.51-6.29,8.8-1.26-.42-3-0.91-4.48-1.23,5-4.62,5.73-5.85,5.73-7.23C55.06,42.18,54.36,41.52,53,41.31Z" fill="#7b7b7b"/> <path d="M38.69,57.69a39.8,39.8,0,0,1,11.45,1.66l1.35-4.42a45,45,0,0,0-25.6,0l1.35,4.42A39.8,39.8,0,0,1,38.69,57.69Z" fill="#7b7b7b"/> <polygon points="38.69 28.96 34.59 24.87 38.69 20.78 42.79 24.87 38.69 28.96" fill="#7b7b7b"/> </svg> </div>
</div>
</body>
</html>

Telecom preloader in SVG - Script Codes CSS Codes

.wrapper-main { position: relative; width: 100vw; height: 100vh; background-image: url("https://www.lukkien.com/media/images/portfolio2_uShE1VZ.width-900.jpg"); background-size: cover; background-repeat: no-repeat; background-position: 50%;
}
.wrapper-main .wrapper-inner { position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); height: 90px; width: 90px; background-color: #fff; border-radius: 50%; text-align: center;
}
.wrapper-main svg { width: 75%; height: 75%; margin-top: 8px;
}
.line_01, .line_02, .line_03 { stroke-dasharray: 250; stroke-dashoffset: 1000; stroke-linecap: round; animation-name: dash; animation-duration: 5s; animation-iteration-count: infinite;
}
.line_02 { animation-delay: .5s;
}
.line_03 { animation-delay: 1s;
}
@keyframes dash { 0% { stroke-dashoffset: 1000; } 100% { stroke-dashoffset: 500; }
}
Telecom preloader in SVG - Script Codes
Telecom preloader in SVG - Script Codes
Home Page Home
Developer Jermaine
Username dviate
Uploaded August 26, 2022
Rating 3
Size 3,220 Kb
Views 46,552
Do you need developer help for Telecom preloader in 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!

Jermaine (dviate) Script Codes
Create amazing SEO content 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!