Pulse

Version 0.9.0-next.31 for Svelte Kit ^1.0.1

Pulse

Used to show if an action is happening and visually what state the action is in.

Props

animate Boolean true
If the component should animate

color string
Accepts one of the color variables.

dark_mode_invert Boolean
Will invert default to the value set in the configStore.

Default

No animation

Colored

<script>
  import { Card, CardHeader, Pulse } from "bubbles-ui";
</script>

<Card height100={true}>
  <CardHeader title="Pulse Options" border={false} />
  <div>
    <p>Default</p>
    <Pulse />
  </div>

  <div>
    <p>No animation</p>
    <Pulse animate={false} />
  </div>

  <div>
    <p>Colored</p>
    <Pulse color="success-lightest" />
  </div>
</Card>

<style>
  div {
    margin-bottom: 2rem;
  }
</style>