CSS Sliding Bar - Animation Idea #2

Here is a bar that slides across the widget.

I imagine you could use this idea in a variety of ways.
I would be interested to hear about all the ways you might find a use for something like this.

Here is the code. Feel free to adjust it to your liking.

/* Here is the CSS for your Branding and Look section */

/* Sliding Bar */
#slide {
  width: 50px;
  height: 20px;
  background-color: red;
  border-radius: 40px;
  animation-name: slide;
  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  animation-delay: 2s;
}

@keyframes slide {
  from {width: 5%;}
  to {width: 100%;}
}

<!-- Here is the HTML I used in the widget -->

<div style="padding:20px;">
<div id="slide"></div>
</div>
<p style="margin:20px;">
Sliding Bar
</p>