Skip to content

NProgress on a custom DOM element (like div) instead of the top of the page. #39

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
dmahapatro opened this issue Sep 9, 2013 · 5 comments
Closed

NProgress on a custom DOM element (like div) instead of the top of the page. #39

dmahapatro opened this issue Sep 9, 2013 · 5 comments

Comments

@dmahapatro
Copy link

This can mainly be an enhancement to have the progress bar on the desired <div> element instead of always having on the top. I was thinking something like below:

//nprogress.js
NProgress.render = function(fromStart) {
    .......
    if(Settings.target){
      $el.prependTo(Settings.target);  
    } else {
      $el.appendTo(document.body);
    }
    return $el;
  };

where target is a new setting in Settings

//Minimalist sample html
<html>
<head>
    <link href="./nprogress.css" type="text/css" rel="stylesheet"/>

    <!-- Jquery -->
    <script src="./jquery-1.9.1.min.js"></script>
    <script src="./nprogress.js"></script>
</head>
<body>
    <div>Some Content Here</div>
    <hr>

    <div id="myDiv" role='bar' style="width: 70%;">
        <table style="width: 100%">
            <tr>
                <td>
                    Something
                </td>
            </tr>
        </table>
    </div>

    <p><input type='button' id='b-1' value="Start"></input></p>
    <p><input type='button' id='b-0' value="Done"></input></p>

    <script type="text/javascript">
        NProgress.configure({
            target: '#myDiv'
        });

        $("#b-1").click(function() { NProgress.start(); });
                $("#b-0").click(function() { NProgress.done(); });
    </script>
</body>
</html>

CSS has to be modified accordingly in order to bypass the z-index
@dmahapatro
Copy link
Author

I cam across this issue after I posted mine. I will try the enhancement and hopefully I would close this particular one.

Comment if feasible. :)

@JGMAGNO
Copy link

JGMAGNO commented Sep 10, 2013

that's the amazing thing, I would like also to enhanced this issue.. :)

@Snoop
Copy link

Snoop commented Mar 5, 2014

This still doesnt seem to be possible! - There is another Script which can do that allready called progress.js, but the nprogress.js looks nicer to me, would love to see this being implemented fast 👍

@vimes1984
Copy link

i'd love to see this... I'm going to have to implement I'll keep posted..

@rstacruz
Copy link
Owner

Implemented. Have a look at #86. Thanks for the issue report, fellas!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@rstacruz @Snoop @vimes1984 @dmahapatro @JGMAGNO