Loading
revision:
1. Create a loader.html and loader.css file and copy the pre-loader code in those files.
2. Create a wrapper around the code.
example - HTML
<div class="loader-wrapper">
<div class="loader"> <svg /*svg code*/></svg></div>
</div>
example - CSS
<style>
.loader-wrapper { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-color: whitesmoke; display: block; justify-content: center; align-items: center; z-index: 999; overflow: hidden; }
</style>
3. include the loading animation page in your HTML document by using <div id="loading"><div>
example
<body>
<div id="loading"></div>
</body>
4. in the CSS file, import the loader.css file using @import
example
<style>
@import url(/.../.../loader.css);
</style>
5. in the JavaScript file, call the loader.html file by using jQuery functions.
example
<script>
$.get("/.../html/loader.html", function(data){
$("#loading").replaceWith(data);
});
</script>
6. To trigger the loading, use this code:
<script>
$(window).on('load', function(){
setTimeout(removeLoader, 2000); //wait for page load PLUS two seconds.
});
function removeLoader(){
$( ".loader-wrapper" ).fadeOut(500, function() {
// fadeOut complete. Remove the loading div
$( ".loader-wrapper" ).remove(); //makes page more lightweight
});
}
</script>
7. Hide the loading animation when the loading is complete. The window load event will trigger when all the elements have been completely loaded. Use jQuery fadeOut method to hide the loader.
<!-- Preloader -->
<div id="preloader">
<div class="spinner"></div>
</div>
<!-- Main Content -->
<div id="content">
<h1>Welcome to My Website!</h1>
<p>This is an example of a preloader.</p>
</div>
<style>
/* styles.css */
body, html {margin: 0; padding: 0; width: 100%; height: 100%; overflow: hidden; /* Prevent scrolling while the preloader is active */}
#preloader {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #fff; /* Background color of the preloader */
display: flex; justify-content: center; align-items: center; z-index: 9999; /* Ensure it stays above all other content */ }
.spinner { border: 8px solid #f3f3f3; /* Light gray border */ border-top: 8px solid #3498db; /* Blue border for the spinning effect */
border-radius: 50%; width: 60px; height: 60px; animation: spin 1s linear infinite; /* Animation for spinning */ }
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#content {display: none; /* Hide the main content initially */}
</style>
<script>
// script.js
window.addEventListener('load', () => {
const preloader = document.getElementById('preloader');
const content = document.getElementById('content');
// Fade out the preloader
preloader.style.opacity = '0';
setTimeout(() => {
preloader.style.display = 'none';
content.style.display = 'block'; // Show the main content
document.body.style.overflow = 'auto'; // Enable scrolling
}, 500); // Adjust the duration to match the fade-out effect
});
</script>
HTML: the #preloader div contains the spinner. The #content div holds the main content of the website, which is hidden initially.
CSS: the #preloader is styled to cover the entire screen with a "fixed" position. The .spinner creates a circular spinning animation using the @keyframes rule.
JavaScript: the window.addEventListener('load', ...) ensures the preloader hides only after all resources (images, scripts, etc.) have been fully loaded. A fade-out effect is applied to the preloader before hiding it, and the main content is displayed afterward.
custom spinner : replace the default spinner with a custom image or SVG for a more unique look.
loading text : add text like "Loading..." or a progress bar to inform users about the loading process.
transition effects : use CSS transitions or animations to make the preloader disappear smoothly.
performance optimization : ensure your website loads quickly to minimize the time the preloader is visible.
<div id="preloader">
<div class="loader"></div> <!-- You can customize this part -->
</div>
<style>
/* Preloader container */
#preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #ffffff; /* Background color */ display: flex;
justify-content: center; align-items: center; z-index: 9999; /* Ensure it's on top of everything */}
/* Loader animation */
.loader {border: 8px solid #f3f3f3; /* Light grey */border-top: 8px solid #3498db; /* Blue */border-radius: 50%; width: 60px; height: 60px; animation: spin 1s linear infinite; /* Spin animation */}
/* Keyframes for spin animation */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
<script>
window.addEventListener('load', function() {
const preloader = document.getElementById('preloader');
preloader.style.display = 'none'; // Hide the preloader
});
</script>
custom animations: replace the spinner with a GIF, SVG animation, or Lottie animation.
fade-out effect: add a fade-out transition to the preloader using CSS:
<style>
#preloader { transition: opacity 0.5s ease-out;}
</style>
update the JavaScript
<script>
window.addEventListener('load', function() {
const preloader = document.getElementById('preloader');
preloader.style.opacity = '0'; // Fade out
setTimeout(() => {
preloader.style.display = 'none'; // Hide after fade
}, 500); // Match the transition duration
});
</script>
delay preload hiding : if you want to ensure the preloader stays visible for a minimum time:
<script>
window.addEventListener('load', function() {
setTimeout(function() {
const preloader = document.getElementById('preloader');
preloader.style.display = 'none';
}, 2000); // 2 seconds delay
});
</script>
<div id="loader">
<div id="shadow"></div>
<div id="box"></div>
</div>
<style>
#loader {display: flex; animation: loader 5s linear infinite; position: relative; top: 1vw; left: 2vw; margin-bottom: 5vw;}
@keyframes loader {
0% { left: -5vw; }
100% {left: 110%; }
}
#box {width: 4vw; height: 4vw; background: #fff; animation: animate 1.5s linear infinite; position: absolute; top: 5; left: 0; border-radius: 0.05vw;}
@keyframes animate {
17% {border-bottom-right-radius: 0.15vw;}
25% { transform: translateY(1vw) rotate(22.5deg); }
50% {transform: translateY(2vw) scale(1,.9) rotate(45deg) ; border-bottom-right-radius: 20vw;}
75% { transform: translateY(3vw) rotate(67.5deg); }
100% { transform: translateY(0) rotate(90deg); }
}
#shadow {width: 3vw; height: 1vw; background: #000; opacity: 0.1; position: absolute; top: 5vw; left: 0; border-radius: 50%; animation: shadow 1.5s linear infinite; }
@keyframes shadow {
50% { transform: scale(1.2,1);}
}
</style>
code:
<div class="canvas canvas1">
<div class="spinner1 spinnerMax">
<div class="spinner1 spinnerMid">
<div class="spinner1 spinnerMin"></div>
</div>
</div>
</div>
<style>
.canvas {align-items: center; background: skyblue; border-radius: 50%;
box-shadow: 0 0.5vw 2vw rgba(0,0,0,0.2); display: flex; width: 20vw;
height: 20vw; justify-content: center; margin: 1vw 1vw 2vw 10vw;}
.spinner1 {align-items: center; border: 1.3vw solid transparent;
border-top:1.3vw solid red; border-right: 1.3vw solid darkgreen;
border-radius: 100%; display: flex; justify-content: center;}
.spinnerMax {animation: spinnerOne 3s linear infinite; height: 6vw; width: 6vw;}
.spinnerMid {animation: spinnerOne 5s linear infinite; width: 3.6vw;height: 3.6vw;}
.spinnerMin {animation: spinnerOne 5s linear infinite; height: 1.8vw; width: 1.8vw;}
@keyframes spinnerOne {
0% {transform: rotate(0deg)}
100% {transform: rotate(360deg)}
}
</style>
code:
<div class="canvas canvas2">
<div class="spinner2"></div>
<div class="hourHand"></div>
<div class="dot"></div>
</div>
<style>
.canvas {align-items: center; background: skyblue; border-radius: 50%;
box-shadow: 0 0.5vw 2vw rgba(0,0,0,0.2); display: flex; width: 20vw;
height: 20vw; justify-content: center; margin: 1vw 1vw 2vw 10vw;}
.canvas2 {position: relative;}
.spinner2 {animation: spinnerTwo 12s linear infinite; background: seagreen;
border-radius: 25vw; height: 7vw; transform-origin: top;
position: absolute; top: 50%; width: .8vw;}
.hourHand {animation: spinnerTwo 30s linear infinite; background: lightgreen;
border-radius: 50vw; height: 4vw;transform-origin: top; position: absolute;
top: 50%; width: .8vw;}
.dot {background: darkgreen;border-radius: 100%; height: 1vw; width: 1vw;}
@keyframes spinnerTwo {
0% {transform: rotate(0deg)}
100% {transform: rotate(360deg)}
}
</style>
<div class="canvas canvas3">
<div class="spinner3"></div>
</div>
<style>
.canvas {align-items: center; background: skyblue; border-radius: 50%;
box-shadow: 0 0.5vw 2vw rgba(0,0,0,0.2); display: flex; width: 20vw;
height: 20vw; justify-content: center; margin: 1vw 1vw 2vw 10vw;}
.spinner3 {animation: spinnerThree 10s linear infinite; background: dodgerblue;
border-radius: 100%; width: 10vw; height: 10vw;}
@keyframes spinnerThree {
0%, 35% {background: darkgreen; transform: scale(1);}
20%, 50% {background: darkred;transform: scale(1.3);}
}
</style>
code:
<div class="canvas canvas4">
<div class="spinner4"></div>
</div>
<style>
.canvas {align-items: center; background: skyblue; border-radius: 50%;
box-shadow: 0 0.5vw 2vw rgba(0,0,0,0.2); display: flex; width: 20vw;
height: 20vw; justify-content: center; margin: 1vw 1vw 2vw 10vw;}
.spinner4 {animation: spinnerFour 4s linear infinite;
border: solid 2.5vw transparent; border-top: solid 2.5vw darkblue;
border-radius: 100%; width: 10vw; height: 10vw;}
@keyframes spinnerFour {
0% {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}
</style>
code:
<div class="canvas canvas5">
<div class="spinner5"></div>
</div>
<style>
.canvas {align-items: center; background: skyblue; border-radius: 50%;
box-shadow: 0 0.5vw 2vw rgba(0,0,0,0.2); display: flex; width: 20vw;
height: 20vw; justify-content: center; margin: 1vw 1vw 2vw 10vw;}
.spinner5 {animation: spinnerFive 1s linear infinite; border: solid 2.5vw red;
border-right: solid 2.5vw transparent; border-left: solid 2.5vw transparent;
border-radius: 100%; width: 0; height: 0;}
@keyframes spinnerFive {
0% {transform: rotate(0deg);}
50% {transform: rotate(180deg)}
100% {transform: rotate(360deg);}
}
</style>
code:
<style>
.canvas {align-items: center; background: skyblue; border-radius:
50%; box-shadow: 0 0.5vw 2vw rgba(0,0,0,0.2); display: flex;
width: 20vw; height: 20vw; justify-content: center;
margin: 1vw 1vw 2vw 10vw;}
.spinner6 {background: #4DB6AC; border-radius: 50%; height: 1vw;
margin: .1vw; width: 1vw;}
.p1 {animation: fall 1s linear .3s infinite;}
.p2 {animation: fall 1s linear .2s infinite;}
.p3 {animation: fall 1s linear .1s infinite;}
.p4 {animation: fall 1s linear infinite;}
@keyframes fall {
0% {transform: translateY(-1.5vw);}
25%, 75% {transform: translateY(0);}
100% {transform: translateY(-1.5vw);}
}
</style>
code:
<div class="timer"></div>
<style>
.timer{ width: 10vw; height: 10vw; box-shadow: 0px 0px 0px 0.2vw red;
border-radius: 50%; position: relative; margin: 0vw 0 0 13vw;
background-color:blue;}
.timer:after{position: absolute; content:""; background-color: yellow; }
.timer:before{position: absolute; content:""; background-color: black;}
.timer:after{ width: 5vw; height: 0.2vw; top: 5vw; left: 5vw;
-webkit-transform-origin: 1px 1px; -moz-transform-origin: 1px 1px;
transform-origin: 1px 1px; -webkit-animation: minhand 8s linear infinite;
-moz-animation: minhand 8s linear infinite;
animation: minhand 8s linear infinite;}
.timer:before{width: 3vw;height: 0.2vw; top: 5vw; left: 5vw;
-webkit-transform-origin: 1px 1px; -moz-transform-origin: 1px 1px;
transform-origin: 1px 1px; -webkit-animation: hrhand 16s linear infinite;
-moz-animation: hrhand 16s linear infinite;
animation: hrhand 16s linear infinite;}
@-webkit-keyframes minhand{
0%{-webkit-transform:rotate(0deg)}
100%{-webkit-transform:rotate(360deg)}
}
@-moz-keyframes minhand{
0%{-moz-transform:rotate(0deg)}
100%{-moz-transform:rotate(360deg)}
}
@keyframes minhand{
0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}
}
@-webkit-keyframes hrhand{
0%{-webkit-transform:rotate(0deg)}
100%{-webkit-transform:rotate(360deg)}
}
@-moz-keyframes hrhand{
0%{-moz-transform:rotate(0deg)}
100%{-moz-transform:rotate(360deg)}
}
@keyframes hrhand{
0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}
}
</style>
code:
<div class="typing_loader"></div>
</style>
.typing_loader{width: 4vw; height: 4vw; border-radius: 50%;
-webkit-animation: typing 3s linear infinite alternate;
-moz-animation: typing 3s linear infinite alternate;
animation: typing 3s linear infinite alternate;
margin: 2vw 0vw 0vw 6vw; position: relative; left: -1vw;
background-color:blue;}
@-webkit-keyframes typing{
0%{background-color: lightgreen; box-shadow: 12vw 0vw 0vw 0vw grey, 24vw 0vw 0vw 0vw darkgrey;}
25%{ background-color: seagreen; box-shadow: 12vw 0vw 0vw 0vw darkgrey, 24vw 0vw 0vw 0vw grey;}
75%{ background-color: darkgreen; box-shadow: 12vw 0vw 0vw 0vw blue, 24vw 0vw 0vw 0vw skyblue;}
}
@-moz-keyframes typing{
0%{background-color: lightgreen; box-shadow: 12vw 0vw 0vw 0vw grey, 24vw 0vw 0vw 0vw darkgrey;}
25%{ background-color: seagreen; box-shadow: 12vw 0vw 0vw 0vw darkgrey, 24vw 0vw 0vw 0vw grey;}
75%{ background-color: darkgreen; box-shadow: 12vw 0vw 0vw 0vw blue, 24vw 0vw 0vw 0vw skyblue;}
}
@keyframes typing{
0%{background-color: lightgreen; box-shadow: 12vw 0vw 0vw 0vw grey, 24vw 0vw 0vw 0vw darkgrey;}
25%{ background-color: seagreen; box-shadow: 12vw 0vw 0vw 0vw darkgrey, 24vw 0vw 0vw 0vw grey;}
75%{ background-color: darkgreen; box-shadow: 12vw 0vw 0vw 0vw blue, 24vw 0vw 0vw 0vw skyblue;}
}
</style>
code:
<div class="location_indicator"></div>
<style>
.location_indicator{margin: 2vw 0vw 0vw 6vw; position: relative; margin-bottom: 15vw;}
.location_indicator:before, .location_indicator:after{position: absolute; content: "";}
.location_indicator:before{ width: 8vw; height: 8vw; background-color:aliceblue;
border-radius: 100% 100% 100% 0; box-shadow: 0vw 0vw 0.5vw 0.5vw green;
-webkit-animation: mapping 2s linear infinite;
-moz-animation: mapping 2s linear infinite; animation: mapping 2s linear infinite;
-webkit-transform: rotate(-46deg); -moz-transform: rotate(-46deg); transform: rotate(-46deg);}
.location_indicator:after{ width: 8vw; height: 4vw; border-radius: 100%;
background-color: skyblue; top: 8vw; z-index: -1;}
@-webkit-keyframes mapping{
0% {top: 0;}
50%{top: -2vw;}
100% {top:0; }
}
@-moz-keyframes mapping{
0% {top: 0;}
50%{top: -2vw;}
100% {top:0; }
}
@keyframes mapping{
0% {top: 0;}
50%{top: -2vw;}
100% {top:0; }
}
</style>
code:
<div class="dashboard"></div>
<style>
.dashboard{width: 10vw; height: 10vw; margin: 3vw 0vw 0vw 12vw; border: 1vw crimson solid;
border-radius: 100%; position: relative; overflow: hidden; z-index: 1;
background-color: lightgrey;}
.dashboard:after, .dashboard:before{position: absolute; content: ""; }
.dashboard:after{ width: 10vw; height: 1vh; top: 5vw; left: 5vw;
-webkit-transform-origin: 1vw 1vw; -moz-transform-origin: 1vw 1vw;
transform-origin: 1vw 1vw; background-color: black;
-webkit-animation: dashboard_hand 12s linear infinite alternate;
-moz-animation: dashboard_hand 2s linear infinite alternate;
animation: dashboard_hand 12s linear infinite alternate;}
.dashboard:before{width: 12vw; height: 3vw; right:-2;
background-color: black; top:5vw;}
@-webkit-keyframes dashboard_hand{
0%{ -webkit-transform: rotate(-160deg);}
100%{ -webkit-transform: rotate(-20deg);}
}
@-moz-keyframes dashboard_hand{
0%{ -moz-transform: rotate(-160deg);}
100%{ -moz-transform: rotate(-20deg);}
}
@keyframes dashboard_hand{
0%{ transform: rotate(-160deg);}
100%{ transform: rotate(-20deg);}
}
</style>
code:
<div class="battery"></div>
<style>
.battery{width: 10vw; height: 4vw; border: 0.2vw brown solid; border-radius: 0.5vw;
position: relative; -webkit-animation: charge 10s linear infinite;
-moz-animation: charge 10s linear infinite;
animation: charge 10s linear infinite; top: 2vw; margin: 2vw 0vw 0vw 12vw;}
.battery:after{ width: 0.9vw; height: 0.9vw; background-color: red;
border-radius: 0px 1px 1px 0px; position: absolute; content: "";
top: 1.5vw; right: -0.9vw;}
@-webkit-keyframes charge{
0%{box-shadow: inset 0vw 0vw 0vw silver;}
100%{box-shadow: inset 8vw 0vw 0vw silver;}
}
@-moz-keyframes charge{
0%{box-shadow: inset 0vw 0vw 0vw silver;}
100%{box-shadow: inset 8vw 0vw 0vw silver;}
}
@keyframes charge{
0%{box-shadow: inset 0vw 0vw 0vw silver;}
100%{box-shadow: inset 8vw 0vw 0vw silver;}
}
</style>
code:
<div class="magnifier"></div>
<style>
.magnifier{width: 8vw; height: 8vw; box-shadow: 0vw 0vw 0.1vw .4vw ; border-radius: 50%;
position: relative; margin: 3vw 0vw 0vw 12vw; color: CadetBlue;
-webkit-animation: magnify 4s linear infinite alternate;
-moz-animation: magnify 4s linear infinite alternate;
animation: magnify 4s linear infinite alternate;}
.magnifier:after, .magnifier:before{position: absolute;content: "";}
.magnifier:before{ content: "? ?"; font-size: 4vw; left:2vw; text-align: center;
top: 2vw; color:green;}
.magnifier:after{ width: 2vw; height: 6vw; background-color: CadetBlue;
bottom: -3vw; left: 9vw; border-radius: 2px; -webkit-transform: rotate(-55deg);
moz-transform: rotate(-55deg); transform: rotate(-55deg);}
@-webkit-keyframes magnify{
0%{-webkit-transform: scale(1); }
100%{-webkit-transform: scale(1.7);}
}
@-moz-keyframes magnify{
0%{-moz-transform: scale(1); }
100%{-moz-transform: scale(1.7);}
}
@keyframes magnify{
0%{transform: scale(1); }
100%{transform: scale(1.7);}
}
</style>
code:
<div class="evolve"></div>
<style>
.evolve{margin: 3vw 0vw 0vw 12vw; width: 16vw; height: 14vw; border: 0.3vw blue solid;
border-radius: 50%; -webkit-animation:
rotation 4s ease-in-out infinite; -moz-animation: rotation 4s ease-in-out infinite;
animation: rotation 4s ease-in-out infinite;}
.evolve:after{ width: 2vw; height: 2vw; background-color: red; border-radius: 100%;
position: absolute; content: "⚽"; padding:0.5vw;}
@-webkit-keyframes rotation{
0%{-webkit-transform: rotate(0deg);}
100%{-webkit-transform: rotate(360deg);}
}
@-moz-keyframes rotation{
0%{-moz-transform: rotate(0deg);}
100%{-moz-transform: rotate(360deg);}
}
@keyframes rotation{
0%{transform: rotate(0deg);}
100%{transform: rotate(360deg);}
}
</style>
code:
<div class="eyes"></div>
<style>
.eyes{width: 8vw; height: 8vw; background-color: lightgrey; border-radius: 50%;
box-shadow: 9vw 0vw 0vw 0.3vw lightgrey; position: relative;
margin: 3vw 0vw 0vw 12vw; }
.eyes:after{background-color: black; width: 5vw; height: 4vw;
box-shadow: 9vw 0vw 0vw 0vw black; border-radius: 50%; left: 0.5vw; top: 2vw;
right:0.5vw; position: absolute; content: "";
-webkit-animation: eyeball 4s linear infinite alternate;
-moz-animation: eyeball 4s linear infinite alternate;
animation: eyeball 4s linear infinite alternate;}
@-webkit-keyframes eyeball{
0%{left: 3vw;}
100%{right: 0vw;}
}
@-moz-keyframes eyeball{
0%{left: 3vw;}
100%{right: 0vw;}
}
@keyframes eyeball{
0%{left: 3vw;}
100%{right: 0vw;}
}
</style>
code:
<div class="cup"></div>
<style>
.cup{width: 5vw; height: 7vw; border: 0.5vw red solid; border-radius: 0vw 0vw 0.8vw 0.8vw;
position: relative; margin: 4vw 0vw 0vw 12vw;}
.cup:after, .cup:before{position: absolute; content: "";}
.cup:after{width: 2.4vw; height: 3.2vw; border: 0.5vw red solid; border-left: none;
border-radius: 0vw 4vw 4vw 0vw; left: 5.2vw;}
.cup:before{width: 0.3vw; height: 5vw; background-color: rgba(255,255,255,1);
top: -2vw; left: 1vw; box-shadow: 2vw 0vw 0vw 0vw rgba(255,255,255,1),
1vw -1vw 0vw 0vw rgba(255,255,255,1),
1vw 0vw 1vw 0vw rgba(255,255,255,1); -webkit-animation: steam 2s linear infinite alternate;
-moz-animation: steam 2s linear infinite alternate; animation: steam 2s linear infinite alternate;}
@-webkit-keyframes steam{
0%{height: 0vw;}
100%{height: 1.5vw;}
}
@-moz-keyframes steam{
0%{height: 0vw;}
100%{height: 1.5vw;}
}
@keyframes steam{
0%{height: -0vw}
100%{height: 1.5vw;}
}
</style>
code:
<div class="square"></div>
<style>
.square{width: 12vw; height: 12vw; border: 0.3vw blue solid; margin: 3vw 0vw 0vw 12vw;
position: relative; -webkit-animation: fill_color 5s linear infinite;
-moz-animation: fill_color 5s linear infinite;
animation: fill_color 5s linear infinite;}
.square:after{ width: 2vw; height: 2vw; position: absolute; content: "❀";
background-color: green; top: -1.2vw; left: 1vw;
-webkit-animation: square_check 5s ease-in-out infinite;
-moz-animation: square_check 5s ease-in-out infinite;
animation: square_check 5s ease-in-out infinite;}
@-webkit-keyframes square_check{
0%{left: -2vw; top:-2vw;}
25%{ left: 12vw; top: -2vw;}
50%{ left: 12vw; top: 12vw;}
75%{ left: -2vw; top: 12vw;}
100%{ left: -2vw; top: -2vw;}
}
@-moz-keyframes square_check{
0%{left: -2vw; top:-2vw;}
25%{ left: 12vw; top: -2vw;}
50%{ left: 12vw; top: 12vw;}
75%{ left: -2vw; top: 12vw;}
100%{ left: -2vw; top: -2vw;}
}
@keyframes square_check{
0%{left: -2vw; top:-2vw;}
25%{ left: 12vw; top: -2vw;}
50%{ left: 12vw; top: 12vw;}
75%{ left: -2vw; top: 12vw;}
100%{ left: -2vw; top: -2vw;}
}
@-webkit-keyframes fill_color{
0%{ box-shadow: inset 0vw 0vw 0vw 0vw green;}
50%{ box-shadow: inset 0vw -8vw 0vw 0vw lightblue;}
100%{ box-shadow: inset 0vw 0vw 0vw 0vw green;}
}
@-moz-keyframes fill_color{
0%{ box-shadow: inset 0vw 0vw 0vw 0vw green;}
50%{ box-shadow: inset 0vw -8vw 0vw 0vw lightblue;}
100%{ box-shadow: inset 0vw 0vw 0vw 0vw green;}
}
@keyframes fill_color{
0%{ box-shadow: inset 0vw 0vw 0vw 0vw green;}
50%{ box-shadow: inset 0vw -8vw 0vw 0vw lightblue;}
100%{ box-shadow: inset 0vw 0vw 0vw 0vw green;}
}
</style>
code:
<div class="circle"></div>
<style>
.circle{ margin: 5vw 0vw 0vw 12vw; position: relative; width: 3vw; height: 3vw;
background-color: red; box-shadow: -3.6vw 0vw 0vw seagreen; border-radius: 50%;
-webkit-animation: circle_classic 2s ease-in-out infinite alternate;
-moz-animation: circle_classic 2s ease-in-out infinite alternate;
animation: circle_classic 2s ease-in-out infinite alternate;}
@-webkit-keyframes circle_classic{
0%{ opacity: 0.1; -webkit-transform: rotate(0deg) scale(0.5);}
100%{opacity: 1; -webkit-transform: rotate(420deg) scale(1.5);}
}
@-moz-keyframes circle_classic{
0%{ opacity: 0.1; -moz-transform: rotate(0deg) scale(0.5);}
100%{opacity: 1; -moz-transform: rotate(420deg) scale(1.5);}
}
@keyframes circle_classic{
0%{ opacity: 0.1; transform: rotate(0deg) scale(0.5);}
100%{opacity: 1; transform: rotate(420deg) scale(1.5);}
}
</style>
code:
<div class="expand"></div>
<style>
.expand{margin: 4vw 0vw 0vw 12vw; width: 3vw; height: 4vw; opacity: 0.5; position: relative;
box-shadow: 1.4vw 0vw 0vw 0vw red, 2.8vw 0vw 0vw 0vw orange, 4.2vw 0vw 0vw 0vw yellow,
5.6vw 0vw 0vw 0vw green, 7.4vw 0vw 0vw 0vw darkblue, 8.8vw 0vw 0vw 0vw black;
-webkit-animation: rain 2s linear infinite alternate; -moz-animation: rain 2s linear infinite alternate;
animation: rain 2s linear infinite alternate;}
.expand:after{width: 4vw; height: 4vw;position: absolute; content: "";
background-color: rgba(255,255,255,1); top: 0px; opacity: 1;
-webkit-animation: line_flow 3s linear infinite reverse;
-moz-animation: line_flow 3s linear infinite reverse;
animation: line_flow 3s linear infinite reverse;}
@-webkit-keyframes rain{
0%{box-shadow: 1.2vw 0vw 0vw 0vw red, 2.4vw 0vw 0vw 0vw orange,3.6vw 0vw 0vw 0vw yellow,
4.8vw 0vw 0vw 0vw green, 6vw 0vw 0vw 0vw darkblue, 7.2vw 0vw 0vw 0vw black;}
100%{box-shadow: 1.2vw 0vw 0vw 0vw red, 2.4vw 0vw 0vw 0vw orange,3.6vw 0vw 0vw 0vw yellow,
4.8vw 0vw 0vw 0vw green, 6vw 0vw 0vw 0vw darkblue, 7.2vw 0vw 0vw 0vw black; opacity: 1;}
}
@-moz-keyframes rain{
0%{box-shadow: 1.2vw 0vw 0vw 0vw red, 2.4vw 0vw 0vw 0vw orange,3.6vw 0vw 0vw 0vw yellow,
4.8vw 0vw 0vw 0vw green, 6vw 0vw 0vw 0vw darkblue, 7.2vw 0vw 0vw 0vw black;}
100%{box-shadow: 1.2vw 0vw 0vw 0vw red, 2.4vw 0vw 0vw 0vw orange,3.6vw 0vw 0vw 0vw yellow,
4.8vw 0vw 0vw 0vw green, 0vw 0vw 0vw 0vw darkblue, 7.2vw 0vw 0vw 0vw black; opacity: 1;}
}
@keyframes rain{
0%{box-shadow: 1.4vw 0vw 0vw 0vw red,2.8vw 0vw 0vw 0vw orange, 4.2vw 0vw 0vw 0vw yellow,
5.6vw 0vw 0vw 0vw green, 7.4vw 0vw 0vw 0vw darkblue, 8.8vw 0vw 0vw 0vw black;}
100%{box-shadow: 1.4vw 0vw 0vw 0vw red,2.8vw 0vw 0vw 0vw orange, 4.2vw 0vw 0vw 0vw yellow,
5.6vw 0vw 0vw 0vw green, 7.4vw 0vw 0vw 0vw darkblue, 8.8vw 0vw 0vw 0vw black; opacity: 1;}
}
@-webkit-keyframes line_flow{
0%{ width: 0px;}
100%{width: 7vw;}
}
@-moz-keyframes line_flow{
0%{ width: 0px;}
100%{width: 40px;}
}
@keyframes line_flow{
0%{ width: 0px;}
100%{width: 10vw;}
}
</style>