🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

A dead simple Vue.js plugin to create custom ripple effects on clickable/tappable element inspired by Google Material Design.

Animation

Documentation

vue-rippler 🎉

Simple Vue.js plugin for custom ripple effect

vue2 Version Gzipsize Awesome License

Live Demo

Installation

npm i vue-rippler --save
yarn add vue-rippler

CDNs

jsDelivr, UNPKG, bundle.run

Usage

main.js

// main.js import Vue from 'vue' import VueRippler from 'vue-rippler'  Vue.use(VueRippler)

Use in component

// .vue template <template>   <my-component ripple></my-component> </template>

Set ripple style, and customize as you want(Optional)

<style> /* play with some lines below */ [ripple] .ripple--container .ripple--body {   opacity: 0.5 !important;   background-color: rgba(0, 0, 0, 0.1) !important;   -webkit-animation: rippler 1000ms;           animation: rippler 1000ms; } </style>

Author

Hyouk Seo(Spemer)


You May Also Like