Crawl & Index Status
Googlebot visits and decides: indexed or not. But there are four states before "indexed," and most pages fail before the first one. This badge shows exactly where in the crawl pipeline a URL sits.
Crawl & Index Status the 9th of 30 designs in the 30 CSS Badges collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<div class="crawl-stage">
<div class="crawl-card">
<div class="crawl-status-row">
<div class="crawl-dot crawl-dot-indexed"></div>
<div class="crawl-status-text">INDEXED</div>
<div class="crawl-timestamp">Last crawled: 3h ago</div>
</div>
<div class="crawl-url">/blog/technical-seo-guide-2026/</div>
<div class="crawl-meta-row">
<span class="crawl-meta-tag">Googlebot 2.1</span>
<span class="crawl-sep">·</span>
<span class="crawl-meta-tag">JS Rendered</span>
<span class="crawl-sep">·</span>
<span class="crawl-meta-tag">200 OK</span>
<span class="crawl-sep">·</span>
<span class="crawl-meta-tag">canonical: self</span>
</div>
<div class="crawl-pipeline">
<div class="crawl-step crawl-step-done">Discovered</div>
<div class="crawl-arrow">»</div>
<div class="crawl-step crawl-step-done">Crawled</div>
<div class="crawl-arrow">»</div>
<div class="crawl-step crawl-step-done">Rendered</div>
<div class="crawl-arrow">»</div>
<div class="crawl-step crawl-step-active">Indexed</div>
</div>
</div>
</div> .crawl-stage {
background: #0a0e18;
padding: 50px 36px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 360px;
}
.crawl-card {
background: #111620;
border: 1px solid #1e2638;
border-radius: 6px;
padding: 24px 24px 20px;
width: 100%;
max-width: 480px;
font-family: ui-monospace, "JetBrains Mono", monospace;
}
.crawl-status-row {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
}
.crawl-dot {
width: 12px;
height: 12px;
border-radius: 50%;
flex-shrink: 0;
}
.crawl-dot-indexed {
background: #0cce6b;
box-shadow: 0 0 8px #0cce6b;
animation: crawl-pulse 2s infinite;
}
@keyframes crawl-pulse {
0%, 100% { box-shadow: 0 0 6px #0cce6b; }
50% { box-shadow: 0 0 14px #0cce6b; }
}
@media (prefers-reduced-motion: reduce) {
.crawl-dot-indexed { animation: none; }
}
.crawl-status-text {
font-size: 20px;
font-weight: 800;
letter-spacing: 0.12em;
color: #0cce6b;
}
.crawl-timestamp {
margin-left: auto;
font-size: 10px;
color: #8b949e;
letter-spacing: 0.06em;
}
.crawl-url {
font-size: 12px;
color: #4a90d9;
letter-spacing: 0;
margin-bottom: 12px;
padding: 8px 12px;
background: rgba(66, 133, 244, 0.06);
border-left: 2px solid rgba(66, 133, 244, 0.3);
border-radius: 0 3px 3px 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.crawl-meta-row {
display: flex;
gap: 8px;
align-items: center;
font-size: 10px;
color: #8b949e;
letter-spacing: 0.06em;
margin-bottom: 20px;
}
.crawl-sep { color: #30363d; }
.crawl-meta-tag {
padding: 2px 7px;
border-radius: 3px;
background: rgba(139, 148, 158, 0.1);
border: 1px solid #30363d;
font-size: 9px;
letter-spacing: 0.1em;
}
.crawl-pipeline {
display: flex;
align-items: center;
gap: 4px;
padding-top: 16px;
border-top: 1px solid #1e2638;
}
.crawl-step {
flex: 1;
text-align: center;
font-size: 8.5px;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 5px 4px;
border-radius: 3px;
border: 1px solid #1e2638;
color: #8b949e;
}
.crawl-step-done {
color: #0cce6b;
border-color: rgba(12,206,107,0.3);
background: rgba(12,206,107,0.06);
}
.crawl-step-active {
color: #fff;
border-color: rgba(12,206,107,0.6);
background: rgba(12,206,107,0.15);
font-weight: 700;
}
.crawl-arrow {
font-size: 10px;
color: #30363d;
flex-shrink: 0;
}