By using Hours and Minutes rotation animation keyframes we can create Clock Loader.
Markup
<div class="panel"> <div class="b-loader"></div> </div>
CSS3
.panel { background:#2fc7f7; position:relative; } .b-loader { width: 84px; height: 84px; border: 2px solid #ffffff; border-radius: 50%; position: absolute; z-index: 60; top: 50px; left: 50%; margin-left: -44px; } .b-loader:before, .b-loader:after { content: ' '; background: url(/img/loader-arrow.png) 50% 50% no-repeat; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .b-loader:before { -o-animation: fxRotateMinute 500ms linear infinite; -moz-animation: fxRotateMinute 500ms linear infinite; -webkit-animation: fxRotateMinute 500ms linear infinite; -webkit-animation: fxRotateMinute 500ms linear infinite; } .b-loader:after { -o-animation: fxRotateHour 3000ms linear infinite; -moz-animation: fxRotateHour 3000ms linear infinite; -webkit-animation: fxRotateHour 3000ms linear infinite; -webkit-animation: fxRotateHour 3000ms linear infinite; } @-o-keyframes fxRotateMinute { from { -o-transform: rotate(0); } to { -o-transform: rotate(1turn); } } @-moz-keyframes fxRotateMinute { from { -moz-transform: rotate(0); } to { -moz-transform: rotate(1turn); } } @-webkit-keyframes fxRotateMinute { from { -webkit-transform: rotate(0); } to { -webkit-transform: rotate(1turn); } } @-webkit-keyframes fxRotateMinute { from { -webkit-transform: rotate(0); } to { -webkit-transform: rotate(1turn); } } @-o-keyframes fxRotateHour { from { -o-transform: rotate(0.25turn); } to { -o-transform: rotate(1.25turn); } } @-moz-keyframes fxRotateHour { from { -moz-transform: rotate(0.25turn); } to { -moz-transform: rotate(1.25turn); } } @-webkit-keyframes fxRotateHour { from { -webkit-transform: rotate(0.25turn); } to { -webkit-transform: rotate(1.25turn); } } @-webkit-keyframes fxRotateHour { from { -webkit-transform: rotate(0.25turn); } to { -webkit-transform: rotate(1.25turn); } }
0 comments:
Post a Comment