三個寬度變化動畫
#loading-010-three-width-change-animation
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>
<style type="text/tailwindcss">
.content {
@apply flex items-end space-x-5;
}
.left-line {
@apply w-8 rounded-full h-8 bg-orange-300 animate-[loading_1.5s_infinite_linear];
}
.mid-line {
@apply w-8 rounded-full h-8 bg-orange-300 animate-[loading_1.5s_0.5s_infinite_linear];
}
.right-line {
@apply w-8 rounded-full h-8 bg-orange-300 animate-[loading_1.5s_1s_infinite_linear];
}
@keyframes loading {
0% {
width: 32px;
}
50% {
width: 80px;
}
100% {
width: 32px;
}
}
</style>
<body class="min-h-svh flex items-center justify-center w-full">
<div class="content">
<div class="left-line"></div>
<div class="mid-line"></div>
<div class="right-line"></div>
</div>
</body>
</html>