Renuo_Full_Lockup Rails Bootstrap Ui
x
1
2
3
4
5
6
7
8
9
10
<div class="pulsating-badge bg-primary"
     style="
         --border-color: black;
         animation-duration: 1s;
         --pulse-scale: 1.05;
     ">
  <span class="badge">
    Animated badge
  </span>
</div>
1
2
3
4
5
6
7
8
9
10
<div class="pulsating-badge bg-<%= colour %>"
     style="
         --border-color: <%= border_color %>;
         animation-duration: <%= duration %>s;
         --pulse-scale: <%= pulse_scale.to_f %>;
     ">
  <span class="badge">
    <%= title %>
  </span>
</div>

Interactive playground for experimenting with badge styles and animations.

Param Description Input

Badge Title

Default bootstrap theme colours

Border Color

Animation Duration (seconds)

Scale Value

_animated_badge.scss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.pulsating-badge {
  animation-name: pulse;
  animation-duration: var(--animation-duration, 1s);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  padding: 2px 8px;
  display: inline-flex;
  border: 2px solid var(--border-color, black);
  border-radius: 0.75rem;
  margin: 0 16px 32px 0;
  @keyframes pulse {
    from {
      transform: scale3d(1, 1, 1);
    }
    50% {
      transform: scale3d(var(--pulse-scale, 1.05), var(--pulse-scale, 1.05), var(--pulse-scale, 1.05));
    }
    to {
      transform: scale3d(1, 1, 1);
    }
  }
}

No assets to display.