how to make rtl?

[Arashfiroozabadi]

its work for me. css #nprogress .bar { left: auto !important; right: 0; } and in node_modules\nprogress\nprogress.js change perc = fromStart ? '-100' : toBarPerc(NProgress.status || 0), to perc = fromStart ? '100' : toBarPerc(NProgress.status || 0), and function toBarPerc(n) { return (-1 + n) * 100; } to function toBarPerc(n) { return 100 - (n * 100); }

[ghost]

@Erkajp the code that @Arashfiroozabadi just posted works very well!

[drinkmaker]

@Arashfiroozabadi Thank You! Your solution works perfectly.

[alikazemkhanloo]

A workaround could be:

 "#nprogress": {
            transform: isRTL() ? "scaleX(-1)" : "unset",
            position: "fixed",
            top: 0,
            left: 0,
            right: 0,
            zIndex: 9999999,
        },

You can use JS to detect RTL if you're using JSS or use css selectors. No need to change anything in node_modules.

[itsramiel]

use https://www.npmjs.com/package/nprogress-support-rtl

[ShlomoCode]

its work for me. css #nprogress .bar { left: auto !important; right: 0; } and in node_modules\nprogress\nprogress.js change perc = fromStart ? '-100' : toBarPerc(NProgress.status || 0), to perc = fromStart ? '100' : toBarPerc(NProgress.status || 0), and function toBarPerc(n) { return (-1 + n) * 100; } to function toBarPerc(n) { return 100 - (n * 100); }

It works, but here's a shorter way: add rotateY(180deg) to transform (in barPositionCSS function)

  function barPositionCSS(n, speed, ease) {
    var barCSS;

    if (Settings.positionUsing === 'translate3d') {
      barCSS = { transform: 'rotateY(180deg) translate3d(' + toBarPerc(n) + '%,0,0)' };
    } else if (Settings.positionUsing === 'translate') {
      barCSS = { transform: 'rotateY(180deg) translate(' + toBarPerc(n) + '%,0)' };
    } else {
      barCSS = { 'margin-left': toBarPerc(n)+'%' };
    }

    barCSS.transition = 'all '+speed+'ms '+ease;

    return barCSS;
  }

https://github.com/rstacruz/nprogress/blob/e1a8b7fb6e059085df5f83c45d3c2308a147ca18/nprogress.js#L349 https://github.com/rstacruz/nprogress/blob/e1a8b7fb6e059085df5f83c45d3c2308a147ca18/nprogress.js#L351