Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1487513

    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

    #1487535

    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

    #1487544

    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.

    #1487565
    This reply has been marked as private.
    #1487581

    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

    #1487586

    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

    #1487699

    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.

    #1487715

    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

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