anri crd loader

<!-- © fiorefae. not recommended to use in carrd but if u can override every single original styling then go off-->


<html lang="en"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1" />

<style>
html {
font-size: 18pt;
}
html, body {
box-sizing: border-box;
margin: 0 auto;
height: 100%;
overflow: auto;
}

body {
width: 100%;
z-index: 0;
background-color: rgba(255, 255, 255, 0.769);
background-position: 0% 0%, center;
background-repeat: no-repeat;
background-size: cover, cover;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
body:after {
content: '';
background-color: #FFEBF3;
display: block;
height: 100%;
width: 100%;
left: 0;
top: 0;
opacity: 0;
pointer-events: none;
position: fixed;
z-index: 1;
transform: scale(1);
transition: opacity 1s ease-in-out 0s, visibility 1s 0s;
visibility: hidden;
}
body.is-loading:after {
opacity: 1;
visibility: visible;
}

.loader {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
min-height: 100%;
background-color: #ffe0ea;
display: flex;
align-items: center;
justify-content: center;
opacity: 1;
transition: opacity 2s ease, visibility 0s 0.5s;
z-index: 999;
}
.is-loading .loader {
opacity: 1;
}
.is-ready .loader {
opacity: 0;
visibility: hidden;
}
.loader.visible {
opacity: 1;
}
.loader.hidden {
opacity: 0;
pointer-events: none;
}

.dot {
border-radius: 10%;
background-color: #e3a6b3;
/*** the dot sizes spaces may vary based on ur html size. u can adjust here ***/
margin: .5rem;
height: 1rem;
width: 1rem;
animation: bounce 1s infinite ease;
transition: opacity 0.5s ease;
}
.dot4 {
animation-delay: .4s;
}
.dot3 {
animation-delay: .3s;
}
.dot2 {
animation-delay: .2s;
}
.dot.hidden {
opacity: 0;
}
@keyframes bounce {
0%, 100% { opacity:1;}
60% {
transform: translateY(15px);
opacity: 0;
}
}

#your-content {
display: none;
width: 24rem;
max-width: 100%;
margin: 0 0;
position: relative;
z-index: 1;
transition: opacity 0.5s ease, visibility 0.5s ease;
}
.is-ready #your-content {
display: block;
}

@media (max-width: 1920px) {}
@media (max-width: 1680px) {
 html { font-size: 13pt; }
}
@media (max-width: 1280px) {
html { font-size: 13pt; }
}
@media (max-width: 1024px) {}
@media (max-width: 980px) {
html { font-size: 11pt; }
}
@media (max-width: 736px) {
html { font-size: 9pt; }
}
</style>
</head>

<body class="is-loading">
<div class="loader">
<div class="dot dot1"></div>
<div class="dot dot2"></div>
<div class="dot dot3"></div>
<div class="dot dot4"></div>
</div>
<div id="your-content">

<!-- all ur content needs to be inside this div -->

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla tristique, augue quis egestas mattis, felis ligula tempor nulla, id ultricies odio elit nec lectus. Aliquam ornare magna vitae dolor egestas, vel pellentesque tellus pretium. Vivamus viverra odio at lacus vestibulum, ut imperdiet neque blandit. Aliquam tempus magna felis, non vehicula lorem faucibus at. Ut interdum varius lectus, sed ornare augue congue et. Duis sed lectus quam. Ut efficitur nec massa ullamcorper consequat.
</div>


<script>
(function() {
var on = addEventListener,
$body = document.body,
loader = document.querySelector('.loader'),
dots = document.querySelectorAll('.dot'),
loaderTimeout = setTimeout(function() {
$body.classList.add('with-loader');
loader.classList.add('visible');
}, 1000);

var loadHandler = function() {
clearTimeout(loaderTimeout);

setTimeout(function() {
dots.forEach(dot => {
dot.classList.add('hidden');
});

setTimeout(function() {
loader.classList.remove('visible');
loader.classList.add('hidden');

setTimeout(function() {
$body.classList.remove('is-loading');
$body.classList.add('is-ready');
}, 500);
}, 500);
}, 1500);
};

on('load', loadHandler);
})();
</script>
</body>