标点符号加载“动画”，javascript？
我正在寻找一种显示标点加载“动画”的好方法。
我想要的是这样的：
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.但是代码变得非常笨拙，所以我想知道你会怎么做？
制作一串点的技巧是制作一个稀疏数组，然后将所有元素与所需的字符连接起来。
var count = 0; setInterval(function(){ count++; var dots = new Array(count % 10).join('.'); document.getElementById('loadingtext').innerHTML = "Waiting for your input." + dots; }, 1000);
这是一个现场演示 。
纯CSS解决方案
演示： jsfiddle.net/feklee/D59P9
-
HTML：
Waiting... 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... 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; }
这可以很容易：
HTML
JQuery的
setInterval(function() { var th = $('.dots'); if(th.text().length < 5){ th.text(th.text()+"."); }else{ th.text(""); } }, 500);
演示
现在确定代码如何失控，你可以这样做：
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); This will display at second 1: "Waiting for your input.
至于1 ，您可以将其与周期数交换出来。
尝试这个function：我在这里举个例子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();
这是一个非常简单的变体： http ： //jsfiddle.net/psycketom/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
如果你愿意，你还可以在这里获得使用easing的优势，轻松改变总持续时间和一堆其他好处，以防你对jQuery有好处。
老兄，除非你想永远显示这个动画，否则你需要一种方法来停止动画，或者？
甚至不考虑全局变量，这是JavaScript ，它有关闭:)
please wait
这是一个修改后的版本，将在一段时间后关闭点。
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