Стилирование индикатора выполнения

Я рассматривал этот вопрос, и у меня возникли проблемы с тем, чтобы мой индикатор прогресса работал точно так, как должен.

HTML:

<div id="progress_bar">
 <div id="bar_color1">
 
 </div>
 <div id="bar_color2">
 
 </div>
</div>

CSS:

#progress_bar {
 border: solid 1px #000;
 height: 20px;
 width: 300px;
 display: block;
 position: relative;
 text-align: center;
}
#bar_color1 {
 background-color: #FFFFFF;
 color: #000000;
 width: 100%;
}
#bar_color2 {
 background-color: #000000;
 color: #FFFFFF;
 width: 0px;
}
#bar_color1, #bar_color2 {
 height: 20px;
 position: absolute;
 top: 0;
 left: 0;
}

Поскольку я динамически увеличиваю процент #bar_color2 и обновляю .upload_status, я получаю что-то вроде этого:

В то время как я хочу, чтобы текст оставался центрированным один поверх другого, поэтому, когда прогресс достигает половины пути, текст появляется, чтобы изменить цвет... Я пробовал разные вещи, обменивая divs вокруг, добавляя другого родителя, но я просто могу Кажется, это не понятно. Есть идеи?

4 ответа

Я знаю, что это не поможет вашему вопросу, но использование собственного элемента HTML поможет вам сэкономить много головных болей при взаимодействии с ним с помощью JavaScript, если вы ориентируетесь на относительно современные браузеры.

edit: материал, который я опубликовал ранее, не работает, но это делает:

http://jsfiddle.net/mYEM3/8/

Просто скопируйте оттуда.


Я думаю, что это возможно только с javascript.

Это не полный и только небольшой пример с изменением "цвета" после 50%, но трюк заключается в использовании специальных "слоев" для этого: http://jsfiddle.net/J92Bv/

<div id="progress_bar">
 
 
 <div>50%</div>
 <div>50%</div>
</div>

Вы должны изменить z-index если "белый" текст перекрывается с первым уровнем уровня выполнения. В сочетании и немного больше времени вы можете создать индикатор прогресса, правильно измените цвет, когда штрих появится в тексте. Я думаю, что здесь вы должны использовать небольшой вспомогательный слой, который позиционируется после 50%.


Вот приблизительная идея, которая будет работать:

HTML:

<div id="progress_bar">
 <div id="bar_color1">
 <div>50%</div>
 </div>
 <div id="bar_color2">
 <div>50%</div>
 </div>
</div>

CSS:

#progress_bar {
 border: solid 1px #000;
 height: 20px;
 width: 300px;
 display: block;
 position: relative;
 text-align: center;
 overflow:hidden;
} 
#bar_color2 {
 background-color: #FFFFFF;
 color: #000000;
 width: 50%;
}
#bar_color1 {
 background-color: #000000;
 color: #FFFFFF;
 width: 50%;
}
#bar_color1, #bar_color2 {
 height: 20px;
 position: relative;
 float:left;
 overflow:hidden;
}

.progress_text1{
 position: absolute;
 left:100px;
 width:100px;
 text-align:center;
}
.progress_text2{
 position: absolute;
 right:100px;
 width:100px;
 text-align:center;
}


Вы можете просто изменить цвет текста, который находится на прогрессивной загрузочной панели (не средней/белой), на черный, и досадный процент должен исчезнуть. И о том, когда прогресс достигнет половины пути, текст должен изменить проблему цвета, я думаю, вы можете сделать это также с изменением цвета.

licensed under cc by-sa 3.0 with attribution.