Ankhbot Poll Overlay v1.0

In this example below you will see how to do a Ankhbot Poll Overlay v1.0 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by wellbrained, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright wellbrained ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Ankhbot Poll Overlay v1.0</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div id="container">
  <div id="block">
    <div id="header"> 
      <h1>This new poll overlay from Ankhbot looks ... ?</h1>
      <div id="stats">
        <div id="costs"><span>Costs: </span>10<span> Brainbugs</span></div>
        
        <div id="multivote"><span>Multivote: </span>Yes <span>(Max 3 Votes)</span></div>
        <div id="votes"><span>Total Votes: </span>999</div>
        <div id="timer"><span>Time Left: </span>01:50:37</div>
      </div>
    </div>
  
    <div id="content">
      <div id="optionContainer">
        <ul> 
          <li id="0" class="option">
            <div class="optionName">Amazing <span>(!vote 0)</span>
              <div id="_0" class="percentage">50%</div>
            </div>
            <div class="optionBar">
              <span class="bgBar">&nbsp;</span>
              <span id="__0" class="progressBar" style="width:50%;">&nbsp;</span>
            </div>
          </li>
          <li id="1" class="option">
            <div class="optionName">Okay <span>(!vote 0)</span>
              <div class="percentage">0%</div>
            </div>
            <div class="optionBar">
              <span class="bgBar">&nbsp;</span>
              <span class="progressBar" style="width:0%;">&nbsp;</span>
            </div>
          </li>
          <li id="2" class="option">
            <div class="optionName">Bad <span>(!vote 0)</span>
              <div class="percentage">25%</div>
            </div>
            <div class="optionBar">
              <span class="bgBar">&nbsp;</span>
              <span class="progressBar" style="width:25%;">&nbsp;</span>
          </li>
          <li id="3" class="option">
            <div class="optionName">Never show it again <span>(!vote 0)</span>
              <div class="percentage">25%</div>
            </div>
            <div class="optionBar">
              <span class="bgBar">&nbsp;</span>
              <span class="progressBar" style="width:25%;">&nbsp;</span>
          </li>
          <li id="3" class="option">
            <div class="optionName">Never show it again <span>(!vote 0)</span>
              <div class="percentage">25%</div>
            </div>
            <div class="optionBar">
              <span class="bgBar">&nbsp;</span>
              <span class="progressBar" style="width:25%;">&nbsp;</span>
          </li>
          <li id="3" class="option">
            <div class="optionName">Never show it again <span>(!vote 0)</span>
              <div class="percentage">25%</div>
            </div>
            <div class="optionBar">
              <span class="bgBar">&nbsp;</span>
              <span class="progressBar" style="width:25%;">&nbsp;</span>
          </li>
        </ul>
      </div>

      <div id="entryContainer">
        <ul>
          <li class="entry">wellbrained <span>2</span></li>
        </ul>
      </div>
    </div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/wellbrained/ankhbot-poll-overlay-v10-jLOypG */
* { 
  -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}
ul, li {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
#container {
  position: relative;
  left: -750;
  width: 40%;
  height: auto;
  
  font-family: "Segoe UI", sans-serif;
  font-size: 12pt;
  color: #fff;
}
#header {
  background-color: #1e1e1e;
  width: 100%;
  border-radius: 3px;
  position: relative;
  left: 0;
  padding: 10px;
  margin: 0;
}
h1 {
  font-size: 16pt;
  color: #fff;
  margin: 0;
}
#costs, #votes, #timer, #multivote {
  font-size: 12pt;
  font-weight: bold;
  color: #e67e22;
  display: inline;
  padding-right: 15px;
  text-transform: uppercase;
}
#stats span {
  font-weight: normal;
  color: #fff;
  font-size: 10pt;
}
#content {
  width: 100%;
  position: relative;
  top: 10px;
}
#optionContainer, #entryContainer {
  display: inline-block;
  border-radius: 3px;
  position: relative;
  float: left;
}
#optionContainer {
  width: 66%;
  margin-right: 1%;
  background-color: none;
}
#optionContainer li {
  background-color: rgba(30,30,30,1);
  padding: 10px;
  margin-bottom: 3px;
  border-radius: 3px;
  position: relative;
  left: -750px;
  opacity: 0;
  font-size: 12pt;
}
.percentage {
  float: right;
  margin-right: 5px;
}
.optionBar {
  text-align: center;
  margin: 5px 5px -20px 0;
}
.progressBar, .bgBar  {
  display: block;
}
.progressBar {
  position: relative;
  top: -22px;
  background-color: #e67e22;
  border-radius: 3px;
}
.bgBar {
  background-color: #555;
  border: 1px solid #1e1e1e;
  border-radius: 3px;
  width: 100%;
  text-align: center;
}
#entryContainer {
  background-color: #1e1e1e;
  padding: 10px;
  width: 33%;
}
#entryContainer li {
  width: 100%;
  padding: 3px 10px;
  font-size: 12pt;
  color: #fff;
  border-radius: 3px;
  background-color: #e67e22;
}
#entryContainer li span {
  float: right;
  padding-right: 10px;
}

/*Downloaded from https://www.codeseek.co/wellbrained/ankhbot-poll-overlay-v10-jLOypG */
var tl = new TimelineLite();
tl.fromTo("#header", 2, {left: -1000}, {left: 0});

$("#optionContainer li").each(function(index, element) {
  tl.to(element, 1.3, { left: 0 , opacity: 1 }, "-=.6");
}); 
tl.fromTo("#entryContainer", 2, {opacity: 0}, {opacity: 1});

Comments