JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<div class="yirbadges_ProgressBarWrapper_2Vweo">
  <div class="yirbadges_ProgressBarFilled_3d5FO yir2023_ProgressBarFilled_3wtv1 yir2023_ProgressBarFilledGradient_1bVTX" style="clip-path: polygon(0% 0px, 99% 0%, 99% 100%, 0% 100%);">
    <div class="yirbadges_GlitterBox_1a0N2">
      <div class="yirbadges_Glitter_hxngh"></div>
      <div class="yirbadges_Glitter_hxngh yirbadges_GlitterSecond_2Gj-8"></div>
    </div>
  </div>
</div>

CSS

.yirbadges_ProgressBarWrapper_2Vweo {
    animation-name: yirbadges_progressBar_3ghXb;
    animation-duration: 2s;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    height:20px;
}
 .yirbadges_ProgressBarWrapper_2Vweo {
    animation-delay: 2.3s;
}

 .yirbadges_ProgressBarWrapper_2Vweo {
    width: 100%;
    height: 100%;
    clip-path: inset(0 100% 0 0);
}
.yir2023_ProgressBarFilled_3wtv1.yir2023_ProgressBarFilledGradient_1bVTX {
    background: linear-gradient(to right, #008352 0%, #6a00df 50%, #925801 90%);
}

.yirbadges_ProgressBarFilled_3d5FO {
    box-shadow: 0.2vw 0.3vw 0.3vw rgba(0,0,0,.3);
    height: 100%;
    border-radius: 4px;
}
.yirbadges_ProgressBarFilled_3d5FO .yirbadges_GlitterBox_1a0N2 {
    width: 100%;
    height: 100%;
    background-image: url(/public/images/yearinreview/glitter_albedo.png);
    -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 55%, black 90%);
    mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 55%, black 90%);
    mix-blend-mode: screen;
    position: relative;
    background-repeat: repeat-y;
    background-position: 100% 0;
    background-size: 512px contain;
    border-radius: 4px;
}
.yirbadges_ProgressBarFilled_3d5FO .yirbadges_GlitterBox_1a0N2 .yirbadges_Glitter_hxngh {
    position: absolute;
    right: 0;
    width: 512px;
    height: 100%;
    background-image: url(https://store.cloudflare.steamstatic.com/public/images/yearinreview/glitter_color.png);
    -webkit-mask-image: url(https://store.cloudflare.steamstatic.com/public/images/yearinreview/glitter.png);
    mask-image: url(https://store.cloudflare.steamstatic.com/public/images/yearinreview/glitter.png);
    mask-size: 32px;
    -webkit-mask-size: 32px;
    mix-blend-mode: screen;
    animation-name: yirbadges_glitterMove_2UzEp;
    animation-duration: 15s;
    animation-timing-function: linear;
    animation-iteration-count:...