how to make rtl?

[ghost]

No description provided.

[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;
  }

nprogress/nprogress.js

Line 349 in e1a8b7f

barCSS = { transform: 'translate3d('+toBarPerc(n)+'%,0,0)' };

nprogress/nprogress.js

Line 351 in e1a8b7f

barCSS = { transform: 'translate('+toBarPerc(n)+'%,0)' };

[mirismaili]

Thank @alikazemkhanloo.

I used this (w/o JS):

[dir='rtl'] body > div#nprogress {
  transform: scaleX(-1);
  position: fixed;
  right: 0;
  top: 0;
  left: 0;
}