dev

ProgressBar bir ilerleme çubuğu oluşturan bir stil sayfasıdır.

Installation

CSS

HTML

Not: Ögeleri mobil cihazlarda satır içi görüntülemek için <span> kullanın.

Özelleştirme

Temel CSS parçacığından, ProgressBar'ı daha süslü stille özelleştirebilirsiniz. Yukarıdaki CSS'den önce aşağıdaki kodlardan herhangi birini ekleyin.

Yeniden renklendirme (düz)

[Kaynak] 

.progress { color: #fff; }
.progress > .bar { background: #555; }

Yeniden renklendirme (gradyan)

[Kaynak] 

.progress { color: #fff; }
.progress > .bar {
    background:
        -webkit-linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, .1) 33%, rgba(0,0, 0, .1) 66%, transparent 66%),
        -webkit-linear-gradient(top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .25)),
        -webkit-linear-gradient(left, #09c, #f44);
}

Yuvarlak çubuk

[Kaynak] 

.round.progress {
    border-radius: 99px;
    overflow: hidden;
}

İnce çubuk

[Kaynak] 

.progress,
.progress > .bar { height: 6px; }

Ek gölge

[Kaynak] 

.progress { box-shadow: inset 0 1px 5px #aaa; }

Animasyon

[Kaynak] 

.progress > .bar {
    animation: animate 1s linear infinite;
    background-image: linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, .15) 33%, rgba(0,0, 0, .15) 66%, transparent 66%);
    background-size: 40px;
}
@keyframes animate {
    from { background-position: 0; }
    to { background-position: 40px; }
}

Examples

Aşağıdaki demolar tarafından kullanılan eksiksiz bir stil sayfası görmek için lütfen MediaWiki:ProgressBar.css dosyasına bakın.

Etiketsiz temel bir ilerleme çubuğu
Metin içermeyen bir ilerleme çubuğu
15%
Karanlık bir ilerleme çubuğu100/200
Süslü bir ilerleme çubuğu30%
Yuvarlak kenarlıklı bir ilerleme çubuğu75%
Ek gölgeli bir ilerleme çubuğu45%
İnce bir ilerleme çubuğu
Hareketli bir ilerleme çubuğu95%