Solar Eclipse Loader

Developer
Joni Trythall
Size
3,012 Kb
Views
18,216
  1. Solar Eclipse Loader Previews
  2. Solar Eclipse Loader HTML Codes
  3. Solar Eclipse Loader CSS Codes
  4. Solar Eclipse Loader JS Codes

How do I make an solar eclipse loader?

Re-creation of this Dribbble shot by Paulius Kairevicius <3. What is a solar eclipse loader? How do you make a solar eclipse loader? This script and codes were developed by Joni Trythall on 02 October 2022, Sunday.

Solar Eclipse Loader Previews
IQ Test

Solar Eclipse Loader - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Solar Eclipse Loader</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="sky"> <div class="moon"></div> <div class="shadow"></div> <svg class="outline"> <circle cx="50" cy="50" r="40" stroke="#FFAE00" stroke-width="3" fill="transparent" stroke-dasharray="255" stroke-dashoffset="255" stroke-linecap="round"></circle> </svg>
</div> <script src="js/index.js"></script>
</body>
</html>

Solar Eclipse Loader - Script Codes CSS Codes

body { -webkit-animation: sky-change 8s infinite linear; animation: sky-change 8s infinite linear;
}
.sky { position: relative; margin: 70px auto; width: 80px;
}
.moon { border-radius: 50%; background: #FFAE00; border: 1px solid #FFAE00; box-shadow: 0 0 4px #FFAE00; width: 80px; height: 80px;
}
.shadow { position: absolute; top: 1px; left: 91px; background: white; border-radius: 50%; width: 80px; height: 80px; -webkit-animation: shift 8s infinite linear; animation: shift 8s infinite linear;
}
.outline { position: absolute; top: -10px; left: -10px;
}
circle { -webkit-animation: draw 8s infinite ease-in-out; animation: draw 8s infinite ease-in-out; -webkit-transform-origin: center; transform-origin: center; -webkit-transform: rotate(-90deg) rotateX(-180deg); transform: rotate(-90deg) rotateX(-180deg);
}
@-webkit-keyframes sky-change { 50% { background: black; }
}
@keyframes sky-change { 50% { background: black; }
}
@-webkit-keyframes shift { 40% { -webkit-transform: translateX(-90px); transform: translateX(-90px); } 50% { -webkit-transform: translateX(-90px); transform: translateX(-90px); background: black; } 60% { -webkit-transform: translateX(-90px); transform: translateX(-90px); } 100% { -webkit-transform: translateX(-180px); transform: translateX(-180px); }
}
@keyframes shift { 40% { -webkit-transform: translateX(-90px); transform: translateX(-90px); } 50% { -webkit-transform: translateX(-90px); transform: translateX(-90px); background: black; } 60% { -webkit-transform: translateX(-90px); transform: translateX(-90px); } 100% { -webkit-transform: translateX(-180px); transform: translateX(-180px); }
}
@-webkit-keyframes draw { 10% { stroke-dashoffset: 255px; } 40% { stroke-dashoffset: 255px; } 50% { stroke-dashoffset: 0; } 60% { stroke-dashoffset: -255px; } 100% { stroke-dashoffset: -255px; }
}
@keyframes draw { 10% { stroke-dashoffset: 255px; } 40% { stroke-dashoffset: 255px; } 50% { stroke-dashoffset: 0; } 60% { stroke-dashoffset: -255px; } 100% { stroke-dashoffset: -255px; }
}

Solar Eclipse Loader - Script Codes JS Codes

/*
Re-creation of this Dribbble shot by Paulius Kairevicius:
https://dribbble.com/shots/1982200-Solar-Eclipse
*/
Solar Eclipse Loader - Script Codes
Solar Eclipse Loader - Script Codes
Home Page Home
Developer Joni Trythall
Username jonitrythall
Uploaded October 02, 2022
Rating 4.5
Size 3,012 Kb
Views 18,216
Do you need developer help for Solar Eclipse 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!

Joni Trythall (jonitrythall) Script Codes
Name
Shifty the CSS Crab
Animated Shopping Cart Icons
CSS Alarm Clock
Unite Loader
Spring Into CSS Grid
Hinged Twitter Button
Bounce Delay Loader
Flexbox Tinkering
Brian The CSS Bee
Frosted Glass Quote
Create amazing blog posts 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!