Loading indicator ??



  • There's no loading indicator, except the " X " that suggest us the page is loading.. Why isnt there any animation ?
    How can I add one (if possible) ? I didnt find anything in the forum

    Thank you 🙂


  • Vivaldi Translator

    There is a loading indicator in the address bar. See the darker part as well as the text to the right:
    0_1536595102570_0a27d708-0daa-480f-9059-bccf613da5b9-image.png

    If you have the address bar hidden in settings or if you open tabs in the background you will instead have a loading bar in below the name of the tab:
    0_1536595201234_b265002d-4a9c-4e35-a17c-d591d8600d6d-image.png



  • Have you checked if Page Load Progress Bar is ticked in Setting/Address Bar/Address Bar Options?



  • thanks for the replies. The option "page load progress bar" was checked, I tried to uncheck/check but nothing happens. Maybe because my theme is grey/white ?
    Strange..

    0_1536654859339_vivaldi_bar.png

    edit : only the n/8 and "Mo" is displayed when I load a page



  • @hlehyaric said in Loading indicator ??:

    Have you checked if Page Load Progress Bar is ticked in Setting/Address Bar/Address Bar Options?

    @komposten said in Loading indicator ??:

    There is a loading indicator in the address bar. See the darker part as well as the text to the right:
    0_1536595102570_0a27d708-0daa-480f-9059-bccf613da5b9-image.png

    If you have the address bar hidden in settings or if you open tabs in the background you will instead have a loading bar in below the name of the tab:
    0_1536595201234_b265002d-4a9c-4e35-a17c-d591d8600d6d-image.png

    Thanks, I know what's the issue. It's the "Subtle" theme, and customized themes where the "main color" is a light color... I don't see any loading bar progressing with this theme, so I guess it's an issue. I'll open an issue 🙂



  • After last updete page loading indicator not working too. Delate custom css file, checked Page load progr bar in settings, checked theme color settings, try dark theme - nothing.
    Maybe need to add somthing im my css? Now all that is tie with pageload indicator looks that:

    .addressfield .pageload .pageload-indicator{background-color:#7D7D7D !important;height:29px !important;margin-top:-2px}


  • Vivaldi Translator

    @fry3000 Can you specify which exact version of Vivaldi you are on? (See vivaldi://version)



  • @fry3000 In latest snapshot it works.

    [Regression] Progress bar is not visible (VB-44482)

    The full code containing .pageload is:

    .addressfield .pageload {
      display: flex;
      pointer-events: none;
      order: 1;
      opacity: 0;
      color: var(--colorFg);
    }
    .addressfield .pageload:not(.unstarted).progressing,
    .addressfield .pageload:not(.unstarted).progress-done {
      opacity: 1;
    }
    .addressfield .pageload:not(.unstarted).progressing .pageload-indicator::-webkit-progress-value,
    .addressfield .pageload:not(.unstarted).progress-done .pageload-indicator::-webkit-progress-value {
      transition: width 0.4s;
    }
    .addressfield .pageload:not(.unstarted).progressing > > .pageload-indicator[value='0']::-webkit-progress-value,
    .addressfield .pageload:not(.unstarted).progress-done .pageload-indicator[value='0']::-webkit-progress-value {
      transition: none;
    }
    .addressfield .pageload:not(.unstarted).stopped {
      transition: opacity 1s;
      opacity: 0;
    }
    .addressfield .pageload.progressing .pageload-ticker {
      width: 50px;
      opacity: 1;
      padding-right: var(--padding);
      margin-right: var(--padding);
    }
    .private .addressfield .pageload.progressing .pageload-ticker {
      color: var(--colorBgIntense);
    }
    .addressfield .pageload.progress-done .pageload-ticker {
      transition: opacity 0.15s, width 0s, margin 0s, padding 0s;
      transition-delay: 1.5s, 1.8s, 1.8s, 1.8s;
    }
    .addressfield .pageload.progress-done .pageload-ticker + .pageload-ticker {
      transition-delay: 1.7s, 2s, 2s, 2s;
    }
    .addressfield .pageload .pageload-indicator {
      position: absolute;
      width: auto;
      height: 22px;
      left: 1px;
      right: 1px;
      top: 1px;
      border-radius: var(--radius);
      -webkit-appearance: none;
      opacity: 0.25;
      background-color: var(--colorAccentBg);
      overflow: hidden;
    }
    .theme-dark .addressfield .pageload .pageload-indicator,
    .private .addressfield .pageload .pageload-indicator {
      opacity: 0.5;
    }
    .addressfield .pageload .pageload-indicator::-webkit-progress-inner-element {
      width: 100%;
    }
    .addressfield .pageload .pageload-indicator::-webkit-progress-bar {
      background: transparent;
    }
    .addressfield .pageload .pageload-indicator::-webkit-progress-value {
      border-radius: var(--radius);
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
      background-color: var(--colorBgIntenser);
    }
    .private .addressfield .pageload .pageload-indicator::-webkit-progress-value {
      background-color: var(--colorFg);
    }
    .addressfield .pageload .pageload-ticker {
      pointer-events: none;
      font-size: var(--fontSizeSmaller);
      margin: auto 0;
      line-height: 16px;
      width: 0;
      height: 16px;
      font-weight: calc(var(--fontWeight) + 300);
      position: relative;
      opacity: 0;
      overflow: hidden;
      text-align: center;
      background-repeat: no-repeat;
      background-position: 1px 1px, 0 0;
      background-size: 50px 14px, 100% 100%;
      border-right: 1px solid rgba(0, 0, 0, 0.1);
      padding-right: 0;
      margin-right: 0;
    }
    

Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.