@property --progress-value {
  syntax: '<integer>';
  inherits: false;
  initial-value: 0;
}

@keyframes html-progress {
  to { --progress-value: 60; }
}

@keyframes css-progress {
  to { --progress-value: 35; }
}

@keyframes js-progress {
  to { --progress-value: 10; }
}

@keyframes c-progress {
  to { --progress-value: 27; }
}

@keyframes cpp-progress {
  to { --progress-value: 32; }
}

@keyframes ts-progress {
  to { --progress-value: 0; }
}

@keyframes java-progress {
  to { --progress-value: 0; }
}

@keyframes photo-progress {
  to { --progress-value: 33; }
}

@keyframes bot-progress {
  to { --progress-value: 18; }
}

.progress-bar-container{
  margin: 10px auto 0px;
}

.progress-bar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 10px 20px;
  /* to center the percentage value */
  display: flex;
  justify-content: center;
  align-items: center;
}

.progress-bar::before {
  counter-reset: percentage var(--progress-value);
  content: counter(percentage) '%';
}

.html {
  background: 
    radial-gradient(closest-side, #1b1c20 79%, transparent 80% 100%, white 0),
    conic-gradient( #00b8a8 calc(var(--progress-value) * 1%), lightcyan 0);
  animation: html-progress 5s 5 forwards;
}

.html::before {
  animation: html-progress 5s 5 forwards;
}

.css {
  background: 
    radial-gradient(closest-side, #1b1c20 79%, transparent 80% 100%, white 0),
    conic-gradient( #00b8a8 calc(var(--progress-value) * 1%), lightcyan 0);
  animation: css-progress 5s 5 forwards;
}

.css::before {
  animation: css-progress 5s 5 forwards;
}

.js {
  background: 
    radial-gradient(closest-side, #1b1c20 79%, transparent 80% 100%, white 0),
    conic-gradient( #00b8a8 calc(var(--progress-value) * 1%), lightcyan 0);
  animation: js-progress 5s 5 forwards;
}

.js::before {
  animation: js-progress 5s 5 forwards;
}

.c {
  background: 
    radial-gradient(closest-side, #1b1c20 79%, transparent 80% 100%, white 0),
    conic-gradient( #00b8a8 calc(var(--progress-value) * 1%), lightcyan 0);
  animation: c-progress 5s 5 forwards;
}

.c::before {
  animation: c-progress 5s 5 forwards;
}

.cpp {
  background: 
    radial-gradient(closest-side, #1b1c20 79%, transparent 80% 100%, white 0),
    conic-gradient( #00b8a8 calc(var(--progress-value) * 1%), lightcyan 0);
  animation: cpp-progress 5s 5 forwards;
}

.cpp::before {
  animation: cpp-progress 5s 5 forwards;
}

.ts {
  background: 
    radial-gradient(closest-side, #1b1c20 79%, transparent 80% 100%, white 0),
    conic-gradient( #00b8a8 calc(var(--progress-value) * 1%), lightcyan 0);
  animation: ts-progress 5s 5 forwards;
}

.ts::before {
  animation: ts-progress 5s 5 forwards;
}

.java {
  background: 
    radial-gradient(closest-side, #1b1c20 79%, transparent 80% 100%, white 0),
    conic-gradient( #00b8a8 calc(var(--progress-value) * 1%), lightcyan 0);
  animation: java-progress 5s 5 forwards;
}

.java::before {
  animation: java-progress 5s 5 forwards;
}

.photo {
  background:
    radial-gradient(closest-side, #1b1c20 79%, transparent 80% 100%, white 0),
    conic-gradient(#00b8a8 calc(var(--progress-value) * 1%), lightcyan 0);
  animation: photo-progress 5s 5 forwards;
}

.photo::before {
  animation: photo-progress 5s 5 forwards;
}

.bot {
  background:
    radial-gradient(closest-side, #1b1c20 79%, transparent 80% 100%, white 0),
    conic-gradient(#00b8a8 calc(var(--progress-value) * 1%), lightcyan 0);
  animation: bot-progress 5s 5 forwards;
}

.bot::before {
  animation: bot-progress 5s 5 forwards;
}




/*body {
  font-family: -apple-system, system-ui, Helvetica, Arial, sans-serif;
  margin: 30px auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  max-width: 600px;
}

h2 {
  text-align: center;
}*/

progress {
  visibility: hidden;
  width: 0;
  height: 0;
}