Шаблон прогресса шага CSS

Question

У меня есть штриховая панель, которая должна быть заполнена на 50% ширины. Это мой текущий html и css для индикатора выполнения.

HTML:

<div id="ProgressBar"> 
    <div id="Progress"></div> 
</div> 

CSS:

#ProgressBar { 
    width: 100%; 
    height: 30px; 
    border: 1px solid black; 
    border-radius: 7px; 
    padding: 4px; 
} 

#Progress { 
    width: 10%; 
    background-color: #4A90E2; 
    height: 100%; 
    border-top-left-radius: 7px; 
    border-bottom-left-radius: 7px; 
    border-color: #4A90E2; 
    -webkit-transition: width 2s; /* For Safari 3.1 to 6.0 */ 
    transition: width 2s; 
} 

#Progress:hover { 
    width: 50%; 
} 

Как вы можете видеть, что переход начинается после парения над прогрессом. Моя цель состоит в том, чтобы этот переход был начат сразу после загрузки страницы. Я знаю, что в Интернете есть несколько примеров, но все они имеют только эффекты постепенного исчезновения, и я не могу понять это. Я ценю вашу помощь.

Вот моя скрипка:

https://jsfiddle.net/Anokrize/ssL9fjy9/

(Я хотел бы, чтобы избежать каких-либо JavaScript или JQuery, если это возможно)

Answer 1

Как делать это с ключевыми кадрами, как это:

#ProgressBar { 
 
    width: 100%; 
 
    height: 30px; 
 
    border: 1px solid black; 
 
    border-radius: 7px; 
 
    padding: 4px; 
 
} 
 

 
#Progress { 
 
    width: 50%; 
 
    background-color: #4A90E2; 
 
    height: 100%; 
 
    border-top-left-radius: 7px; 
 
    border-bottom-left-radius: 7px; 
 
    border-color: #4A90E2; 
 
    
 
    animation-name: progressBar; 
 
    animation-iteration-count: 1; 
 
    animation-duration: 2s; 
 
} 
 

 
@keyframes progressBar { 
 
    0% { 
 
    width: 10%; 
 
    } 
 
    
 
    100% { 
 
    width: 50%; 
 
    } 
 
}

<div id="ProgressBar"> 
 
    <div id="Progress"></div> 
 
</div>

Answer 2

прямо вперед способ получения этого сделать через JQuery:

$(window).load(function() { 
    $("#Progress").css("width", "50%"); 
}); 

Answer 3

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

#ProgressBar { 
    width: 100%; 
    height: 30px; 
    border: 1px solid black; 
    border-radius: 7px; 
    padding: 4px; 
} 

#Progress { 
    width: 10%; 
    background-color: #4A90E2; 
    height: 100%; 
    border-top-left-radius: 7px; 
    border-bottom-left-radius: 7px; 
    border-color: #4A90E2; 
    animation: progress 1s ease-out forwards; 
} 

@keyframes progress { 
    from { width: 10%; } 
    to { width: 50%; } 
}