The login form in demo URL doesn’t process anything, simply makes demonstration how to update the progress progress bar.

Main method used for this progressbar is:

neonLogin.setPercentage(89);

You handle the progress of your login form, and then update the progress bar with the above function.

Here is an example how can you implement it:

Open assets/js/neon-login.js

On line 40 there is submitHandler event that I called when user submits the form.

Then place this code (remove the existing one).

neonLogin.setPercentage(10);// this is just how you want to show users login process, it can be any value from 0-100

// Now send the login data to the server
var submitted_username = $("#username").val(),
    submitted_password = $("#password").val();

// Do login via ajax
$.ajax({
    url: "your-login-process-file", // Your php script to wait for login connections and set login sessions
    type: "POST",
    // You can access the user and pass with $_POST['username'] and $_POST['password']
    data: {
        username: submitted_username,
        password: submitted_password
    },

    success: function(response_text) // response_text - is what you output based on user login information, lets suggest you output numbers i.e. 1 means logged in, 2 password incorred, 3 any other reason...
    {
        if(response_text)
        {
            neonLogin.setPercentage(100); // update the percentage to 100%

            // We will wait (not necessary) till the animation is finished and then redirect to dashboard
            setTimeout(function()
            {
                window.location.href = 'logged-in.php'; // after this, its done!
            }, 1000);
        }
    }
});

Here is the link to download the non compressed version of neon.css file, click on the link below:

An example of this code (Morris Charts JS)

var chartArea = chartContainer;
   var svg = chartArea.innerHTML;
   var index = svg.indexOf('</svg>');
   svg = svg.substring(0, index+6);
   var doc = chartContainer.ownerDocument;
   var canvas = doc.createElement('canvas');
   canvas.setAttribute('width', chartArea.offsetWidth);
   canvas.setAttribute('height', chartArea.offsetHeight);

Will need this code to be outputted/converted to image:

canvas.setAttribute(
        'style',
        'position: absolute; ' +
        'top: ' + (-chartArea.offsetHeight * 2) + 'px;' +
        'left: ' + (-chartArea.offsetWidth * 2) + 'px;');
doc.body.appendChild(canvas);
canvg(canvas, svg);
var imgData = canvas.toDataURL("image/png");//This is the image

Then send those data for download.

Arlind