@key-frames behave like an loading bar

Is there anyway in CSS3 that i can do so the @key-frame-syntax behaves like an loading bar.

I want it to do when i hold on the div an green progress bar goes from 0% to 100% and redirect to another page. ?

Demo here!

Answers


You can do the following:

div {
  border-left:300px solid green;
  border-right:0px solid red;
  animation:loading 10s linear; /*add vendor prefixes here*/
}
@-webkit-keyframes loading {
  0% {border-left-width:0px;border-right-width:300px;}
  100% {border-left-width:300px;border-right-width:0px;}
}
@keyframes loading {
  0% {border-left-width:0px;border-right-width:300px;}
  100% {border-left-width:300px;border-right-width:0px;}
}

and then use the meta refresh tag to then reload the page:

<meta http-equiv="refresh" content="10; url=http://example.com/">

demo

I've set the loading time to 10 seconds here. You need to change the animation style and the meta tag if you want to change the 'loading time'.


Yeah, increasing the width of a div after every interval will make it behave like a loading bar.


Need Your Help

Changing SurfaceViews of MediaPlayer

android surfaceview android-videoview android-mediaplayer

I am attempting to change the SurfaceView of a MediaPlayer during playback. I am using the setDisplay method of MediaPlayer, but once the new Surface view is set, playback does not always continue ...

How to make property getters queries by default in Enterprise Architect

enterprise-architect

When setting a class attribute as a property in Enterprise Architect (Property checkbox in the attribute's window), is there a way to tag the getter as a query (IsQuery checkbox in the method's win...