Depot43-Unterlagen - ProgressBar

HTML Elemente

            
            

<!doctype html>
<html lang="de">
<head>
    <meta charset=utf-8>
    <title>Bootstrap CDN</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <style>
    
    </style>

</head>
<body>

	<h3>Statische ProgressBar</h3>
	<div class="progress">
		<div class="progress-bar" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width:70%">
		<span>Vortschritt = 70%</span>
		</div>
	</div>

	<h3>Dynamische ProgressBar</h3>
	<div class="progress dyn">
		<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0;">
		<span>0% Complete</span>
		</div>
	</div>



</body>
</html>


 

            

Bemerkung:

Eine dynamische Progressbar braucht jQuery und ein Javascript.

Üblicherweise wird sie verwendet einen Ablauf zu illustrieren: Eine Anzeige der Ladezeit, ein Stand eines Downloads einen Aufbau von Seiteninhalten usw. Im beispiel ist die Animation simuliert, um die Zugriffsmöglichkeit zu demonstrieren.