A Pen by Samuil Lembas.

index.html

<div class="timer">
  <div class="hand">
  </div>
</div>

style.css

body, html {
  height: 100%; }

body {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #cc3333; }

.timer {
  width: 5em;
  height: 5em;
  display: flex;
  align-items: center;
  justify-content: center;
  border: .5em solid #f5f5f5;
  border-radius: 100%;
  position: relative; }
  .timer:before, .timer:after {
    content: '';
    display: block;
    position: absolute; }
  .timer:before {
    height: .5em;
    width: .5em;
    top: -1.48em;
    border-radius: 100%;
    left: 50%;
    margin-left: -0.75em;
    background: #cc3333;
    border: .5em solid #f5f5f5; }
  .timer:after {
    width: 1em;
    height: 1em;
    background: #f5f5f5;
    right: 0;
    top: -0.25em;
    border-radius: 100%; }

.hand {
  background: #cc3333;
  height: 1em;
  width: 1em;
  position: relative;
  display: flex;
  justify-content: center;
  border-radius: 100%;
  border: 1.4em solid #f5f5f5; }
  .hand:before, .hand:after {
    content: '';
    display: block;
    position: relative; }
  .hand:before {
    width: .325em;
    height: 1.5em;
    top: -1.35em;
    background: #cc3333;
    -webkit-animation: countdown 5s linear infinite;
    -webkit-transform-origin: 50% 125%; }

@-webkit-keyframes countdown {
  0% {
    -webkit-transform: rotate(0deg); }

  100% {
    -webkit-transform: rotate(360deg); } }

Timer-without-SCSS.markdown

Timer without SCSS

Timer on clean standard CSS

A Pen by Samuil Lembas on CodePen.

License.