• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[FRAGE] MDL Progressbar gleichmäßig hochzählen.

Noim.IO

New member
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 :D 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>
 
Du hast einen Fehler in der Fehlerkonsole. Behebe den zuerst oder entferne den Code, der für dein Problem nicht nötig ist.

Ich persönlich hab' keine Ahnung von getmdl, aber ich denke nicht, dass das so funktioniert, wie du denkt. So erzeugt es an den Nodes gar keine Eigenschaft MaterialProgress.
 
Zurück
Oben