Lively Search Input with Animated Border Progress

Ever stared at a blank search bar, willing it to return results faster? We've all been there. I've decided to explore a unique search input design that adds a touch of interactivity and user feedback to the search process in my graph database administration tool.

The Power of Visual Feedback

A static search bar provides little indication of progress. My design incorporates a dynamic border that animates while the search is ongoing. This visual cue informs the user that the system is actively processing their request, reducing the perception of wait time and improving the overall user experience.

Behind the Scenes

This animation is achieved using CSS preprocessor code, specifically Sass. The clippath is used to define the animation, creating a clipping effect that progresses around the border of the search input.

@keyframes clippath
  0%, 100%
    clip-path: inset(0 0 95% 0)
  15%
    clip-path: inset(0 95% 0 0)
  50%
    clip-path: inset(95% 0 0 0)
  65%
    clip-path: inset(0 0 0 95%)

.border-progress
  &::after
    content: ""
    position: absolute
    top: 0
    left: 0
    right: 0
    bottom: 0
    border: 2px solid var(--bulma-link)
    transition: all .5s
    animation: clippath 3s infinite linear
    border-radius: var(--bulma-input-radius)

Solution is implemented in project using Bulma css framework

See it in Action

Explore More & Support Open Source

If you're looking for a user-friendly web interface to explore and manage your graph database, or you want to try this search input by yourself, consider checking out cypherGUI.

If you like it you can buy me a tea at