Я хочу створити індикатор прогресу, як на малюнку нижче:
Я не маю уявлення про створення цього. Чи слід використовувати методи HTML5?
Не могли б ви допомогти мені у створенні цієї панелі прогресу?
Панель прогресу з HTML та CSS
Відповіді:
#progressbar {
background-color: black;
border-radius: 13px;
/* (height of inner div) / 2 + padding */
padding: 3px;
}
#progressbar>div {
background-color: orange;
width: 40%;
/* Adjust with JavaScript */
height: 20px;
border-radius: 10px;
}<div id="progressbar">
<div></div>
</div>(РЕДАКТУВАТИ: Змінено виділення синтаксису; змінено нащадка на дочірній селектор)
3
Декому може здатися, що панель прогресу з відцентрованим відсотковим показником є ще кориснішою.
—
Томаш Зато - відновити Моніку
http://jsfiddle.net/cwZSW/1406/
#progress {
background: #333;
border-radius: 13px;
height: 20px;
width: 300px;
padding: 3px;
}
#progress:after {
content: '';
display: block;
background: orange;
width: 50%;
height: 100%;
border-radius: 9px;
}<div id="progress"></div>
Залежно від того, який браузер вам потрібно використовувати
—
Veger
border-radius, -webkit-border-radiusабо-moz-border-radius
похвала за те, що для цього потрібно всього 3 хвилини, ви повинні бути надзвичайно талановитою людиною бару прогресу! Оце Так!
—
Даніель Тулп
@Daniel чому ти дякую! Приємно, коли люди помічають!
—
Привид
Єдина проблема з цим рішенням полягає в тому, що коду JavaScript дійсно важко змінювати довжину псевдоелемента: after, оскільки він не є частиною DOM. Якщо я чогось не пропускаю.
—
FrontierPsycho
Відповідь 2014 року : З 2014 року HTML 5 тепер включає<progress> element те, що не потребує JavaScript. Значення відсотків рухається із прогресом за допомогою вбудованого вмісту. Перевірено лише у веб-наборі. Сподіваюся, це допоможе:
CSS:
progress {
display:inline-block;
width:190px;
height:20px;
padding:15px 0 0 0;
margin:0;
background:none;
border: 0;
border-radius: 15px;
text-align: left;
position:relative;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
}
progress::-webkit-progress-bar {
height:11px;
width:150px;
margin:0 auto;
background-color: #CCC;
border-radius: 15px;
box-shadow:0px 0px 6px #777 inset;
}
progress::-webkit-progress-value {
display:inline-block;
float:left;
height:11px;
margin:0px -10px 0 0;
background: #F70;
border-radius: 15px;
box-shadow:0px 0px 6px #777 inset;
}
progress:after {
margin:-26px 0 0 -7px;
padding:0;
display:inline-block;
float:left;
content: attr(value) '%';
}<progress id="progressBar" max="100" value="77"></progress>
Станом на 2020 р підтримується досить добре у всіх браузерах: caniuse.com/#feat=progress
—
frackham
Чи не дещо нереально сказати, що "не потрібен Javascript"? Я маю на увазі, що сам елемент є досить простим візуальним компонентом, але якщо ви коли-небудь збираєтесь отримати з нього якесь значення, ПОТРІБНО якось динамічно встановлювати властивість "value". Як це буде? Я б поклався на вгадування Javascript. Тоді постає питання, чи насправді цей елемент забезпечує таку зручність чи користь, коли він насправді не робить багато, а представляє щось дуже контрольовано.
—
Лев
Мені подобається цей:
дуже гладкий лише з цим, як HTML, а решта CSS3, який є зворотно сумісним (хоча у нього буде менше очей)
Редагувати доданий код нижче, але взятий безпосередньо з наведеної вище сторінки, всі заслуги цього автора
.meter {
height: 20px;
/* Can be anything */
position: relative;
background: #555;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
border-radius: 25px;
padding: 10px;
-webkit-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
-moz-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
}
.meter>span {
display: block;
height: 100%;
-webkit-border-top-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-moz-border-radius-topright: 8px;
-moz-border-radius-bottomright: 8px;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
background-color: #f1a165;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #f1a165), color-stop(1, #f36d0a));
background-image: -webkit-linear-gradient(top, #f1a165, #f36d0a);
background-image: -moz-linear-gradient(top, #f1a165, #f36d0a);
background-image: -ms-linear-gradient(top, #f1a165, #f36d0a);
background-image: -o-linear-gradient(top, #f1a165, #f36d0a);
-webkit-box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
-moz-box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3), inset 0 -2px 6px rgba(0, 0, 0, 0.4);
position: relative;
overflow: hidden;
}<div class="meter">
<span style="width: 33%"></span>
<!-- I use my viewmodel in MVC to calculate the progress and then use @Model.progress to place it in my HTML with Razor -->
</div>
Зауважте, що відповіді лише на посилання не рекомендуються, відповіді SO повинні бути кінцевою точкою пошуку рішення (порівняно з черговою зупинкою посилань, які з часом старіють). Будь ласка, додайте сюди окремий конспект, зберігаючи посилання як посилання.
—
kleopatra
@kleopatra, дякую, що підтримуєте веб-сайт придатним для використання. Я знаю, що лише посилання (звичайно, на такі сайти, як jsfiddle) не рекомендуються. Я додаю код, який використовував.
—
Даніель Тулп
Так само, як відповідь @ RoToRa, з деякими незначними коригуваннями (правильні кольори та розміри):
body {
background-color: #636363;
padding: 1em;
}
#progressbar {
background-color: #20201F;
border-radius: 20px; /* (heightOfInnerDiv / 2) + padding */
padding: 4px;
}
#progressbar>div {
background-color: #F7901E;
width: 48%;
/* Adjust with JavaScript */
height: 16px;
border-radius: 10px;
}<div id="progressbar">
<div></div>
</div>Ось скрипка: jsFiddle
І ось як це виглядає:
У сучасних браузерах ви можете використовувати елемент прогресу CSS3 та HTML5!
progress {
width: 40%;
display: block; /* default: inline-block */
margin: 2em auto;
padding: 3px;
border: 0 none;
background: #444;
border-radius: 14px;
}
progress::-moz-progress-bar {
border-radius: 12px;
background: orange;
}
/* webkit */
@media screen and (-webkit-min-device-pixel-ratio:0) {
progress {
height: 25px;
}
}
progress::-webkit-progress-bar {
background: transparent;
}
progress::-webkit-progress-value {
border-radius: 12px;
background: orange;
} <progress max="100" value="40"></progress>Панель виконання без вкладених div ... для кожного елемента, де працює css лінійний градієнт.
Ось JSFiddle http://jsfiddle.net/oj1L3y6t/2/
function show_progress(i) {
var progress1 = i;
var progress2 = progress1 + 1;
var progress3 = progress1 + 2;
var magic = "linear-gradient(to right, #FFC2CE " + progress1 + "% ,red " + progress2 + "% , #FFFFFF " + progress3 + "%)";
document.getElementById("progress-0").style.background = magic;
var magic = "linear-gradient(to right, lightblue " + progress1 + "% , lightgreen " + progress2 + "%)";
document.getElementById("progress-1").style.background = magic;
var magic = "linear-gradient(to right, lightblue " + progress1 + "% , #FFFFFF 100%)";
document.getElementById("progress-2").style.background = magic;
var magic = "linear-gradient(#FFC2CE " + progress1 + "% ,red " + progress2 + "% , #FFFFFF " + progress3 + "%)";
document.getElementById("progress-3").style.background = magic;
}
function timeout() {
t = setTimeout(function() {
show_progress(t)
timeout();
}, 50);
if (t == 78) {
clearTimeout(t);
}
console.log(t);
}
timeout();#progress-0 {
border: 1px solid black;
width: 500px;
background: #999;
text-align: center;
}
#progress-1 {
border: 1px solid black;
width: 500px;
background: #999;
text-align: center;
margin-top: 10px;
border-radius: 10px;
}
#progress-2 {
border: 1px solid black;
width: 500px;
background: #999;
text-align: center;
margin-top: 10px;
}
#progress-3 {
border: 1px solid black;
width: 100px;
height: 100px;
background: #999;
line-height: 100px;
text-align: center;
margin-top: 10px;
border-radius: 200px;
}<div id="progress-0">Loading</div>
<input id="progress-1" value="Loading"></input>
<button id="progress-2">Loading</button>
<p id="progress-3">Loading</p>Створіть елемент, який відображає ліву частину стовпчика (круглу частину), а також створіть елемент для правої частини. Для фактичної смуги прогресу створіть третій елемент із повторюваним фоном та шириною, яка залежить від фактичного прогресу. Покладіть все це на фонове зображення (що містить порожній рядок прогресу).
Але, мабуть, ви вже знали, що ...
Редагувати : під час створення індикатора виконання, який не використовує текстові фони. Ви можете скористатися кнопкою,border-radius щоб отримати круглий ефект, як показали Рікудо Сеннін та RoToRa !
.loading {
position: relative;
width: 50%;
height: 200px;
border: 1px solid rgba(160, 160, 164, 0.2);
background-color: rgba(160, 160, 164, 0.2);
border-radius: 3px;
}
span.loader {
position: absolute;
top: 40%;
left: 10%;
width: 250px;
height: 20px;
border-radius: 8px;
border: 2px solid rgba(160, 160, 164, 0.8);
padding: 0;
}
span.loader span.innerLoad {
text-align: center;
width: 140px;
font-size: 15px;
font-stretch: extra-expanded;
color: #2A00FF;
padding: 1px 18px 3px 80px;
border-radius: 8px;
background: rgb(250, 198, 149);
background: -moz-linear-gradient(left, rgba(250, 198, 149, 1) 0%, rgba(245, 171, 102, 1) 47%, rgba(239, 141, 49, 1) 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(250, 198, 149, 1)), color-stop(47%, rgba(245, 171, 102, 1)), color-stop(100%, rgba(239, 141, 49, 1)));
background: -webkit-linear-gradient(left, rgba(250, 198, 149, 1) 0%, rgba(245, 171, 102, 1) 47%, rgba(239, 141, 49, 1) 100%);
background: -o-linear-gradient(left, rgba(250, 198, 149, 1) 0%, rgba(245, 171, 102, 1) 47%, rgba(239, 141, 49, 1) 100%);
background: -ms-linear-gradient(left, rgba(250, 198, 149, 1) 0%, rgba(245, 171, 102, 1) 47%, rgba(239, 141, 49, 1) 100%);
background: linear-gradient(to right, rgba(250, 198, 149, 1) 0%, rgba(245, 171, 102, 1) 47%, rgba(239, 141, 49, 1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fac695', endColorstr='#ef8d31', GradientType=1);
}<div class="loading">
<span class="loader">
<span class="innerLoad">Loading...</span>
</span>
</div> .black-strip
{ width:100%;
height: 30px;
background-color:black;
}
.green-strip
{ width:0%;
height: 30px;
background-color:lime;
animation-name: progress-bar;
animation-duration: 4s;
animation-iteration-count: infinite;
}
@keyframes progress-bar {
from{width:0%}
to{width:100%}
}
<div class="black-strip">
<div class="green-strip">
</div>
</div>
Якщо ви хочете мати індикатор виконання без додавання коду, PACE може стати для вас чудовим інструментом.
Просто додайте pace.js та тему CSS на ваш вибір, і ви отримаєте прекрасний індикатор прогресу для завантаження сторінки та навігації AJAX. Найкраще у PACE - це автоматичне виявлення прогресу.
Він також містить різні теми та кольорові схеми.
Варто спробувати.
.bar {
background - color: blue;
height: 40 px;
width: 40 px;
border - style: solid;
border - right - width: 1300 px;
border - radius: 40 px;
animation - name: Load;
animation - duration: 11 s;
position: relative;
animation - iteration - count: 1;
animation - fill - mode: forwards;
}
@keyframes Load {
100 % {
width: 1300 px;border - right - width: 5;
}
це те, що я використав ... для проекту кодування середньої школи, це не найкрасивіше, але це працює
—
Тайлер Донат,
Мало того, що це не найкрасивіше, воно також не є дійсним і не буде працювати. Властивості CSS не мають пробілів. Наприклад, це
—
Matijs
background - color: blue;має бутиbackground-color: blue;
Використовуючи setInterval.
var totalelem = document.getElementById("total");
var progresselem = document.getElementById("progress");
var interval = setInterval(function(){
if(progresselem.clientWidth>=totalelem.clientWidth)
{
clearInterval(interval);
return;
}
progresselem.style.width = progresselem.offsetWidth+1+"px";
},10).outer
{
width: 200px;
height: 15px;
background: red;
}
.inner
{
width: 0px;
height: 15px;
background: green;
}<div id="total" class="outer">
<div id="progress" class="inner"></div>
</div>Використовуючи CSS Transtitions.
function loading()
{
document.getElementById("progress").style.width="200px";
}.outer
{
width: 200px;
height: 15px;
background: red;
}
.inner
{
width: 0px;
height: 15px;
background: green;
-webkit-transition:width 3s linear;
transition: width 3s linear;
}<div id="total" class="outer">
<div id="progress" class="inner"></div>
</div>
<button id="load" onclick="loading()">Load</button>Існує підручник для створення прогресу бару HTML5 тут . Якщо ви не хочете використовувати методи HTML5 або шукаєте рішення для всього браузера, спробуйте такий код:
<div style="width: 150px; height: 25px; background-color: #dbdbdb;">
<div style="height: 25px; width:87%; background-color: gold"> </div>
</div>Ви можете змінити колір GOLD на будь-який колір індикатора прогресу, а #dbdbdb - на колір тла вашої індикації прогресу.
Чому ви не можете просто створити кілька зображень для кожної частини рядка стану? Якщо це третина, просто покажіть третину рядка стану ... це дуже просто. Можливо, ви могли б зрозуміти, як змінити його на наступне зображення на основі введення за допомогою тегу форми. Ось моя частина коду, вам потрібно пізніше з’ясувати форму
<form> <!--(extra code)-->
<!--first progress bar:-->
<img src="directory"></img>
<!--second progress bar:-->
<img src="directory"></img>
<!--et caetera...-->
</form>
Зараз це здається простим, чи не так?