Helm Page Loader

Developer

Size

3,756 Kb

Views

6,072

Helm Page Loader Previews
Helm Page Loader HTML Codes
Helm Page Loader CSS Codes

How do I make an helm page loader?

Wanted a "loading" screen for navigating the helm website. Uses animated CSS gradients on SVG.. What is a helm page loader? How do you make a helm page loader? This script and codes were developed by Tommy Creenan on 27 January 2023, Friday.

Helm Page Loader Previews

Helm Page Loader - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Helm Page Loader</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="loader"> <div class="logo-loader"> <span> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 772.11 279.76">	<defs>	<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0">	<stop offset="0%" style="stop-color:#ffb500;"/> <stop offset="50%" style="stop-color:#c2284a;"/> <stop offset="100%" style="stop-color:#ffb500;"/> </linearGradient>	<pattern id="pattern" x="0" y="0" width="300%" height="100%" patternUnits="userSpaceOnUse"> <rect x="0" y="0" width="150%" height="100%" fill="url(#gradient)"> <animate attributeType="XML" attributeName="x" from="0" to="150%" dur="1.5s" repeatCount="indefinite"/> </rect> <rect x="-150%" y="0" width="150%" height="100%" fill="url(#gradient)"> <animate attributeType="XML" attributeName="x" from="-150%" to="0" dur="1.5s" repeatCount="indefinite"/> </rect> </pattern>	<style>.cls-2{fill:url(#pattern);}.cls-1{fill:#fff;}</style>	</defs>
<g id="Layer_1-2" data-name="Layer 1">	<path class="cls-1" fill="url(#pattern)" d="M151.92,15,122.18,137.56c8.74-17.77,26.8-31.87,48.23-31.87,27.92,0,38.08,17.77,38.08,45.69a76.75,76.75,0,0,1-3.38,22.56L191.28,221a36,36,0,0,0-1.69,9.31c0,5.92,3.95,7.61,9.59,7.61h.47c2.69,0,16.23-.59,24.91-12.14a59.09,59.09,0,0,1-7.33-29c0-53.87,51.62-91.38,102.1-91.38,27.64,0,63.46,14.67,63.46,47.1,0,42.31-62.62,47.95-92.51,48.51a42.32,42.32,0,0,0-.85,8.18c0,15.79,10.44,21.72,25.1,21.72,15.2,0,29.85-6.18,41.12-16.31.53-.49,5.21-4.67,11.05-4.67,5.35,0,11.68,3.5,16.7,16.55a76.18,76.18,0,0,1,2.77-16.73l40.9-143L497,56.89,455.56,221a32,32,0,0,0-1.69,9c0,5.92,4.23,7.62,9.59,7.62a43.84,43.84,0,0,0,18.3-6.78l20.63-75.3A158.62,158.62,0,0,0,508.3,111l59.47-8.61,8.51,34.83c9.31-18.33,23.13-31.87,44.84-31.87,18.62,0,36.1,9.87,40.9,28.77,9.87-16.92,28.49-28.77,48.23-28.77,27.92,0,46,17.77,46.26,46a76.73,76.73,0,0,1-3.38,22.56L739,221a31.93,31.93,0,0,0-1.69,9c0,6.2,4.22,7.89,9.85,7.9,2.22,0,21.76.68-1.1,17.47v0l-.38.26-.39.29v0c-9.55,6.63-23,8.78-34.49,8.78-24.26,0-43.72-12.69-43.72-38.64,0-22.28,17.2-50.49,17.2-69.67,0-3.67-.84-9.59-5.92-9.59-10.43,0-13.82,12.41-15.79,20.59l-24,94.2H568.38l24.54-94.49a49.55,49.55,0,0,0,1.69-11c0-3.67-.85-9.31-5.64-9.31-10.72,0-15,11.85-17.21,20.59l-25.67,94.2H473.33l2.42-8.85c-11.44,6.12-26.65,12-43.1,12H431c-19.49,0-38.6-4.56-45.22-21.27a33.6,33.6,0,0,1-1.94-7.24,3.55,3.55,0,0,0-1.84-.46c-2,0-4.95,1.22-9.36,4.64h0c-21.9,18.44-42.16,24.33-70.82,24.33-26.65,0-55.29-10.26-71.47-30.33-7.7,10.14-22.24,22.91-48.51,28.73l-.78.18-.46.11-.61.12-.71.14-1.4.24a68.8,68.8,0,0,1-10.88.8c-23.69,0-48.51-7.05-48.51-35.26,0-16.92,11.56-47.67,16.08-62.33a42.4,42.4,0,0,0,1.69-10.44c0-3.67-.56-9.59-5.64-9.59-10.72,0-14.67,11.85-16.92,20.31l-25.95,94.2H15L79.37,25.15,151.92,15"/><path class="cls-2" fill="url(#pattern)" d="M151.92,15,122.18,137.56c8.74-17.77,26.8-31.87,48.23-31.87,27.92,0,38.08,17.77,38.08,45.69a76.75,76.75,0,0,1-3.38,22.56L191.28,221a36,36,0,0,0-1.69,9.31c0,5.92,3.95,7.61,9.59,7.61h.47c2.69,0,16.23-.59,24.91-12.14a59.09,59.09,0,0,1-7.33-29c0-53.87,51.62-91.38,102.1-91.38,27.64,0,63.46,14.67,63.46,47.1,0,42.31-62.62,47.95-92.51,48.51a42.32,42.32,0,0,0-.85,8.18c0,15.79,10.44,21.72,25.1,21.72,15.2,0,29.85-6.18,41.12-16.31.53-.49,5.21-4.67,11.05-4.67,5.35,0,11.68,3.5,16.7,16.55a76.18,76.18,0,0,1,2.77-16.73l40.9-143L497,56.89,455.56,221a32,32,0,0,0-1.69,9c0,5.92,4.23,7.62,9.59,7.62a43.84,43.84,0,0,0,18.3-6.78l20.63-75.3A158.62,158.62,0,0,0,508.3,111l59.47-8.61,8.51,34.83c9.31-18.33,23.13-31.87,44.84-31.87,18.62,0,36.1,9.87,40.9,28.77,9.87-16.92,28.49-28.77,48.23-28.77,27.92,0,46,17.77,46.26,46a76.73,76.73,0,0,1-3.38,22.56L739,221a31.93,31.93,0,0,0-1.69,9c0,6.2,4.22,7.89,9.85,7.9,2.22,0,21.76.68-1.1,17.47v0l-.38.26-.39.29v0c-9.55,6.63-23,8.78-34.49,8.78-24.26,0-43.72-12.69-43.72-38.64,0-22.28,17.2-50.49,17.2-69.67,0-3.67-.84-9.59-5.92-9.59-10.43,0-13.82,12.41-15.79,20.59l-24,94.2H568.38l24.54-94.49a49.55,49.55,0,0,0,1.69-11c0-3.67-.85-9.31-5.64-9.31-10.72,0-15,11.85-17.21,20.59l-25.67,94.2H473.33l2.42-8.85c-11.44,6.12-26.65,12-43.1,12H431c-19.49,0-38.6-4.56-45.22-21.27a33.6,33.6,0,0,1-1.94-7.24,3.55,3.55,0,0,0-1.84-.46c-2,0-4.95,1.22-9.36,4.64h0c-21.9,18.44-42.16,24.33-70.82,24.33-26.65,0-55.29-10.26-71.47-30.33-7.7,10.14-22.24,22.91-48.51,28.73l-.78.18-.46.11-.61.12-.71.14-1.4.24a68.8,68.8,0,0,1-10.88.8c-23.69,0-48.51-7.05-48.51-35.26,0-16.92,11.56-47.67,16.08-62.33a42.4,42.4,0,0,0,1.69-10.44c0-3.67-.56-9.59-5.64-9.59-10.72,0-14.67,11.85-16.92,20.31l-25.95,94.2H15L79.37,25.15,151.92,15M292,181.27c16.36-1.69,34.13-14.1,34.41-31.87,0-5.08-1.13-9.87-7.33-9.87-14.95,0-24.54,29.9-27.08,41.74m93.83,62.22h0m0,0h0m0,0h0M151.92,0a15,15,0,0,0-2.08.14L77.29,10.29A15,15,0,0,0,64.9,21.21L.53,257.72A15,15,0,0,0,15,276.66H87.77a15,15,0,0,0,14.46-11l4.69-17a43.78,43.78,0,0,0,19.47,22.09c10.42,6,24.09,9.06,40.64,9.06a83.11,83.11,0,0,0,13.25-1l1.8-.31.74-.15.16,0,.14,0,.6-.12.65-.15h0l.89-.2c20.81-4.64,35.41-13.21,45.47-21.93,18.39,15,44.26,23.91,71.14,23.91,30.65,0,52.72-6.69,74.15-22.81,5.06,7.63,12.53,13.56,22,17.36,9,3.62,20.12,5.45,33,5.45h1.63A97,97,0,0,0,464.82,274a15,15,0,0,0,8.51,2.65H546.1a15,15,0,0,0,11.14-5,15,15,0,0,0,11.14,5h70.23a15,15,0,0,0,14.54-11.3l4-15.57c8.7,18.57,28.15,30,53.7,30,11.89,0,28.78-1.92,42.31-11q.48-.29.94-.62l.33-.24.57-.4.56-.43c6.12-4.51,20.32-15.5,15.67-29.91-2.33-7.23-8.48-12-17.26-13.62l13.55-45.27a91.61,91.61,0,0,0,4-26.93s0-.1,0-.15c-.36-36.38-25-60.82-61.25-60.82-16.56,0-33,6.58-45.81,17.72a52.47,52.47,0,0,0-9.41-7.93,61.13,61.13,0,0,0-33.91-9.79,57.86,57.86,0,0,0-36.26,12.2q-.68.53-1.35,1.08l-1.17-4.8a15,15,0,0,0-16.72-11.29L506.16,96.2a15,15,0,0,0-3.87,1.1l9.28-36.74A15,15,0,0,0,494.93,42L425,51.91a15,15,0,0,0-12.33,10.73l-19.42,67.91C388.59,120,380.49,111,369.35,104.05c-13.94-8.68-32.18-13.65-50-13.65a125.85,125.85,0,0,0-79.62,29,111.87,111.87,0,0,0-17.1,17.83c-1.53-11.48-5.09-20.8-10.75-28.24-9.23-12.14-23.17-18.3-41.45-18.3A64,64,0,0,0,148,94.75L166.5,18.54A15,15,0,0,0,151.92,0ZM374.14,196l.48-.33-.12.44-.35-.1Z"/></g></svg> </span> </div>
</div>
</body>
</html>

Helm Page Loader - Script Codes CSS Codes

body { background:#000; }
#loader {	background: linear-gradient(45deg, #ffb500, #c2284a);
background-size: 400% 400%;
-webkit-animation: AnimationName 1.5s ease-in-out infinite;
-moz-animation: AnimationName 1.5s ease-in-out infinite;
animation: AnimationName 1.5s ease-in-out infinite;	position: fixed;	top: 0;	left: 0;	right: 0;	bottom: 0;
}
.logo-loader {	background: #fff;	display: flex; align-items: center; justify-content: center;	position: absolute;	top: 5px;	left: 5px;	right: 5px;	bottom: 5px;
}
.logo-loader span {	position: relative;	width: 200px;
}
@-webkit-keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%}
}
@keyframes AnimationName { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%}
}

Home Page	Home
Developer	Tommy Creenan
Username	TommyCreenan
Uploaded	January 27, 2023
Rating	3
Size	3,756 Kb
Views	6,072

Do you need developer help for Helm Page 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!

Tommy Creenan (TommyCreenan) Script Codes

Name	Size
Button Color SASS Mixin	2,363 Kb
CSS Donation Thermometer	2,331 Kb
SCSS Column mixin with optional margin	2,298 Kb
Equal Height jQuery Columns	2,020 Kb
Column-count ul	1,664 Kb
CSS Grid Experiment	1,588 Kb

Create amazing web 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!

Similar Scripts & Codes

Name	Username	Size
Pomodoro Clock	Osycon	3,705 Kb
Filter inputs	Rowinf	1,721 Kb
Scarlett Johansson Tribute Page	Diomed	3,233 Kb
SVG Animation	Pollardld	3,133 Kb
Super Discount	Orrinward	3,225 Kb
Minimelephant	Smashlee	2,507 Kb
Segments mouse following	Nosir	2,909 Kb
Animate elements with fixed gradient	Badabam	4,406 Kb
Practice using Wixel	Emnk	3,057 Kb
Colorful Sliders	Chanrith	1,246 Kb

Do you want hide your ip address?

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!