HappilyHappy
New Member
Im trying to creating a faux progress bar in a modal box. Should keep the visitor at the modal box for 60 seconds and then disappear. What would be the best way of approaching this?I tried to illustrate what I want to happen with :hover. \[code\].progressbar{ width:80%; height:16px; margin:0 auto 20px auto; padding:0px; background:#cfcfcf; border-width:1px; border-style:solid; border-color: #aaa #bbb #fff #bbb; box-shadow:inset 0px 2px 3px #bbb; }.progressbar,.progressbar-inner{ border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; -o-border-radius:4px;}.progressbar-inner{ width:0%; /* Change to actual percentage */ height:100%; background-size:18px 18px; background-color: #82ae40; box-shadow:inset 0px 2px 8px rgba(255, 255, 255, .5), inset -1px -1px 0px rgba(0, 0, 0, .2);}.progressbar:hover .progressbar-inner{ width:100%; -webkit-transition: width 60s ease-in; -moz-transition: width 60s ease-in; -o-transition: width 60s ease-in; transition: width 60s ease-in; }.progressbar .progressbar-inner,.progressbar:hover .progressbar-inner{ -webkit-transition: width 60s ease-in; -moz-transition: width 60s ease-in; -o-transition: width 60s ease-in; transition: width 60s ease-in; }\[/code\]