Tagged: 

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • August 3, 2025 at 11:16 am #1487513
    amollde

    Dear experts,
    as many others I try to fix accessibility issues found by WAVE. I would need a different color in the progress bar for the delta to 100% (its displayed in white). When trying to use the progress bar settings I could not find out how to fully configure the colors of the progress and the remaining bar.

    current source code as per ENFORL:

    <div class=”progressbar-percent avia_sc_animated_number_active number_prepared avia_animation_done” data-timer=”2200″ style=”opacity: 1; color: rgba(66, 66, 66, 0.6); background-color: rgb(187, 212, 237);”><span class=”av-bar-counter __av-single-number” data-number=”90″>
    90
    </span>

    Highly appreciate your support
    Anja

    August 4, 2025 at 6:18 am #1487535
    Ismael

    Hey amollde,

    Thank you for the inquiry.

    Have you tried adjusting the colors of the Progress Bar element in the Styling panel? Please see the screenshot below:

    View post on imgur.com

    Let us know if you need more info.

    Best regards,
    Ismael

    August 4, 2025 at 7:49 am #1487544
    Guenni007

    you can even change the height of that bar – or have some patterns as background-image

    #top #header .header-reading-progress {
  height: 10px !important;
  background-image: linear-gradient(to right,  #96b642 0%,#3f3f87 100%);
  background-size: auto 10px;
  z-index: 0;
}

    by the way: there is no right side bar to colorize. The width is calculated of that bar.

    August 4, 2025 at 6:31 pm #1487565
    amollde
    This reply has been marked as private.
    August 5, 2025 at 6:30 am #1487581
    Ismael

    Hi,

    Thank you for the update.

    The screenshot was taken from the editor panel from one of the progress bar items. To see the same options, edit the Progress Bar element, click on one of the items, and go to the Styling tab, you should see the same options as shown in our screenshot. Let us know if you need more info.

    Best regards,
    Ismael

    August 5, 2025 at 7:02 am #1487586
    Guenni007

    Oh, sorry. Since I work with a German user interface, I didn’t think about this progress bar (Fortschrittsbalken). The “Reading Progress Bar” isn’t translated in my German version, but the progress bar element is. That’s why it didn’t occur to me.

    Yes background-color is better set on that options dialog of the Element. But you had to open the second popup for each item (bar) there is the background-color option.
    __________

    And just to mention – you can have gradients on that too by css
    f.e. for the first bar in your element:

    #top .avia-progress-bar-container .avia-progress-bar:nth-child(1) .bar {
  background-image: linear-gradient(90deg, rgba(255, 255, 0, 1) 0%, rgba(0, 188, 212, 1) 50%, rgba(238, 130, 238, 1) 100%);
  background-size: contain;
  animation-iteration-count: 1;
}

    see https://webers-testseite.de/#marketshare

    August 7, 2025 at 5:31 pm #1487699
    amollde

    Dear Ismael,
    thanks or sour support and screen shot, I now got it that this is configurable per single line while I expected it to be for the full block, I now can do whats’ required. You can close this ticket, thank you.
    @Guenni: thanks for trying to help, too.

    August 7, 2025 at 8:06 pm #1487715
    Rikard

    Hi,

    Thanks for the update, we’ll close this thread for now then. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Accessibility issue with the progress bar’ is closed to new replies.