This is a dumb question, so probs ignore it. I don't know

>>59426169
>This is a dumb question, so probs ignore it
Okay

>>59426169
What's the JS animation snippet, post it

>>59426222
Not sure if this will format properly.

#banner {
  border-radius: 50%;
  width: 150px;
  height: 150px;
  background: #000;
  overflow: hidden;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  position: relative;
}

#banner .fill {
  transform: translateY(150px);
  animation-name: fillAction;
  animation-iteration-count: 1;
  animation-timing-function: cubic-bezier(.2, .6, .8, .4);
  animation-duration: 4s;
  animation-fill-mode: forwards;
  animation-delay: 0.25s;
}

#banner .pour {
  width: 6px;
  position: absolute;
  left: 50%;
  margin-left: -3px;
  bottom: 0;
  top: 0;
  background: #009ae6;
  animation-name: pourAction;
  animation-timing-function: linear;
  animation-duration: 0.25s;
}

#banner #waveShape {
  animation-name: waveAction;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 0.5s;
  width: 300px;
  height: 150px;
  fill: #04ACFF;
}

@keyframes pourAction {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes fillAction {
  0% {
    transform: translateY(150px);
  }
  100% {
    transform: translateY(-5px);
  }
}

@keyframes waveAction {
  0% {
    transform: translate(-150px, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}


<div id="banner">
  <div class="pour"></div>
  <div class="fill">
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
      <path fill="#04ACFF" id="waveShape" d="M300,300V2.5c0,0-0.6-0.1-1.1-0.1c0,0-25.5-2.3-40.5-2.4c-15,0-40.6,2.4-40.6,2.4
c-12.3,1.1-30.3,1.8-31.9,1.9c-2-0.1-19.7-0.8-32-1.9c0,0-25.8-2.3-40.8-2.4c-15,0-40.8,2.4-40.8,2.4c-12.3,1.1-30.4,1.8-32,1.9
c-2-0.1-20-0.8-32.2-1.9c0,0-3.1-0.3-8.1-0.7V300H300z" />
    </svg>
  </div>
</div>

>>59426258
That's not even JS, that's CSS

So what do you want with it? CSS part goes into style tags and HTML goes where HTML goes.

I don't know what HTML sheets for livestreams look like so I can't help you there.

>>59426169
>>59413636
>>59413636

>>59426258
Never realized how easy this looks compared to some of the other shit these gtards post. I'm kinda interested now

>>59426315
I am seriously behind the times on what CSS can do then.

Basically, what I've got is a donation bar from a web-based toolkit. When someone donates, the bar fills up. The actual data is sent by the site obvs, and the bar itself, and presumably it's animation, is styled with HTML and CSS. I have copies of both of those;

HTML: http://pastebin.com/raw/1fpEcwSK
CSS: http://pastebin.com/raw/itS1QHJr

All I want to do is make it so when that bar needs to animate, it uses the animation from the snippet.

Now, presumably, this would involve re-fitting the CSS from the snippet to match the classes in the existing sheet because I don't actually know if the element itself can have it's tags/structure freely changed and still work, since I don't know what will break what.

>>59426432
I am aware I sound like a fuckin' retard, but I'm a chef and an illustrator, I never actually learned any of this stuff.

>>59426444
I'll have a look at those pastebins in a moment unless someone else replies to you, just wait till I get to work.

w3schools.com is a good source for learning HTML, JavaScript, and other languages. I don't know if it will teach you what you're specifically looking for, but it's still worth checking out.

>>59426796
I know the site and it's tutorials.

This was more of a "This is gonna take a long-ass time to study up on to figure out, and I want to get this done by the weekend" kinda thing.

>>59426497
I'm here

>>59426444
Oh, so you want it slowly filling up as people are donating.

You can't just take this what you've found and change few classes to have it work the way you want. What you found is timed and animation will execute in given time and that's it. You'll need to change quite a few things.

I'm not going to write this out for you because I have other things to do at work, you'll have to do this on your own or find someone else.

You've got an AJAX request that fetches to get your donation goal

$.ajax({
      type: "GET",
      dataType: "json",
      crossDomain: true,
      url: "/api/donation_goal/" + window.channel
    }

This line calculates the donation progress in percentage.

donationPercent = Math.floor((donationProgress / donationGoal) * 100) || 0;

You can leave that as is and you can do that to set height on how filled your little circle is.

If only there was a thread for dumb questions