Is there a way I can get a number on my webpage to rapidly increase from 0 to 60 when the page loads?

Question

Is there a way I can get a number on my webpage to rapidly increase from 0 to 60 when the page loads?

I have a vision of incorporating a dynamic mileage counter that spins similar to the numbers on this website (scroll down a bit). It would count from zero to 60, or even start at 0 and go up to 100 before resetting back to 0 and counting up to 60 again, all spinning in the same direction.

For reference, here is an image of the static page:

This animation would only apply to the percentage in the center upon page load.

Any assistance would be greatly appreciated!

jquery css animation css-animations

Answer 1

Answer №1

While it is technically possible to achieve this using only CSS & HTML, it is not the most practical approach. Utilizing JavaScript would result in a more efficient solution.

Live DEMO

ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.circle {
  background: blue;
  border-radius: 50%;
  display: inline-block;
  height: 150px;
  padding: 100px 0 0 20px;
  width: 230px;
  color: white;
  font-size: 50px;
  font-family: Arial;
  font-weight: bold;
}
.counter {
  height: 50px;
  overflow: hidden;
  position: relative;
  display: inline-block;
  text-align: center;
}
ul {
  -webkit-animation: counter 3s infinite;
  -moz-animation: counter 3s infinite;
  animation: counter 3s infinite;
  position: relative;
}
@-webkit-keyframes counter {
  0% { top: 0; }
  50% { top: -450px; }
  100% { top: 0px; }
}
@-moz-keyframes counter {
  0% { top: 0; }
  50% { top: -450px; }
  100% { top: 0px; }
}
@keyframes counter {
  0% { top: 0; }
  50% { top: -450px; }
  100% { top: 0px; }
}

<div class='circle'>
  +
  <div class='counter'>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
    </ul>
  </div>%
</div>

Answer 2

While it is technically possible to achieve this using only CSS & HTML, it is not the most practical approach. Utilizing JavaScript would result in a more efficient solution.

Live DEMO

ul,
li {
  list-style: none;
  margin: 0;
  padding: 0;
}
.circle {
  background: blue;
  border-radius: 50%;
  display: inline-block;
  height: 150px;
  padding: 100px 0 0 20px;
  width: 230px;
  color: white;
  font-size: 50px;
  font-family: Arial;
  font-weight: bold;
}
.counter {
  height: 50px;
  overflow: hidden;
  position: relative;
  display: inline-block;
  text-align: center;
}
ul {
  -webkit-animation: counter 3s infinite;
  -moz-animation: counter 3s infinite;
  animation: counter 3s infinite;
  position: relative;
}
@-webkit-keyframes counter {
  0% { top: 0; }
  50% { top: -450px; }
  100% { top: 0px; }
}
@-moz-keyframes counter {
  0% { top: 0; }
  50% { top: -450px; }
  100% { top: 0px; }
}
@keyframes counter {
  0% { top: 0; }
  50% { top: -450px; }
  100% { top: 0px; }
}

<div class='circle'>
  +
  <div class='counter'>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
    </ul>
  </div>%
</div>

Answer 3

Answer №2

Perhaps considering using the setTimeout function in JavaScript could be helpful.

Below is an example of a number container:

<div id="number"></div>

An unconventional pseudo-class:

//A pseudo-class for iterating numbers
function NumberIterator() {
    //Initial number value
    this.number = 0;
    //List of target numbers to reach
    this.goals = [];
    //Private - current target number
    var currentGoal = 0;
    //Option to loop infinitely
    this.infinite = false;
    //Delay between number changes
    this.delay = 50;

    //Timeout ID 
    var t_id = null;
    //Self-reference
    var _this = this;
    //Running state
    var running = false;

    //Automatic method execution
    this.step = function() {
        if(this.number > this.goals[currentGoal])
          this.number--;
        else if(this.number < this.goals[currentGoal])
          this.number++;
        else {
          currentGoal++;
          if(currentGoal >= this.goals.length) {
              if(this.infinite)
                 currentGoal = 0;
              else {
                  this.stop();
              }
              if(typeof this.ongoal == "function")
                 this.ongoal(this.number);
          }
        }

        if(typeof this.onstep == "function")
            this.onstep(this.number);

        if(running) {
            tick();
        }

    }
    this.stop = function() {
        if(t_id != null) {
            clearTimeout(t_id);
            t_id = null;
        }
        running = false;
    }

    //Start counter with this:
    this.start = function() {
        this.stop();
        running = true;
        this.step();
    }
    //Function that controls the iteration delay
    function tick() {
        if(t_id != null) {
            clearTimeout(t_id);
            t_id = null;
        }
        if(running)
          t_id = setTimeout(function() {_this.step();}, _this.delay);
    }
}

Usage:

//Save div element reference (it's faster to use reference than function call)
var div = document.getElementById("number");

//Create a new instance of the NumberIterator class
var iterator = new NumberIterator();
//Set up waypoints
iterator.goals = [100,60,0,60];
//Enable infinite looping through waypoints
iterator.infinite = true;
//Callback on each step
iterator.onstep = function(num) {
    div.innerHTML = num;
}
//Initiate the iteration
iterator.start();

Check out an EXAMPLE on jsfiddle

If the number animation remains constant over time, you may also consider using a GIF animation. These can serve as one-time animations as well. If the content will always remain the same, create your preferred GIF and ensure it gets cached on the client side for optimal performance.

Answer 4

Perhaps considering using the setTimeout function in JavaScript could be helpful.

Below is an example of a number container:

<div id="number"></div>

An unconventional pseudo-class:

