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:

Blogroll

Popular Posts