Feedback

Feedback styles

notices, badges, progress, skeleton and a tooltip that morphs its text.

new

Examples

Notices

slide in from the edge

Saved.

Could not connect.

Works once, for 15 min.

<div class="pt-stack">
  <div class="pt-note pt-ok">Saved.</div>
  <div class="pt-note pt-no">Could not connect.</div>
  <div class="pt-note pt-info">Works once, for 15 min.</div>
</div>

Badges

waiting one blinks

ActivePendingFailedDraft

<div class="pt-badges">
  <span class="pt-bd pt-ok">Active</span>
  <span class="pt-bd pt-wait">Pending</span>
  <span class="pt-bd pt-no">Failed</span>
  <span class="pt-bd">Draft</span>
</div>

Progress bar

shine runs along the fill

Uploading0%

<div class="pt-prog">
  <div class="pt-lb">
    <span>Uploading</span>
    <span>0%</span>
  </div>
  <div class="pt-tr">
    <div class="pt-fl"></div>
  </div>
</div>

Segmented progress

last block grows

Step 4 of 6

<div class="pt-prog pt-seg">
  <div class="pt-lb">
    <span>Step 4 of 6</span>
  </div>
  <div class="pt-tr">
    <i class="pt-on"></i>
    <i class="pt-on"></i>
    <i class="pt-on"></i>
    <i class="pt-on"></i>
    <i></i>
    <i></i>
  </div>
</div>

Skeleton

shimmer while loading

<div class="pt-skel">
  <i></i>
  <i></i>
  <i></i>
  <i></i>
</div>

Tooltip

text morphs and the colors shift

<span class="pt-tip">
  <button>
    <span>Hover me</span>
    <span>Copy the link</span>
  </button>
</span>