"Container Wave" Placeholder doesn't work

[htatd]

4.8.1 - Nodejs - MacOs

The “Container Glow” placeholder works, but when selecting the “Container Wave” nothing happens.

Glow:

Wave:

[Teodor]

I see no issues with both animations.

What browser are you testing with? Is the animation working for you on Bootstrap 5 docs site:

Placeholders

[htatd]

Both in preview inside Wappler and with Chrome.

The animation works in the bootstrap docs site for me.

[Teodor]

What’s the code you are using for this placeholder and it’s container? What version of Bootstrap is included on your page?

[htatd]

I’m using Bootstrap 5
The placeholder is in the column, and the placeholder items are inside.

[Teodor]

So what is the code on the page? Which version of Bootstrap 5 is selected on your page? Is it the standard Bootstrap or some bootswatch theme?

[htatd]

Bootstrap v5.1.3

This is the code:

<div class="col rounded h-50 bg-dark mt-3 pt-0 pb-0 ps-0 pe-0 placeholder-wave" dmx-repeat:repeat2="5">
                        <div class="d-flex flex-column">
                            <div class="d-flex lightcol">
                                <div class="d-flex align-items-center">
                                    <img width="43" height="43" class="rounded placeholder">
                                    <div class="d-flex flex-column ps-3">
                                        <div class="d-flex flex-row align-items-center">
                                            <h6 class="rounded mb-0 me-1 placeholder">Fancy display heading</h6>
                                        </div>
                                        <div class="d-flex flex-row align-items-center mt-1">
                                            <p class="rounded text-muted mb-0 small placeholder">M Team</p>
                                        </div>
                                    </div>
                                </div>
                                <div class="d-flex ms-auto">
                                    <div class="dropdown" id="postDropdown2">
                                        <button id="dropdown5" class="btn dropdown-toggle pt-0 pb-0 ps-0 pe-0" type="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                            <i class="fas fa-ellipsis-h button_icon"></i></button>
                                    </div>
                                </div>
                            </div>
                            <div class="d-flex lightcol flex-column mb-3 pt-0 pb-0">
                                <p class="rounded placeholder">A nice paragraph</p>
                                <p class="rounded placeholder w-75">A nice paragraph</p>
                                <p class="rounded placeholder w-25 text-muted">A nice paragraph</p>
                            </div>
                        </div>
                        <div class="d-flex w-100">
                            <h5 class="rounded mb-0 placeholder w-100">Fancy display heading</h5>
                            <div class="rounded d-flex placeholder justify-content-end">
                                <button id="btn9" class="btn input_message_button btn-primary disabled pt-3 pb-3 ps-3 pe-3" type="submit">
                                </button>
                            </div>
                        </div>
                    </div>

[Teodor]

Your code works fine for me:

Maybe try clearing your browser cache or check the exact version of the bootstrap 5 file in your project.

[htatd]

So the exact version is 5.1.3.
Didn’t work with clearing the cache too.

Strange that glow works, so will use glow.
Not a big issue, just from studies the “wave” from left to right is apparently better for the user experience

[Teodor]

Strange that it doesn’t work for you. Do you have a link to your page where i can check this?