admin管理员组

文章数量:1188831

I'm looking for a good way to display some punctuation loading "animation".

What I want is something like this:

This will display at second 1: "Waiting for your input."
This will display at second 2: "Waiting for your input.."
This will display at second 3: "Waiting for your input..."
This will display at second 4: "Waiting for your input...."
This will display at second 5: "Waiting for your input."
This will display at second 6: "Waiting for your input.."
This will display at second 7: "Waiting for your input..."
This will display at second 8: "Waiting for your input...."

And so on.

I started by surrounding the dots in spans and thought I could loop through them with jquery and display one more, one more, one more, then reset to 1. But the code got very clumsy, so I wonder how you would do this?

I'm looking for a good way to display some punctuation loading "animation".

What I want is something like this:

This will display at second 1: "Waiting for your input."
This will display at second 2: "Waiting for your input.."
This will display at second 3: "Waiting for your input..."
This will display at second 4: "Waiting for your input...."
This will display at second 5: "Waiting for your input."
This will display at second 6: "Waiting for your input.."
This will display at second 7: "Waiting for your input..."
This will display at second 8: "Waiting for your input...."

And so on.

I started by surrounding the dots in spans and thought I could loop through them with jquery and display one more, one more, one more, then reset to 1. But the code got very clumsy, so I wonder how you would do this?

• javascript
• jquery

Share Improve this question Follow edited Sep 27, 2017 at 20:21 feetwet 3,43688 gold badges5353 silver badges8989 bronze badges asked Mar 13, 2013 at 10:24 Kristian RaftesethKristian Rafteseth 2,03266 gold badges2929 silver badges4747 bronze badges 1

• Use key-frames animation, with an ::after element with different content perhaps.. – techfoobar Commented Mar 13, 2013 at 10:28

Add a comment  | 

8 Answers 8

Sorted by: Reset to default 21

Pure CSS solution

Demo: jsfiddle.net/feklee/D59P9

• HTML:

  Waiting<span class="dots"><span>.</span><span>.</span><span>.</span></span> for more.
  

• CSS:

  @keyframes dots-1 { from { opacity: 0; } 25% { opacity: 1; } }
  @keyframes dots-2 { from { opacity: 0; } 50% { opacity: 1; } }
  @keyframes dots-3 { from { opacity: 0; } 75% { opacity: 1; } }
  @-webkit-keyframes dots-1 { from { opacity: 0; } 25% { opacity: 1; } }
  @-webkit-keyframes dots-2 { from { opacity: 0; } 50% { opacity: 1; } }
  @-webkit-keyframes dots-3 { from { opacity: 0; } 75% { opacity: 1; } }
  
  .dots span {
      animation: dots-1 1s infinite steps(1);
      -webkit-animation: dots-1 1s infinite steps(1);
  }
  
  .dots span:first-child + span {
      animation-name: dots-2;
      -webkit-animation-name: dots-2;
  }
  
  .dots span:first-child + span + span {
      animation-name: dots-3;
      -webkit-animation-name: dots-3;
  }
  

WebKit-only alternative

Advantage: No nested tags. This means that the ellipsis could be put as content into an ::after pseudo element.

Demo: jsfiddle.net/feklee/vFT7W

• HTML:

  Waiting<span>...</span> for more.
  

• CSS:

  body {
      font-family: 'Roboto', sans-serif;
      font-size: 50px;
  }
  
  @-webkit-keyframes dots {
      0% { background-position: 0px; }
      100% { background-position: 50px; }
  }
  
  span {
      background: linear-gradient(to right, white 50%, black 50%);
      color: transparent;
      -webkit-background-clip: text;
      -webkit-animation: dots 1s infinite steps(4);
      padding-right: 40px;
      margin-right: -40px;
  }
  

The trick to making a string of dots is to make a sparse Array and then join all the elements with the desired character.

var count = 0;
setInterval(function(){
    count++;
    var dots = new Array(count % 10).join('.');
    document.getElementById('loadingtext').innerHTML = "Waiting for your input." + dots;
  }, 1000);

Here is a Live demo.

This can be very easy:

HTML

<span class="dots"></span>

JQuery

setInterval(function() {
    var th = $('.dots');
    if(th.text().length < 5){
        th.text(th.text()+".");
    }else{
        th.text("");
    }
}, 500);

Demo

Now sure how the code got out of hand, you could just do:

setInterval(function () {
  var span = $("#text-loader").children("span:eq(0)");
  var ellipsis = span.html();
  ellipsis = ellipsis + ".";
  if (ellipsis.length > 5) {
    ellipsis = ".";
  }
  span.html(ellipsis);
}, 1000);

<div id="text-loader">
  This will display at second 1: "Waiting for your input<span>.</span>
</div>

And as for the 1, you can swap that out with the number of periods.

try this function: i'v put an example here http://jsfiddle.net/XFd39/

var i=0;   
function f() {
if(i<=4)
 $('#a').append(".");
i++;
if(i==4){
    $('#a').html("");
    i=0;
}
setTimeout(f,500);
}
f();

Here is a pretty simple variant: http://jsfiddle.net/psycketom/FusdC/

Read the comments below to understand what everything is doing there.

var span = $('.dots'); // take the element where you have the maximum count of dots
var text = span.text(); // cahce it's text value

// we set up a function here, so we can loop it all the time
var loading = function()
{
    $({
        count : 1 // we start at one dot
    }).animate({
        count : text.length // together forming all of it
    }, {
        duration : 1000, // make the animation complete in one second
        step : function() {
            span.text( text.substring(0, Math.round(this.count)) ); // on each step, change the text accordingly to current iteration
        },
        complete : function() {
            loading(); // once complete, start all over again
        }
    });
};

loading(); // start it up for the first time

Here you also gain the advantage of using easing if you wish, easily changing total duration and bunch of other benefits in case you're good with jQuery.

Dude, unless you want to display this animation forever you will need a way to stop the animation, or?

Don't even think about global variables, this is JavaScript and it's got closures for that :)

<p>please wait<span id="wait"></span></p>

<input type="submit" id="start" value="start">
<input type="submit" id="stop" value="stop">

<script type="text/javascript">
    $(document).ready(function() {

        var animator = function($el) {
            var dotCount = 1;
            var started = true;
            return {
                "start" : function step() {
                    dotCount = (dotCount + 1) % 10;
                    $el.text(new Array(dotCount).join('.'));
                    if (started) {
                        setTimeout(step, 100);
                    }
                },
                "stop" : function() {
                    started = false;
                }
            }
        };

        var animatedWait = animator($("#wait"));

        $("#start").click(animatedWait.start);
        $("#stop").click(animatedWait.stop);
    });
</script>

Here is a modified version that will turn off the dots after a time.

var count = 0;
var dots = setInterval(function(){
  count++;
  document.getElementById('loadingtext').innerHTML = "Waiting for your input." + new Array(count % 5).join('.');

  if (count == 10){ // show two iterations of the array.
    clearInterval(dots); // stop the dots.
  }
}, 100); // sets the speed

http://jsfiddle.net/Ty4gt/331/

本文标签： jqueryPunctuation loading quotanimationquotJavaScriptStack Overflow