.pipeline-loader { display: flex; align-items: center; font-family: "Outfit", sans-serif; font-size: 15px; font-weight: 500; color: #333; } .label { margin-bottom: 6px; transition: opacity 0.5s ease-in-out; color: #fff; display: inline-block; vertical-align: middle; } .fade { opacity: 1; animation: fadeIn 0.5s ease-in-out; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Progress bar */ .flow { width: 220px; height: 6px; background: #e9ecef; border-radius: 6px; position: relative; overflow: hidden; } .flow::before { content: ""; position: absolute; left: -40%; width: 40%; height: 100%; background: linear-gradient(90deg, #4dabf7, #74c0fc, #4dabf7); border-radius: 6px; animation: moveFlow 1.5s linear infinite; } @keyframes moveFlow { 0% { left: -40%; } 50% { left: 60%; } 100% { left: 110%; } }