Jumping Worm Preloader - Loading animation with html/css
So we are going to know about how to create jumping worm preloader,jumping
preloader,loader with html/css..
How To Create Jumping Worm Preloader Loading Effect :
1. Create A Html File
2. Type Code That Gives You Below
3. Save As FileName.html (ex : myfile.html)
4. Run In Any Browser (ex : chrome,opera)
HTML CODE :
<body translate="no" >
<svg class="pl" width="240" height="240" viewBox="0 0 240
240">
<circle class="pl__ring
pl__ring--a" cx="120" cy="120" r="105" fill="none" stroke="#000"
stroke-width="20" stroke-dasharray="0 660" stroke-dashoffset="-330"
stroke-linecap="round" />
<circle class="pl__ring
pl__ring--b" cx="120" cy="120" r="35" fill="none" stroke="#000"
stroke-width="20" stroke-dasharray="0 220" stroke-dashoffset="-110"
stroke-linecap="round" />
<circle class="pl__ring
pl__ring--c" cx="85" cy="120" r="70" fill="none" stroke="#000"
stroke-width="20" stroke-dasharray="0 440" stroke-linecap="round"
/>
<circle class="pl__ring
pl__ring--d" cx="155" cy="120" r="70" fill="none" stroke="#000"
stroke-width="20" stroke-dasharray="0 440" stroke-linecap="round"
/>
</svg>
<script
src="https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-4793b73c6332f7f14a9b6bba5d5e62748e9d1bd0b5c52d7af6376f3d1c625d7e.js"></script>
</body>
CSS Code :
<style>
* {
border: 0;
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
font-size: calc(16px + (24 - 16) * (100vw - 320px) / (1280 -
320));
}
body {
background: #e3e4e8;
display: grid;
font: 1em/1.5 sans-serif;
place-items: center;
height: 100vh;
}
.pl {
width: 6em;
height: 6em;
}
.pl__ring {
animation: ringA 2s linear infinite;
}
.pl__ring--a {
stroke: #f42f25;
}
.pl__ring--b {
animation-name: ringB;
stroke: #f49725;
}
.pl__ring--c {
animation-name: ringC;
stroke: #255ff4;
}
.pl__ring--d {
animation-name: ringD;
stroke: #f42582;
}
/* Dark theme */
@media (prefers-color-scheme: dark) {
body {
background: #17181c;
}
}
/* Animations */
@keyframes ringA {
from, 4% {
stroke-dasharray: 0 660;
stroke-width: 20;
stroke-dashoffset: -330;
}
12% {
stroke-dasharray: 60 600;
stroke-width: 30;
stroke-dashoffset: -335;
}
32% {
stroke-dasharray: 60 600;
stroke-width: 30;
stroke-dashoffset: -595;
}
40%, 54% {
stroke-dasharray: 0 660;
stroke-width: 20;
stroke-dashoffset: -660;
}
62% {
stroke-dasharray: 60 600;
stroke-width: 30;
stroke-dashoffset: -665;
}
82% {
stroke-dasharray: 60 600;
stroke-width: 30;
stroke-dashoffset: -925;
}
90%, to {
stroke-dasharray: 0 660;
stroke-width: 20;
stroke-dashoffset: -990;
}
}
@keyframes ringB {
from, 12% {
stroke-dasharray: 0 220;
stroke-width: 20;
stroke-dashoffset: -110;
}
20% {
stroke-dasharray: 20 200;
stroke-width: 30;
stroke-dashoffset: -115;
}
40% {
stroke-dasharray: 20 200;
stroke-width: 30;
stroke-dashoffset: -195;
}
48%, 62% {
stroke-dasharray: 0 220;
stroke-width: 20;
stroke-dashoffset: -220;
}
70% {
stroke-dasharray: 20 200;
stroke-width: 30;
stroke-dashoffset: -225;
}
90% {
stroke-dasharray: 20 200;
stroke-width: 30;
stroke-dashoffset: -305;
}
98%, to {
stroke-dasharray: 0 220;
stroke-width: 20;
stroke-dashoffset: -330;
}
}
@keyframes ringC {
from {
stroke-dasharray: 0 440;
stroke-width: 20;
stroke-dashoffset: 0;
}
8% {
stroke-dasharray: 40 400;
stroke-width: 30;
stroke-dashoffset: -5;
}
28% {
stroke-dasharray: 40 400;
stroke-width: 30;
stroke-dashoffset: -175;
}
36%, 58% {
stroke-dasharray: 0 440;
stroke-width: 20;
stroke-dashoffset: -220;
}
66% {
stroke-dasharray: 40 400;
stroke-width: 30;
stroke-dashoffset: -225;
}
86% {
stroke-dasharray: 40 400;
stroke-width: 30;
stroke-dashoffset: -395;
}
94%, to {
stroke-dasharray: 0 440;
stroke-width: 20;
stroke-dashoffset: -440;
}
}
@keyframes ringD {
from, 8% {
stroke-dasharray: 0 440;
stroke-width: 20;
stroke-dashoffset: 0;
}
16% {
stroke-dasharray: 40 400;
stroke-width: 30;
stroke-dashoffset: -5;
}
36% {
stroke-dasharray: 40 400;
stroke-width: 30;
stroke-dashoffset: -175;
}
44%, 50% {
stroke-dasharray: 0 440;
stroke-width: 20;
stroke-dashoffset: -220;
}
58% {
stroke-dasharray: 40 400;
stroke-width: 30;
stroke-dashoffset: -225;
}
78% {
stroke-dasharray: 40 400;
stroke-width: 30;
stroke-dashoffset: -395;
}
86%, to {
stroke-dasharray: 0 440;
stroke-width: 20;
stroke-dashoffset: -440;
}
}
</style>
Java Script Code :
<script>
window.console = window.console || function(t) {};
var consoleWarn = window.console.warn;
function warn(){ consoleWarn.apply(console, arguments); }
window.open = function(){ warn("window.open is disabled.");
};
window.print = function(){ warn("window.print is
disabled."); };
window.alert = function(){ warn("window.alert is
disabled."); };
window.confirm = function(){ warn("window.confirm is disabled.");
};
window.prompt = function(){ warn("window.prompt is
disabled."); };
window.Notification = function() { warn("HTML5 notifications are
disabled."); };
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
Link After Subscribe:
Click On The Button And Subscribe My Youtube Channel To Open Link Then Get Back To The Page...
Tags
Script