Implementing the Fancy-Components Wave Filter Web Component Across Frontend Frameworks

The author discovered that a 78 KB GIF used as a loading placeholder could be replaced by a CSS‑based wave animation using the fancy-components library, which provides a <fc-wave-filter> web component.

After installing the library ( npm i fancy-components), the component can be used in a plain HTML file by adding a <script type="module"> tag that imports FcWaveFilter and creates a new instance.

In React projects, the component is imported and rendered as

<fc-wave-filter color="#047"><img src="..."/></fc-wave-filter>

, noting that the tag must be lowercase.

For Vue 2, the component is imported, registered, and used with Vue.config.ignoredElements = [/^fc-/] to prevent Vue warnings about unknown elements.

Vue 3 projects using the Vue‑CLI require a vue.config.js modification to treat tags starting with fc- as custom elements, while Vite projects configure the same behavior in vite.config.js using the isCustomElement compiler option.

The wave filter supports several attributes: color (or CSS variable --color) to set fill color, dur for animation duration, amplitude to adjust wave height, delay to keep the filled state, mode ("alpha", "luminance", "img", "slideshow") to choose the fill strategy, and interval for slideshow timing. These can be set directly on the element or via CSS variables.

Advanced usage includes combining two images for the "img" mode, using masks or clip-path to shape the wave, and dynamically switching modes with Vue's v-if or DOM property assignment. Browser quirks, especially in Chrome, are noted for dynamic attribute changes.

npm i fancy-components
import { FcWaveFilter } from 'fancy-components'
new FcWaveFilter()

Overall, the guide provides a comprehensive, framework‑agnostic method to create lightweight, customizable loading animations without large GIF assets.