Canlı Önizleme
Sunucu Yükleniyor... 85%
Nasıl Kullanılır?
Yüzdelik değeri dinamik vermek için HTML'deki 'style=width: 85%' alanını ve CSS içindeki '100% { width: 85%; }' anahtar karesini (keyframe) projenizdeki değişkenlere bağlayabilirsiniz.
Kaynak Kodlar
HTML
<div class="linear-progress-container">
<div class="progress-title"><span>Sunucu Yükleniyor...</span> <span>85%</span></div>
<div class="linear-bg">
<div class="linear-bar" style="width: 85%;"></div>
</div>
</div>CSS
.linear-progress-container { width: 100%; max-width: 400px; font-family: 'Inter', sans-serif; }
.progress-title { display: flex; justify-content: space-between; color: #a0a0b0; font-size: 14px; margin-bottom: 8px; font-weight: 600; }
.progress-title span:last-child { color: #50fa7b; }
.linear-bg { width: 100%; height: 12px; background: rgba(255,255,255,0.05); border-radius: 10px; overflow: hidden; box-shadow: inset 0 1px 3px rgba(0,0,0,0.5); }
.linear-bar { height: 100%; background: linear-gradient(90deg, #6C5CE7, #00cec9); border-radius: 10px; box-shadow: 0 0 10px rgba(0,206,201,0.5); animation: fill-bar 1.5s cubic-bezier(0.25, 0.8, 0.25, 1) forwards; transform-origin: left; width: 0; }
@keyframes fill-bar { 0% { width: 0; } 100% { width: 85%; } }