//A pseudo-class for iterating numbers
function NumberIterator() {
    //Initial number value
    this.number = 0;
    //List of target numbers to reach
    this.goals = [];
    //Private - current target number
    var currentGoal = 0;
    //Option to loop infinitely
    this.infinite = false;
    //Delay between number changes
    this.delay = 50;

    //Timeout ID 
    var t_id = null;
    //Self-reference
    var _this = this;
    //Running state
    var running = false;

    //Automatic method execution
    this.step = function() {
        if(this.number > this.goals[currentGoal])
          this.number--;
        else if(this.number < this.goals[currentGoal])
          this.number++;
        else {
          currentGoal++;
          if(currentGoal >= this.goals.length) {
              if(this.infinite)
                 currentGoal = 0;
              else {
                  this.stop();
              }
              if(typeof this.ongoal == "function")
                 this.ongoal(this.number);
          }
        }

        if(typeof this.onstep == "function")
            this.onstep(this.number);

        if(running) {
            tick();
        }

    }
    this.stop = function() {
        if(t_id != null) {
            clearTimeout(t_id);
            t_id = null;
        }
        running = false;
    }

    //Start counter with this:
    this.start = function() {
        this.stop();
        running = true;
        this.step();
    }
    //Function that controls the iteration delay
    function tick() {
        if(t_id != null) {
            clearTimeout(t_id);
            t_id = null;
        }
        if(running)
          t_id = setTimeout(function() {_this.step();}, _this.delay);
    }
}

Usage:

//Save div element reference (it's faster to use reference than function call)
var div = document.getElementById("number");

//Create a new instance of the NumberIterator class
var iterator = new NumberIterator();
//Set up waypoints
iterator.goals = [100,60,0,60];
//Enable infinite looping through waypoints
iterator.infinite = true;
//Callback on each step
iterator.onstep = function(num) {
    div.innerHTML = num;
}
//Initiate the iteration
iterator.start();

Check out an EXAMPLE on jsfiddle

If the number animation remains constant over time, you may also consider using a GIF animation. These can serve as one-time animations as well. If the content will always remain the same, create your preferred GIF and ensure it gets cached on the client side for optimal performance.

Answer 5

Answer №3

Have you considered using a convenient plugin for counting:

$.fn.counter = function(speed) {
    return this.each(function(_, elem) {
        var from = parseInt($(elem).data('from') || 0, 10),
            to   = parseInt($(elem).data('to') || 100, 10);

        $(elem).text(from);

        (function count(from, to) {
            $(elem).text(parseInt(from, 10)+1);
            if (from < to-1) setTimeout(function() {count(++from, to)}, speed || 300)
        })(from, to);
    });
}

This plugin can be easily implemented by using:

$(selectedElement).counter(100);

You can specify the values like this:

<div data-from="0" data-to="100">0</div>

FIDDLE

Answer 6

Have you considered using a convenient plugin for counting:

$.fn.counter = function(speed) {
    return this.each(function(_, elem) {
        var from = parseInt($(elem).data('from') || 0, 10),
            to   = parseInt($(elem).data('to') || 100, 10);

        $(elem).text(from);

        (function count(from, to) {
            $(elem).text(parseInt(from, 10)+1);
            if (from < to-1) setTimeout(function() {count(++from, to)}, speed || 300)
        })(from, to);
    });
}

This plugin can be easily implemented by using:

$(selectedElement).counter(100);

You can specify the values like this:

<div data-from="0" data-to="100">0</div>

FIDDLE

Answer 7

Answer №4

 $(function() {
        function incrementCount($element){
            var currentNumber = parseInt($element.html(), 10);
            $element.html(++currentNumber);
            if(currentNumber !== $element.data('count')){
                setTimeout(function(){incrementCount($element)}, 50);
            }
        }        
      $("span").each(function() {
          $(this).data('count', parseInt($(this).html(), 10));
          $(this).html('0');
          incrementCount($(this));
      });
    });

http://jsfiddle.net/WpJxn/1/

Answer 8

 $(function() {
        function incrementCount($element){
            var currentNumber = parseInt($element.html(), 10);
            $element.html(++currentNumber);
            if(currentNumber !== $element.data('count')){
                setTimeout(function(){incrementCount($element)}, 50);
            }
        }        
      $("span").each(function() {
          $(this).data('count', parseInt($(this).html(), 10));
          $(this).html('0');
          incrementCount($(this));
      });
    });

http://jsfiddle.net/WpJxn/1/

Is there a way I can get a number on my webpage to rapidly increase from 0 to 60 when the page loads?

Answer №1

Live DEMO

Answer №2

An unconventional pseudo-class:

Usage:

Check out an EXAMPLE on jsfiddle

Answer №3

Answer №4

Similar questions

Passing a jQuery data attribute to another page

Troubleshooting Problem with CSS Background-Image in Safari

The division element shifts to the left upon invoking the slideUp() function

Tips for creating a clickable image inside a span button

AngularJs: The ability to rate or rate functionality

Why doesn't the Iframe onLoad event trigger when uploading a file?

Instructions for removing and recreating an input field along with its parent elements when the value of a Select tag is changed

Floating color problem

Implement a feature in JS/HTML where clicking on a button shifts a specific section of a row from one table to another while simultaneously deleting the remaining

Incorporate a horizontally rotating preloader to enhance loading experience

Performing an AJAX PUT call to a C# server-side controller

Changing the background color of a div after a mouse click

What steps should we take to address our client's aversion to pop-up advertisements?

Removing the 'div' tag using jQuery in CodeIgniter

Using JavaScript, transfer a Base64 encoded image to Google Drive

Enhancing the Strength of Password Generator

Sending data from a web page to a server using the Ajax

The <script> element failed to close correctly

What is the best way to align inline-block elements in a straight row?

HTML displaying inaccurately