WW1 Loader

Developer
Chrisarmstrong
Size
2,242 Kb
Views
8,096
  1. WW1 Loader Previews
  2. WW1 Loader HTML Codes
  3. WW1 Loader CSS Codes

How do I make an ww1 loader?

What is a ww1 loader? How do you make a ww1 loader? This script and codes were developed by Chrisarmstrong on 24 November 2022, Thursday.

WW1 Loader Previews
IQ Test

WW1 Loader - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>WW1 Loader</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body, html { background: #1d1d1d; width: 100%; height: 100%; margin: 0; padding: 0;
}
.loader { width: 120px; height: 120px; position: relative; top: 50%; margin: -60px auto;
}
.loader:after { content: ""; display: block; background: url("https://cl.ly/1L3A0F2C0x2u/loading-overlay.png"); background-size: 100%; width: 100%; height: 100%; position: absolute; top: 0; left: 0;
}
.loader svg { display: block; height: 100%; width: 100%; transform: rotate(-90deg);
}
.loader svg circle { fill: rgba(0, 0, 0, 0); stroke-width: 24; stroke: rgba(255, 255, 255, 0.25); stroke-dasharray: 90; stroke-dashoffset: 180; animation: loading 2s linear infinite forwards; -webkit-animation: loading 2s linear infinite forwards;
}
keyframes loading { to { stroke-dashoffset: 0 }
}
@-webkit-keyframes loading { to { stroke-dashoffset: 0 }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="loader"> <svg viewBox="0 0 48 48"> <circle class="pie1" cx="24" cy="24" r="12"/> </svg>
</div>
</body>
</html>

WW1 Loader - Script Codes CSS Codes

body, html { background: #1d1d1d; width: 100%; height: 100%; margin: 0; padding: 0;
}
.loader { width: 120px; height: 120px; position: relative; top: 50%; margin: -60px auto;
}
.loader:after { content: ""; display: block; background: url("https://cl.ly/1L3A0F2C0x2u/loading-overlay.png"); background-size: 100%; width: 100%; height: 100%; position: absolute; top: 0; left: 0;
}
.loader svg { display: block; height: 100%; width: 100%; transform: rotate(-90deg);
}
.loader svg circle { fill: rgba(0, 0, 0, 0); stroke-width: 24; stroke: rgba(255, 255, 255, 0.25); stroke-dasharray: 90; stroke-dashoffset: 180; animation: loading 2s linear infinite forwards; -webkit-animation: loading 2s linear infinite forwards;
}
keyframes loading { to { stroke-dashoffset: 0 }
}
@-webkit-keyframes loading { to { stroke-dashoffset: 0 }
}
WW1 Loader - Script Codes
WW1 Loader - Script Codes
Home Page Home
Developer Chrisarmstrong
Username chrisarmstrong
Uploaded November 24, 2022
Rating 3
Size 2,242 Kb
Views 8,096
Do you need developer help for WW1 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!

Chrisarmstrong (chrisarmstrong) Script Codes
Name
Teleprompter
Quizmaster
A Pointless Experiment
Fibonacci
Stock Market
Platoon
Find home
A Pen by chrisarmstrong
The Auctioneer
Herdbook
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!