galaxy/loaders/shadowmurphy_wicked-fish-61.html

52 lines
943 B
HTML

<div class="loader">
<div class="shape"></div>
</div>
<style>
/* From Uiverse.io by shadowmurphy - Tags: gradient, loader, animated */
.loader {
display: flex;
justify-content: flex-start;
align-items: center;
width: 200px;
height: 15px;
background-color: rgb(2, 2, 17);
border-radius: 10px;
overflow: hidden;
position: relative;
margin-top: 15px;
}
.shape {
width: 50px;
height: 15px;
background-image: linear-gradient(144deg, #AF40FF, #5B42F3 50%, #00DDEB);
border-radius: 25px;
position: absolute;
animation: slide 1.9s linear infinite;
background-size: 200%;
}
@keyframes slide {
0% {
left: 0;
}
50% {
left: calc(100% - 50px);
}
100% {
left: 0;
}
}
@keyframes gradientChange {
0%, 100% {
background-image: linear-gradient(144deg, #AF40FF, #5B42F3 50%, #00DDEB);
}
50% {
background-image: linear-gradient(144deg, #00DDEB, #5B42F3 50%, #AF40FF);
}
}
</style>