SVG Rainbow Test Tube Loading Progress

I decided to go with something a lot more minimal for the project I'm working on, after I saw how cartoonish this looked in context - but I still though it was fun enough to share. Not worth the time to optimize since it was only a visual proof of concept, so please go easy on me that the code isn't that pretty.

by Admiral Potato

HTML

<script src="https://unpkg.com/[email protected]"></script>
<div id="holder">
  <div class="halfsies">
    <a class="button" @click="reset">Reset</a>
    <a class="button" @click="load">Load</a>
  </div>
  <div class="halfsies">
    <span>Load: {{loaded.toFixed(2)}}</span>
    <span>Decode: {{decoded.toFixed(2)}}</span>
  </div>
  <svg class="video-status-icon" viewBox="0 0 128 128">
    <defs>
      <clipPath id="clip-path">
        <path d="M52,32v68a12,12,0,0,0,12,12h0a12,12,0,0,0,12-12V32Z" fill="none"/>
      </clipPath>
      <linearGradient id="linear-gradient" x1="64" y1="112" x2="64" y2="32" gradientUnits="userSpaceOnUse">
        <stop offset="0" stop-color="#00a59c"/>
        <stop offset="0.2" stop-color="#00a877"/>
        <stop offset="0.4" stop-color="#b1d700"/>
        <stop offset="0.6" stop-color="#efcc00"/>
        <stop offset="0.8" stop-color="#f28800"/>
        <stop offset="1" stop-color="#f2003c"/>
      </linearGradient>
      <linearGradient id="linear-gradient-2" x1="64" y1="112" x2="64" y2="32" gradientUnits="userSpaceOnUse">
        <stop offset="0" stop-color="#f2003c"/>
        <stop offset="0.2" stop-color="#d00081"/>
        <stop offset="0.4" stop-color="#9f00c5"/>
        <stop offset="0.6" stop-color="#006ebf"/>
        <stop offset="0.8" stop-color="#0093af"/>
        <stop offset="1" stop-color="#00a59c"/>
      </linearGradient>
      <g id="beaker">
        <path d="M48,20s4,6.03483,4,9.65685V100a12,12,0,0,0,12,12h0a12,12,0,0,0,12-12V29.65685A13.65684,13.65684,0,0,1,80,20"
              fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="8"/>
        <line x1="64" y1="96" x2="76" y2="96" fill="none" stroke="#000" stroke-linecap="round"
              stroke-linejoin="round" stroke-width="4"/>
        <line x1="64" y1="80" x2="76" y2="80" fill="none" stroke="#000" stroke-linecap="round"
              stroke-linejoin="round" stroke-width="4"/>
        <line x1="64" y1="64" x2="76" y2="64" fill="none"...

CSS

html {
	box-sizing: border-box;
}
*, *:before, *:after {
	box-sizing: inherit;
}
* {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
  font-size: 20px;
  font-family: sans-serif;
  text-align: center;
}
.halfsies{
  display: flex;
  margin: auto;
  width: 60vmin;
}
.halfsies > *{
  display: block;
  width: 50%;
  margin: 1rem 0.25rem 0;
}

.button{
  cursor: pointer;
  line-height: 2rem;
  background-color: #0275d8;
  border-radius: 1rem;
  color: #fff;
}

svg{
  display: block;
  max-height: 80vmin;
  margin-top: -1rem;
}

JavaScript

new Vue({
   el: '#holder',
   data: {
     loaded: 1.0,
     decoded: 0.5
   },
   mounted: function(){
     this.load();
   },
   methods: {
     reset: function(){
       if(this.interval){
         clearInterval(this.interval);
         this.interval = null;
       }
       this.loaded = 0;
       this.decoded = 0;
     },
     load: function(){
       let loader = this;
       loader.reset();
       loader.interval = setInterval(function(){
         loader.tick();
       }, 100);
     },
     tick: function(){
       if(this.loaded < 1){
         this.loaded += 0.05;
       } else if(this.decoded < 1){
         this.decoded += 0.05;
       }
       if(this.decoded === 1 && this.decoded === 1){
         clearInterval(this.interval);
         this.interval = null;
       }
     }
   }
 });