How to add slim progress bars in JavaScript?

Use 'NProgress.js' library for nanoscopic progress bar.

NProgress.start() — shows the progress bar
NProgress.set(0.4) — sets a percentage
NProgress.inc() — increments by a little
NProgress.done() — completes the progress

<script>
NProgress.start();
$(document).ready(function ()
{
NProgress.done();
});
</script>

Final code and demo is here

<!DOCTYPE html><html>    <head>        <title>Online HTML Editor - webspeckle.com</title>        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css"/>        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.css"/>        <meta name="viewport" content="width=device-width">        <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>        <script src="https://cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.js"></script>    </head>    <body>         <div class='container-fluid'>            <h3>How to add slim progress bars in JavaScript?</h3><br/><br/>            <table class="table">                <tbody><tr>                        <td><button class='btn btn-danger' id='b-0'>NProgress.start()</button></td>                        <td>—                             shows the progress bar</td>                    </tr><tr>                        <td><button class='btn btn-success' id='b-40'>NProgress.set(0.4)</button></td>                        <td>—                             sets a percentage</td>                    </tr><tr>                        <td><button class='btn btn-primary' id='b-inc'>NProgress.inc()</button></td>                        <td>—                             increments by a little</td>                    </tr><tr>                        <td><button class='btn btn-info' id='b-100'>NProgress.done()</button></td>                        <td>—                             completes the progress</td>                    </tr></tbody>            </table></div><script>            NProgress.start();             $(document).ready(function ()             {                 NProgress.done();             });             $("#b-0").click(function () {                 NProgress.start();             });             $("#b-40").click(function () {                 NProgress.set(0.4);             });             $("#b-inc").click(function () {                 NProgress.inc();             });             $("#b-100").click(function () {                 NProgress.done();             });         </script>    </body></html>

Demo

How to add slim progress bars in JavaScript?

No comments:

Post a Comment

Try It Editor for HTML, CSS & JS

Blog Archive

Tags

Popular Posts

Contact Form