Creating a preloading screen with a percentage and svgs

Question

I'm currently working on a project in which I have to build a loading screen that includes a percentage and custom-made svgs animating. I've looked all over the internet but can't find anything that seems to be what I need? I can't seem to even get a simple loading bar to work!

I included what I currently have below. I've been using this walkthrough for progressbar.js since it includes animation and percentages, but any guidance would be much appreciated!

(My idea was for the pumpkin seeds to rotate around each other as the bar loads, then join together and have the pumpkin pop up once the bar hits 100%)

var ProgressBar = required('progressbar.js')
var line = new ProgressBar.Line('#container');


var bar = new ProgressBar.Line('#container', {
  strokeWidth: 4,
  easing: 'easeInOut',
  duration: 1400,
  color: '#92D4CE',
  trailColor: '#78BA43',
  trailWidth: 1,
  svgStyle: {width: '100%', height: '100%'},
  text: {
    style: {
      // Text color.
      // Default: same as stroke color (options.color)
      color: '#999',
      position: 'absolute',
      right: '0',
      top: '30px',
      padding: 0,
      margin: 0,
      transform: null
    },
    autoStyleContainer: false
  },
  from: {color: '#92D4CE'},
  to: {color: '#78BA43'},
  step: (state, bar) => {
    bar.setText(Math.round(bar.value() * 100) + ' %');
  }
});

bar.animate(1.0);  // Number from 0.0 to 1.0

body{
  #container {
  margin: 20px;
  width: 400px;
  height: 8px;
  position: relative;
}
}

<body>

<div id="container"></div>

<div id="animated">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 144">
    <style>
      .st0{fill:#fee0c4}.st1{fill:#fbcaba}.st2{fill:#feeee7}.st4{fill:#d4644b}.st6{fill:#957754}.st8{fill:none;stroke:#3a2e18;stroke-width:.3793;stroke-miterlimit:10}
    </style>
    <g id="seeds">
      <g id="seedThree">
        <path class="st0" d="M51.78 89.68c0 3.98-3.69 7.2-6.81 7.2-3.13 0-6.81-3.22-6.81-7.2s4.26-15.15 6.81-17.92c2.15-2.34 6.81 13.94 6.81 17.92z"/>
        <path class="st1" d="M46.81 74.91s8.99 17.87-1.85 20.98c.07 0 12.63.01 1.85-20.98zM43.26 76.56S40.2 85.3 39.5 88.35c.01 0 1.41-7.12 3.76-11.79z"/>
        <ellipse transform="rotate(-18.558 40.64 90.84)" class="st2" cx="40.65" cy="90.84" rx="1.14" ry="1.94"/>
        <ellipse transform="rotate(-18.558 40.319 88.068)" class="st2" cx="40.33" cy="88.07" rx=".21" ry=".36"/>
      </g>
      <g id="seedTwo">
        <path class="st0" d="M77.07 49.58c0 3.98-3.69 7.2-6.81 7.2-3.13 0-6.81-3.22-6.81-7.2s4.26-15.15 6.81-17.92c2.15-2.34 6.81 13.94 6.81 17.92z"/>
        <path class="st1" d="M72.1 34.81s8.99 17.87-1.85 20.98c.06 0 12.63.01 1.85-20.98zM68.55 36.46s-3.06 8.74-3.76 11.79c.01 0 1.4-7.12 3.76-11.79z"/>
        <ellipse transform="rotate(-18.558 65.931 50.743)" class="st2" cx="65.94" cy="50.74" rx="1.14" ry="1.94"/>
        <ellipse transform="rotate(-18.558 65.61 47.97)" class="st2" cx="65.62" cy="47.97" rx=".21" ry=".36"/>
      </g>
      <g id="seedOne">
        <path class="st0" d="M100.36 87.93c0 3.98-3.69 7.2-6.81 7.2-3.13 0-6.81-3.22-6.81-7.2S91 72.78 93.55 70.01c2.15-2.34 6.81 13.95 6.81 17.92z"/>
        <path class="st1" d="M95.39 73.16s8.99 17.87-1.85 20.98c.06 0 12.63.01 1.85-20.98zM91.84 74.81s-3.06 8.74-3.76 11.79c0 0 1.4-7.12 3.76-11.79z"/>
        <ellipse transform="rotate(-18.558 89.215 89.095)" class="st2" cx="89.22" cy="89.09" rx="1.14" ry="1.94"/>
        <ellipse transform="rotate(-18.558 88.895 86.322)" class="st2" cx="88.9" cy="86.32" rx=".21" ry=".36"/>
      </g>
    </g>
    <g id="pumpkin">
      <path d="M72.08 50.12S41.63 36.8 26.62 58.96c-11.11 16.4-7.86 43.14 11.56 54.45 11.99 6.98 36.45 9.02 58.99 3.15 23.51-6.12 33.21-33.49 21.8-54.65-2.51-4.61-14.42-20.63-46.89-11.79z" fill="#f89a56"/>
      <path class="st4" d="M99.35 56.7s11.81 33.21 6.18 52.43c0 0 10.52-25.04-6.18-52.43zM44.23 55.24s-12.18 25.09-4.16 52.15c-.59-.32-14.85-25.74 4.16-52.15zM72.54 60.93s-4.81 36.14 0 49.93c.23-.01.92-45.46 0-49.93z"/>
      <path d="M68.3 53.41s2.94 4.05 7.6 1.84 4.05-17.42 16.93-24.41c0-.37-5.27-3.68-10.18-3.43-.37.12-.26 1.56-.26 1.56l-.74-1.57S73.68 42.27 68.3 53.41z" fill="#92985c"/>
      <path class="st6" d="M68.3 53.41s5.9 1.12 7.8-2.89c0 0-.05 1.52-.43 2.11-.38.6 4.01-3.83 6.01-8.71-.03.06-3.36 9.03-4.29 10.01-.05.06-3.94 4.7-9.09-.52zM82.61 29.73s6.91 1.39 7.65 1.43c.73.04 1.22-.39 1.54-.15 0 .04-.17-.31-1.32.4-.01-.04.21.42-7.87-1.68z"/>
      <path d="M69.14 53.41s4.44-12.01-3.34-11.06c-7.78.94-7.15-6.84-7.15-6.84" fill="none" stroke="#3a2e18" stroke-width=".576" stroke-miterlimit="10"/>
      <circle class="st8" cx="70.07" cy="41.27" r="1.92"/>
      <path class="st8" d="M74.38 54.44s7.58-4.77 7.91.8-4.83 7.44 2.2 10.95"/>
    </g>
  </svg>
</div>

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Greensock -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="js/progressbar.js/dist/progressbar.js"></script>
<script src="js/scripts.js"></script>
</body>

Here is some sample that could helps: https://stackoverflow.com/questions/20823767/welcome-screen-before-website-loads-click-to-enter-splash-screen — felipekm, Feb 25 '19 at 20:35

Paul LeBeau · Answer 1 · 2019-02-26T16:38:00.300

I'm not familiar with progressbar.js, so I can't really help you with that so much.

However this is pretty simple to do with CSS animations and transitions. Combined with a trivial amount of Javascript.

For the purposes of demonstrating setting an increasing amount of progress, I am using a simple requestAnimationFrame() animation loop. Documentation for how the rest of it works is in the code.

var  mysvg = document.querySelector("#animated svg");


//
// Call this function to set the amount of progress (0 .. 1)
// 
function setProgress(progress)
{
  // For debug purposes only: show the progress amount in a div so we can see the progress
  document.getElementById("test").textContent = progress.toFixed(2);

  // When progress is complete (1) start the pumpkin animation by adding a class to the SVG
  if (progress >= 1) {
    mysvg.classList.add("show-pumpkin");
  } else {
    mysvg.classList.remove("show-pumpkin");
  }
}


// Set the initial state of the progress to 0
setProgress(0);


// Everything else below is just to simulate you calling setProgress() with an increasing value.
//
// A little animation that increments the progress amount for us.
// In a real situation you would be setting this yourself based on how much of your initialisation is complete etc.
//
var amt = 0;

function incrementPogress() {
  amt += 0.005;
  setProgress(amt);
  if (amt <= 1)
    window.requestAnimationFrame(incrementPogress);
}


// Start our progress incrementing simulation
window.requestAnimationFrame(incrementPogress);

svg {
  width: 500px;
}

/* pumkin starts out very small and invisible */
#pumpkin {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transform: scale(0.0001);
  opacity: 0;
}

