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);
  }
}

4 comments:

  1. You are very good at that.
    คาสิโนออนไลน์ที่น่าเชื่อถือและมีความเป็นมืออาชีพที่สุดในตอนนี้
    โปรโมชั่นGclub ของทางทีมงานตอนนี้แจกฟรีโบนัส 50%
    เพียงแค่คุณสมัคร สล็อตออนไลน์ กับทางทีมงานของเราเพียงเท่านั้น
    ร่วมมาเป็นส่วนหนึ่งกับเว็บไซต์คาสิโนออนไลน์ของเราได้เลยค่ะ
    สมัครสล็อตออนไลน์ >>> Goldenslot
    สนใจร่วมสนุกกับ คาสิโนออนไลน์ คลิ๊กได้เลย
    มีทั้งคาสิโนออนไลน์ หวยออนไลน์ ฟุตบอลออนไลน์ สล็อตออนไลน์ และอื่นๆอีกมากมาย

    ReplyDelete
  2. Good blog. Keep sharing. I love them Are you also searching for Spanish writing help? we are the best solution for you. We are best known for delivering Spanish writing services to students without having to break the bank

    ReplyDelete

Blogroll

Follow this blog by Email

Popular Posts