CSS Sliding Bar - Animation Idea #2

  • 25 January 2022
  • 0 replies
  • 289 views

Userlevel 7
Badge +6

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.

CSS Sliding Bar

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>

 


0 replies

Be the first to reply!

Reply