/* When the "show-pumkin" class is added to the SVG, wait 0.5s, then
   make the pumkin visible, and scale it up with a bounce easing function. */
.show-pumpkin #pumpkin {
  opacity: 1;
  transition: transform 0.5s;
  transition-delay: 0.45s;
  transform: scale(1);
  transition-timing-function: cubic-bezier(0.550, 1.650, 0.615, 0.840);
}


/* The group of seeds rotates constantly */
#seeds {
  transform-origin: 72px 72px;
  animation: rotate-clockwise 2s linear infinite;
}

/* The individual seeds have their own rotations.
   With varying durations and directions. */
#seeds g {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: rotate-clockwise 1.8s linear infinite;
  animation-direction: reverse;
}

#seeds #seedTwo {
  animation-direction: normal;
  animation-duration: 10s;
}

#seeds #seedThree {
  animation-duration: 1s;
}

/* Keyframe definition to cause a 360 degree rotation.
   Used for the group and individual seed rotations. */
@keyframes rotate-clockwise {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* When the "show-pumkin" class is added to the SVG, start shrinking the seeds
   towards the centre of the SVG.  We apply this transform to a new "seed-container"
   group so that it doesn't interfere with the rotation transform that's already
   happening to "#seeds". */
.show-pumpkin #seeds-container {
  transform-origin: 72px 72px;
  transition: transform 0.5s;
  transform: scale(0.1);
  transition-timing-function: ease-out;
}

