/img-pulse

A web component that creates a Tinder-esque image pulse.

Primary LanguageJavaScriptMIT LicenseMIT

<img-pulse>

A web component that creates a Tinder-esque image pulse.

Demo

Check it live!

Install

Install the component using Bower:

$ bower install img-pulse --save

Or download as ZIP.

Usage

  1. Import polyfill:

    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
  2. Import custom element:

    <link rel="import" href="bower_components/img-pulse/img-pulse.html">
  3. Start using it!

    <img-pulse src="demo-image.jpg" size="150" pulse-color="#ff0000"></img-pulse>

Options

Attribute Options Default Description
src String none The src of the image.
size Number 150 The size of the image. Sets the height and width to the same size.
pulse-color String #ff0000 The color of the pulse.

Development

In order to run it locally you'll need to fetch some dependencies and a basic server setup.

  1. Install bower & polyserve:

    $ npm install -g bower polyserve
  2. Install local dependencies:

    $ bower install
  3. Start development server and open http://localhost:8080/components/my-repo/.

    $ polyserve

History

For detailed changelog, check Releases.

License

MIT License