CSS3 načítací lišta

Pravděpodobně při nějakém skriptu se bude hodit tato CSS3 načítací lišta:

Kód:

<style>
.view_port { background-color:black; height:25px; width:100%; overflow: hidden;}.cylon_eye { color:white; height: 100%; width: 20%; background-color: red; background-image: linear-gradient(to right, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%); -webkit-animation: move_eye 4s linear 0s infinite alternate; animation: move_eye 4s linear 0s infinite alternate;} @-webkit-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; } } @keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; } }
</style>
<div class=“view_port“> <div class=“cylon_eye“></div></div>

Ukázka:

Tato lišta využívá mnoha experimentálních technologií, nemusí tedy v nepodporovaných prohlížečích fungovat.