Renuo_Full_Lockup Rails Bootstrap Ui
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<div class="mb-8">
  <h5>Different colors</h5>
  <div class="pulsating-badge bg-success">
    <span class="badge">Success</span>
  </div>
  <div class="pulsating-badge bg-warning">
    <span class="badge">Warning</span>
  </div>
  <div class="pulsating-badge bg-danger">
    <span class="badge">Danger</span>
  </div>
  <div class="pulsating-badge bg-info">
    <span class="badge">Info</span>
  </div>
  <div class="pulsating-badge bg-primary">
    <span class="badge">Primary</span>
  </div>
  <div class="pulsating-badge bg-secondary">
    <span class="badge">Secondary</span>
  </div>
</div>
<div>
  <h5>Different durations</h5>
  <div class="pulsating-badge bg-primary" style="animation-duration: 1s;">
    <span class="badge">1s</span>
  </div>
  <div class="pulsating-badge bg-primary" style="animation-duration: 2s;">
    <span class="badge">2s</span>
  </div>
  <div class="pulsating-badge bg-primary" style="animation-duration: 5s;">
    <span class="badge">5s</span>
  </div>
</div>
<div>
  <h5>Different scales</h5>
  <div class="pulsating-badge bg-primary" style="--pulse-scale: 1.1;">
    <span class="badge">1.1 Scale</span>
  </div>
  <div class="pulsating-badge bg-primary" style="--pulse-scale: 1.2;">
    <span class="badge">1.2 Scale</span>
  </div>
  <div class="pulsating-badge bg-primary" style="--pulse-scale: 1.5;">
    <span class="badge">1.5 Scale</span>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<div class="mb-8">
  <h5>Different colors</h5>
    <div class="pulsating-badge bg-success">
      <span class="badge">Success</span>
    </div>
    <div class="pulsating-badge bg-warning">
      <span class="badge">Warning</span>
    </div>
    <div class="pulsating-badge bg-danger">
      <span class="badge">Danger</span>
    </div>
    <div class="pulsating-badge bg-info">
      <span class="badge">Info</span>
    </div>
    <div class="pulsating-badge bg-primary">
      <span class="badge">Primary</span>
    </div>
    <div class="pulsating-badge bg-secondary">
      <span class="badge">Secondary</span>
    </div>
</div>
<div>
  <h5>Different durations</h5>
    <div class="pulsating-badge bg-primary" style="animation-duration: 1s;">
      <span class="badge">1s</span>
    </div>
    <div class="pulsating-badge bg-primary" style="animation-duration: 2s;">
      <span class="badge">2s</span>
    </div>
    <div class="pulsating-badge bg-primary" style="animation-duration: 5s;">
      <span class="badge">5s</span>
    </div>
</div>
<div>
  <h5>Different scales</h5>
    <div class="pulsating-badge bg-primary" style="--pulse-scale: 1.1;">
      <span class="badge">1.1 Scale</span>
    </div>
    <div class="pulsating-badge bg-primary" style="--pulse-scale: 1.2;">
      <span class="badge">1.2 Scale</span>
    </div>
    <div class="pulsating-badge bg-primary" style="--pulse-scale: 1.5;">
      <span class="badge">1.5 Scale</span>
    </div>
</div>

No notes provided.

No params configured.

_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.