Edit in JSFiddle

  var canvas = document.getElementById('c');
  var progress = document.getElementById('progress');
  new nonogram.Game([
    [3],
    [1, 1],
    [5],
    [1],
    [3]
  ], [
    [3],
    [1, 1, 1],
    [1, 1, 1],
    [1, 1, 1],
    [2]
  ], 'c', {
    theme: {
      width: 500,
    },
    onAnimationEnd: loadSecondNonogram,
  });

  function loadSecondNonogram() {
    canvas.style.opacity = '0';
    setTimeout(function() {
      canvas.style.opacity = '1';
      progress.style.width = '33%';
      new nonogram.Game([
        [4],
        [8],
        [10],
        [2, 2, 2],
        [3, 2, 3],
        [12],
        [2, 6, 2],
        [2, 6, 2],
        [2, 4, 2],
        [3, 3],
        [8],
        [4]
      ], [
        [4],
        [8],
        [5, 3],
        [2, 3, 2],
        [3, 4, 2],
        [9, 2],
        [9, 2],
        [3, 4, 2],
        [2, 3, 2],
        [5, 3],
        [8],
        [4]
      ], 'c', {
        theme: {
          boldMeshGap: 4
        },
        onAnimationEnd: loadThirdNonogram,
      });
    }, 200);
  }

  function loadThirdNonogram() {
    canvas.style.opacity = '0';
    setTimeout(function() {
      canvas.style.opacity = '1';
      progress.style.width = '67%';
      var qr = new nonogram.Game([
        [7, 2, 2, 7],
        [1, 1, 1, 2, 1, 1],
        [1, 3, 1, 3, 1, 1, 3, 1],
        [1, 3, 1, 2, 1, 1, 3, 1],
        [1, 3, 1, 2, 1, 3, 1],
        [1, 1, 2, 2, 1, 1],
        [7, 1, 1, 1, 7],
        [2],
        [2, 3, 2, 1, 4],
        [1, 1, 3, 3, 2, 1],
        [3, 1, 3, 2, 2],
        [1, 1, 1, 3, 1, 1],
        [1, 5, 1, 1, 1, 1],
        [1, 1, 1, 1, 3, 1],
        [7, 1, 1],
        [1, 1, 1, 1, 1, 1, 1, 1],
        [1, 3, 1, 1, 1, 2, 2],
        [1, 3, 1, 2, 1, 2, 1, 1],
        [1, 3, 1, 1, 1, 2],
        [1, 1, 2, 1, 1],
        [7, 1, 3, 1]
      ], [
        [7, 1, 2, 7],
        [1, 1, 1, 1, 1, 1],
        [1, 3, 1, 1, 1, 3, 1],
        [1, 3, 1, 1, 1, 1, 3, 1],
        [1, 3, 1, 1, 1, 1, 3, 1],
        [1, 1, 2, 1, 1],
        [7, 1, 1, 1, 7],
        [4],
        [4, 2, 2, 2, 2, 2],
        [1, 2, 1, 1, 1, 2, 3],
        [1, 2, 2, 2],
        [2, 3, 1, 1, 1, 1, 1],
        [3, 3, 2, 3, 1, 1],
        [1, 1, 3, 2],
        [7, 1, 1],
        [1, 1, 1, 1, 1, 1, 1],
        [1, 3, 1, 3, 2, 3],
        [1, 3, 1, 2, 2, 1, 1],
        [1, 3, 1, 1, 1, 1, 1],
        [1, 1, 5, 3],
        [7, 1, 1, 2, 1]
      ], 'c', {
        theme: {
          boldMeshGap: 7,
        },
        onAnimationEnd: function() {
          progress.style.width = '100%';
        },
      });
      for (var i = 0; i < qr.m; i++) {
        for (var j = 0; j < qr.n; j++) {
          qr.grid[i][j] = (d(i, j, 3, 3) < 2 || d(i, j, 3, 3) === 3 || d(i, j, 3, 17) < 2 || d(i, j, 3, 17) === 3 || d(i, j, 17, 3) < 2 || d(i, j, 17, 3) === 3) ? nonogram.Solver.FILLED : nonogram.Solver.UNSET;
        }
      }
      qr.print();

      function d(x1, y1, x2, y2) {
        return Math.max(Math.abs(x1 - x2), Math.abs(y1 - y2));
      }
    }, 200);
  }