Hallo, ich habe etwas mit der Progressbar von getmdl.io rum gespielt und wollte mal testen wie ich sie gleichmäßig hochzählen kann. Für euch Profis
ist das wahrscheinlich easy, aber ich Scheiter da schon
Hier ist mal das was ich gemacht habe:
Code:
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.1.0/material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">jQuery.fn.centerElement = function () {
return this.each(function () {
jQuery(this).css({'position': 'fixed', 'left': ((jQuery(window).width() - jQuery(this).outerWidth()) / 2) + jQuery(window).scrollLeft() + "px", 'top': (($(window).height() - jQuery(this).outerHeight()) / 2) + jQuery(window).scrollTop() + "px"}).trigger('resize');
});
};
$(window).load(function () {
jQuery(document).ready(function () {
jQuery(".loading").centerElement();
});
$(window).resize(function () {
jQuery(".loading").centerElement();
});
});
var i = 1;
function myLoop() {
setTimeout(function () {
i++;
document.querySelector('#p1').addEventListener('mdl-componentupgraded', function () {
this.MaterialProgress.setProgress(i);
});
if (i < 100) {
myLoop();
}
}, 1000)
}
myLoop();
</script>
<title>Logout...</title>
</head>
<body>
<div class="loading"><div id="p1" class="mdl-progress mdl-js-progress"></div></div>
</body>
</html>