JSFiddle - React, Tailwind, and code Playground

by Aashish Manandhar

HTML

<div class="page">
                <div class="saucer">
                    <div class="cup p70 over50 big dark" id="cup">
                        <span id='time'>25:30</span>
                        <div class="slice">
                            <div class="bar"></div>
                            <div class="fill"></div>
                        </div>
                    </div>

                   <!--  <div class="c100 p25 dark orange">
                        <span>25%</span>
                        <div class="slice">
                            <div class="bar"></div>
                            <div class="fill"></div>
                        </div>
                    </div>
                    
                    <div class="c100 p12 dark small orange">
                        <span>12%</span>
                        <div class="slice">
                            <div class="bar"></div>
                            <div class="fill"></div>
                        </div>
                    </div> -->

                </div>
                <!-- /orange -->

            </div><!-- /.dark-area -->


        </div>

SCSS

body{
 background: #4DB6AC;
 background: #B64D4D;
}
.page {
 font-family: sans-serif;
 margin: 100px;
}

.saucer {
    background: radial-gradient(#a2a2b8,white);
    box-shadow: 2px 2px 2px #555454;
    width: 290px;
    height: 290px;
    border-radius: 50%;
}
.saucer:after {
    z-index: 2;
    height: 65px;
    width: 28px;
    transform: rotate(-45deg);
    transform: translate(15px, 25px) rotate(-52deg);
    /* color: red; */
    background: white;
    content: "";
    display: block;
    border-radius: 10px;
    box-shadow: -1px 1px 3px #6f6c6c;
}

.cup .bar, .cup.over50 .fill {
  position: absolute;
  border: 0.05em solid #307bbb;
  width: 0.9em;
  height: 0.9em;
  clip: rect(0em, 0.5em, 1em, 0em);
  border-radius: 50%;
  transform: rotate(0deg);
  }

.cup.over50 .bar:after, .cup.over50 .fill{
  transform: rotate(180deg);
}

.cup {
  position: relative;
  font-size: 120px;
  width: 1em;
  height: 1em;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  float: left;
  /* margin: 0 0.1em 0.1em 0; */
  margin: 25px;
  box-shadow: 1px 3px 6px #1e1e1e;
  z-index: 3;
  transition: transform 0.5s ease;
  background-color: #cccccc;
}
.cup *, .cup *:before, .cup *:after {
  box-sizing: content-box;
}
.cup.center {
  float: none;
  margin: 0 auto;
}
.cup.big {
  font-size: 240px;
}
.cup.small {
  font-size: 80px;
}
.cup > span {
  position: absolute;
  width: 100%;
  z-index: 1;
  left: 0;
  top: 0;
  width: 5em;
  line-height: 5em;
  font-size: 0.2em;
  color: #cccccc;
  display: block;
  text-align: center;
  white-space: nowrap;
  transition-property: all;
  transition-duration: 0.2s;
  transition-timing-function: ease-out;
}
.cup:after {
  position: absolute;
  top: 0.05em;
  left: 0.05em;
  display: block;
  content: " ";
  border-radius: 50%;
  background-color: #2C3C57;
  width: 0.9em;
  height: 0.9em;
  transition-property: all;
  transition-duration: 0.1s;
 ...

JavaScript

var a = 1;
(function(){
setInterval(()=>{
 const className = `cup p${a} ${a>50?"over50":"o"} big dark`;
 document.getElementById('time').innerHTML = '00:'+(100 - a);
 document.getElementById('cup').className = className;
 a++;
 if(a==100) a=1;
},1000);
})();