<div id="animated">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 144">
    <style>
      .st0{fill:#fee0c4}.st1{fill:#fbcaba}.st2{fill:#feeee7}.st4{fill:#d4644b}.st6{fill:#957754}.st8{fill:none;stroke:#3a2e18;stroke-width:.3793;stroke-miterlimit:10}
    </style>
    <g id="seeds-container">
      <g id="seeds">
        <g id="seedThree">
          <path class="st0" d="M51.78 89.68c0 3.98-3.69 7.2-6.81 7.2-3.13 0-6.81-3.22-6.81-7.2s4.26-15.15 6.81-17.92c2.15-2.34 6.81 13.94 6.81 17.92z"/>
          <path class="st1" d="M46.81 74.91s8.99 17.87-1.85 20.98c.07 0 12.63.01 1.85-20.98zM43.26 76.56S40.2 85.3 39.5 88.35c.01 0 1.41-7.12 3.76-11.79z"/>
          <ellipse transform="rotate(-18.558 40.64 90.84)" class="st2" cx="40.65" cy="90.84" rx="1.14" ry="1.94"/>
          <ellipse transform="rotate(-18.558 40.319 88.068)" class="st2" cx="40.33" cy="88.07" rx=".21" ry=".36"/>
        </g>
        <g id="seedTwo">
          <path class="st0" d="M77.07 49.58c0 3.98-3.69 7.2-6.81 7.2-3.13 0-6.81-3.22-6.81-7.2s4.26-15.15 6.81-17.92c2.15-2.34 6.81 13.94 6.81 17.92z"/>
          <path class="st1" d="M72.1 34.81s8.99 17.87-1.85 20.98c.06 0 12.63.01 1.85-20.98zM68.55 36.46s-3.06 8.74-3.76 11.79c.01 0 1.4-7.12 3.76-11.79z"/>
          <ellipse transform="rotate(-18.558 65.931 50.743)" class="st2" cx="65.94" cy="50.74" rx="1.14" ry="1.94"/>
          <ellipse transform="rotate(-18.558 65.61 47.97)" class="st2" cx="65.62" cy="47.97" rx=".21" ry=".36"/>
        </g>
        <g id="seedOne">
          <path class="st0" d="M100.36 87.93c0 3.98-3.69 7.2-6.81 7.2-3.13 0-6.81-3.22-6.81-7.2S91 72.78 93.55 70.01c2.15-2.34 6.81 13.95 6.81 17.92z"/>
          <path class="st1" d="M95.39 73.16s8.99 17.87-1.85 20.98c.06 0 12.63.01 1.85-20.98zM91.84 74.81s-3.06 8.74-3.76 11.79c0 0 1.4-7.12 3.76-11.79z"/>
          <ellipse transform="rotate(-18.558 89.215 89.095)" class="st2" cx="89.22" cy="89.09" rx="1.14" ry="1.94"/>
          <ellipse transform="rotate(-18.558 88.895 86.322)" class="st2" cx="88.9" cy="86.32" rx=".21" ry=".36"/>
        </g>
      </g>
    </g>
    <g id="pumpkin">
      <path d="M72.08 50.12S41.63 36.8 26.62 58.96c-11.11 16.4-7.86 43.14 11.56 54.45 11.99 6.98 36.45 9.02 58.99 3.15 23.51-6.12 33.21-33.49 21.8-54.65-2.51-4.61-14.42-20.63-46.89-11.79z" fill="#f89a56"/>
      <path class="st4" d="M99.35 56.7s11.81 33.21 6.18 52.43c0 0 10.52-25.04-6.18-52.43zM44.23 55.24s-12.18 25.09-4.16 52.15c-.59-.32-14.85-25.74 4.16-52.15zM72.54 60.93s-4.81 36.14 0 49.93c.23-.01.92-45.46 0-49.93z"/>
      <path d="M68.3 53.41s2.94 4.05 7.6 1.84 4.05-17.42 16.93-24.41c0-.37-5.27-3.68-10.18-3.43-.37.12-.26 1.56-.26 1.56l-.74-1.57S73.68 42.27 68.3 53.41z" fill="#92985c"/>
      <path class="st6" d="M68.3 53.41s5.9 1.12 7.8-2.89c0 0-.05 1.52-.43 2.11-.38.6 4.01-3.83 6.01-8.71-.03.06-3.36 9.03-4.29 10.01-.05.06-3.94 4.7-9.09-.52zM82.61 29.73s6.91 1.39 7.65 1.43c.73.04 1.22-.39 1.54-.15 0 .04-.17-.31-1.32.4-.01-.04.21.42-7.87-1.68z"/>
      <path d="M69.14 53.41s4.44-12.01-3.34-11.06c-7.78.94-7.15-6.84-7.15-6.84" fill="none" stroke="#3a2e18" stroke-width=".576" stroke-miterlimit="10"/>
      <circle class="st8" cx="70.07" cy="41.27" r="1.92"/>
      <path class="st8" d="M74.38 54.44s7.58-4.77 7.91.8-4.83 7.44 2.2 10.95"/>
    </g>
  </svg>
</div>

<div id="test"></div>

Creating a preloading screen with a percentage and svgs

1 Answers1