12

我正在寻找一种显示一些标点符号加载“动画”的好方法。

我想要的是这样的：

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...."

等等。

我首先将点包围起来，spans并认为我可以用 jquery 循环它们并显示一个、一个、一个，然后重置为 1。但是代码变得非常笨拙，所以我想知道你会如何做到这一点？

4

8 回答 8

18

纯 CSS 解决方案

演示：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 的替代方案

优点：没有嵌套标签。这意味着省略号可以作为内容放入::after伪元素中。

演示：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;
}
于 2014-06-22T09:07:14.397 回答
14

制作一串点的技巧是制作一个稀疏数组，然后将所有元素与所需的字符连接起来。

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

这是一个现场演示。

于 2013-03-13T10:30:08.907 回答
3

这很容易：

HTML

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

jQuery

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

演示

于 2016-01-11T17:07:25.923 回答
1

现在确定代码是如何失控的，你可以这样做：

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>

至于1，您可以将其与句点数交换。

于 2013-03-13T10:35:04.067 回答
0

试试这个功能：我在这里放了一个例子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();
于 2013-03-13T10:37:11.147 回答
0

这是一个非常简单的变体：http: //jsfiddle.net/psyketom/FusdC/

阅读下面的评论以了解那里的一切。

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

在这里，如果您愿意，您还可以获得使用 jQuery 的优势easing，轻松更改总持续时间和许多其他好处，以防您熟悉 jQuery。

于 2013-03-13T10:39:24.307 回答
0

伙计，除非你想永远显示这个动画，否则你需要一种方法来停止动画，或者？

甚至不要考虑全局变量，这是JavaScript，它有闭包:)

<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>
于 2013-03-13T11:39:58.507 回答
0

这是一个修改后的版本，它会在一段时间后关闭这些点。

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/

于 2018-04-12T20:15:50.553 回答