fong_kah_chun86

Forum Replies Created

Viewing 2 replies - 1 through 2 (of 2 total)
  • Forum: Plugins
    In reply to: [Progress Bar] animation

    Actually, I managed to get it working at 100% width without using the short code. I code the following HTML and uses the style class for animation:

    <div style="display: block; width:100%">
  <div class="wppb-wrapper inside" style="width:100%">
    <div class="inside">55 %</div>
    <div class="wppb-progress fixed" style="width:100%">
      <span class="green" style="width: 55%;"><span></span></span>
    </div>
  </div>
  <div class="wppb-wrapper inside" style="width:100%">
    <div class="inside">45 %</div>
    <div class="wppb-progress fixed" style="width:100%">
      <span class="blue" style="width: 45%;"><span></span></span>
    </div>
  </div>
</div>

    When the user dynamically resize the browser, the width of the bar will be fixed, but at least the animation will grow its width to the correct percentage upon a page refresh.
    My example at: https://www.peircesec.moe.edu.sg/curriculum/english-lit-drama-draft/

    Thread Starter fong_kah_chun86

    (@fong_kah_chun86)

    my codes were:

    <p>?</p>
[parallax-scroll id="xxxx"]
<p>some text</p>
[parallax-scroll id="xxxx"]
<p>New paragraph</p>
[parallax-scroll id="xxxx"]
<p>New paragraph</p>
[parallax-scroll id="xxxx"]
<p>New paragraph</p>

Viewing 2 replies - 1 through 2 (of 2 total)