<script type="text/js-worker">
const isPrime = num => {
  for (let i = 2; i < num; i++) {
    if (num % i === 0) {
      return false
    }
  }
  return true
}

const getNext = (current = 0) => {
  while (!isPrime(current)) {
    current += 1
  }
  return current
}

self.onmessage = async e => {
  const { data } = e
  
  if (data.start) {
    try {
      let primes = [100000000]
      
      while (primes.length < 20) {
        const previous = primes[primes.length - 1]
        
        primes.push(getNext(previous + 1))

        self.postMessage(primes)
      }
    } catch (error) {
      console.error(error)
    }
  }
}
</script>

<button onclick="initWorkerLoad()">Get me some primes!</button>

<button onclick="resetList()">Reset</button>

<br />
Animated with CSS
<div class="animations">
  <div class="transformAnimation"></div>
  <div class="marginAnimation"></div>
</div>

Animated with JS
<div class="animations">
  <div class="static" id="static" style={{ transform: `translate(${this.state.margin}px)` }}></div>
  </div>
</div>

Worker returned:
<div class="primesContainer">
  <ul key={p} class="primes" id="primes">
  </ul>
</div>

.primesContainer {
  text-align: left;
  display: flex;
  flex-wrap: wrap;
}


.primes {
  padding: 0 10px;
  display: flex;
  flex-wrap: wrap;
  > li {
    margin: 5px 30px 5px 0px;
  }
}

.animations {
  background-color: "red";
  width: 300px;
  height: 180px;
  position: relative;
}
  .transformAnimation,
  .marginAnimation,
  .static {
    position: absolute;
    left: 0;
    width: 50px;
    height: 50px;
    border-radius: 5px;
    margin: 0;
  }
  .transformAnimation {
    top: 30px;
    background-color: #44f;
    animation: transformLeft 4s infinite linear;
  }
  .marginAnimation {
    top: 100px;
    background-color: #f44;
    animation: marginLeft 2s infinite linear;
  }
  .static {
    top: 30px;
    background-color: #555;
  }

@keyframes transformLeft {
  0% {
    transform: translate(0px);
  }
  100% {
    transform: translate(300px);
  }
}

@keyframes marginLeft {
  from {
    margin-left: 0px;
  }
  to {
    margin-left: 300px;
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

var blob = new Blob(
  Array.prototype.map.call(
    document.querySelectorAll('script[type="text\/js-worker"]'),
    function (oScript) { return oScript.textContent; }
  ),
  { type: 'text/javascript' }
)

// Create a new worker containing all "text/js-worker" scripts
const worker = new Worker(window.URL.createObjectURL(blob))

// Listen for a message from the worker
worker.addEventListener('message', e => {
  appendToList(e.data[e.data.length - 1])
})

appendToList = (content) => {
  // Create a <li> node
  let node = document.createElement("LI")
  // Append the text to <li>
  node.appendChild(document.createTextNode(content))
  document.getElementById("primes").appendChild(node);  
}

initWorkerLoad = () => {
  worker.postMessage({ start: true })
}

resetList = () => {
  const list = document.getElementById("primes");
  while (list.firstChild) {
      list.removeChild(list.firstChild);
  }
}

let margin = 0
startAnimation = () => {
  margin = (margin + 2) % 300
  document.getElementById("static").style.marginLeft = `${margin}px`
  requestAnimationFrame(startAnimation)
}

requestAnimationFrame(startAnimation)