Demo
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset='UTF-8'> | |
| <title></title> | |
| <style> | |
| #loading-status { | |
| width: 300px; | |
| margin-left: 2px; | |
| border: 1px #669CB8 solid; | |
| -webkit-box-shadow: 0px 2px 2px #D0D4D6; | |
| margin-top: 70px; | |
| height: 20px; | |
| -webkit-border-radius: 10px; | |
| background: -webkit-gradient(linear, 0 0, 0 100%, from(#E1E9EE), to(white)); | |
| padding: 1px; | |
| } | |
| #process { | |
| background: -webkit-gradient(linear, 0 0, 0 100%, from(#7BC3FF), color-stop(0.5,#42A9FF), to(#7BC3FF)); | |
| width: 0%; | |
| height: 100%; | |
| -webkit-border-radius: 10px; | |
| /* -webkit-transition: width 1s ease-in-out; */ | |
| -webkit-animation: load 1s ease-in-out infinite; | |
| } | |
| @-webkit-keyframes load { | |
| 0% { | |
| width: 0%; | |
| } | |
| 100% { | |
| width: 80%; | |
| } | |
| } | |
| .box { | |
| height: 20px; | |
| position: relative; | |
| background: hsl(0, 0%, 35%); | |
| -webkit-border-radius: 15px; | |
| padding: 6px; | |
| -webkit-box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3); | |
| width: 300px; | |
| } | |
| .box > span { | |
| display: block; | |
| height: 100%; | |
| -webkit-border-top-right-radius: 8px; | |
| -webkit-border-bottom-right-radius: 8px; | |
| -webkit-border-top-left-radius: 15px; | |
| -webkit-border-bottom-left-radius: 15px; | |
| background-image: -webkit-gradient( | |
| linear, | |
| left bottom, | |
| left top, | |
| color-stop(0, #63DE4E), | |
| color-stop(1, #34A702) | |
| ); | |
| -webkit-box-shadow: | |
| inset 0 2px 9px rgba(255,255,255,0.3), | |
| inset 0 -2px 6px rgba(0,0,0,0.4); | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .animate > span > span { | |
| content: ""; | |
| position: absolute; | |
| top: 0; left: 0; bottom: 0; right: 0; | |
| background-image: | |
| -webkit-gradient(linear, 0 0, 100% 100%, | |
| color-stop(.25, rgba(255, 255, 255, .2)), | |
| color-stop(.25, transparent), color-stop(.5, transparent), | |
| color-stop(.5, rgba(255, 255, 255, .2)), | |
| color-stop(.75, rgba(255, 255, 255, .2)), | |
| color-stop(.75, transparent), to(transparent) | |
| ); | |
| z-index: 2; | |
| -webkit-background-size: 40px; | |
| -webkit-animation: move 2s linear infinite; | |
| -webkit-border-top-right-radius: 8px; | |
| -webkit-border-bottom-right-radius: 8px; | |
| -webkit-border-top-left-radius: 20px; | |
| -webkit-border-bottom-left-radius: 20px; | |
| overflow: hidden; | |
| } | |
| @-webkit-keyframes move { | |
| 0% { | |
| background-position: 0 0; | |
| } | |
| 100% { | |
| background-position: 50px 50px; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="box animate"> | |
| <span style="width: 80%"><span></span></span> | |
| </div> | |
| <div id="loading-status"> | |
| <div id="process"></div> | |
| </div> | |
| </body> | |
| </html> |
