Tagged: 

Viewing 3 posts - 1 through 3 (of 3 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.

  • Author
    Posts
Viewing 3 posts - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.