查看效果图
<style>
:root {
--thm-font: 'Roboto', sans-serif;
--heading-font: 'Poppins', sans-serif;
--thm-base: #ffbc45;
--thm-base-rgb: 255, 188, 69;
--thm-primary: #ff5959;
--thm-primary-rgb: 255, 89, 89;
--thm-black: #162f62;
--thm-black-rgb: 22, 47, 98;
}
/* preloader */
.preloader {
position: fixed;
width: 100%;
height: 100%;
z-index: 999999999;
background-color: #fff;
top: 0;
left: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
}
.lds-ripple {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.lds-ripple div {
position: absolute;
border: 4px solid var(--thm-base);
opacity: 1;
border-radius: 50%;
-webkit-animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
-webkit-animation-delay: -0.5s;
animation-delay: -0.5s;
}
@-webkit-keyframes lds-ripple {
0% {
top: 36px;
left: 36px;
width: 0;
height: 0;
opacity: 1;
}
100% {
top: 0px;
left: 0px;
width: 72px;
height: 72px;
opacity: 0;
}
}
@keyframes lds-ripple {
0% {
top: 36px;
left: 36px;
width: 0;
height: 0;
opacity: 1;
}
100% {
top: 0px;
left: 0px;
width: 72px;
height: 72px;
opacity: 0;
}
}
</style>
<div class="preloader">
<div class="lds-ripple">
<div></div>
<div></div>
</div>
</div>
预览效果