Dot dotdot dotdotdot as loading?

前端未结

关注

 8  2158

借酒劲吻你

I wanna create some loading dots, like this:

At 0000 miliseconds the span content is: .

At 0100 miliseconds the span content is: ..

相关标签:

8条回答

走了就别回头了

2021-01-31 07:59

This is similar to Veiko Jääger's solution. With this solution, the color of the dots is the same as the text it associates with.

<html>
<head>
    <style>
.appendMovingDots:after {
    content: ' .';
    animation: dots 3s steps(1, end) infinite;
}
@keyframes dots {
    0%, 12.5% {
        opacity: 0;
    }
    25% {
        opacity: 1;
    }
    37.5% {
        text-shadow: .5em 0;
    }
    50% {
        text-shadow: .5em 0, 1em 0;
    }
    62.5% {
        text-shadow: .5em 0, 1em 0, 1.5em 0;
    }
    75% {
        text-shadow: .5em 0, 1em 0, 1.5em 0, 2em 0;
    }
    87.5%, 100%{
        text-shadow: .5em 0, 1em 0, 1.5em 0, 2em 0, 2.5em;
    }
}	
		</style>
	</head>
	<body>	
		<span class="appendMovingDots" style="font-size:20px">This is a test</span>	
	</body>
</html>

0 讨论(0)

走了就别回头了

2021-01-31 08:10

Example: https://codepen.io/lukaszkups/pen/NQjeVN

You can animate css content too!

// HTML
<p>Loading<span></span></p>

// CSS (nested SASS)
p
  span
    &:before
      animation: dots 2s linear infinite
      content: ''

  @keyframes dots
    0%, 20%
      content: '.'
    40%
      content: '..'
    60%
      content: '...'
    90%, 100%
      content: ''

0 讨论(0)

情话喂你

2021-01-31 08:13

let span = document.querySelector('span');
    i = 0;

setInterval(() => {
    span.innerText = Array(i = i > 2 ? 0 : i + 1).fill('.').join('');
}, 500)

0 讨论(0)

失恋的感觉

2021-01-31 08:14

With String.prototype.repeat() you can do:

var element = document.querySelector(...);
var counter = 0;

var intervalId = window.setInterval(function() {
    counter += 1
    element.innerHTML = '.'.repeat(1 + counter % 3)
}, 350);

// Use the following to clear the interval
window.clearInterval(intervalId)

Note: String.prototype.repeat() is currently not supported in < IE11

0 讨论(0)

别跟我提以往

2021-01-31 08:17

Example: http://jsfiddle.net/subTZ/

var span = document.getElementById('myspan');

var int = setInterval(function() {
    if ((span.innerHTML += '.').length == 4) 
        span.innerHTML = '';
    //clearInterval( int ); // at some point, clear the setInterval
}, 100);

0 讨论(0)

庸人自扰

2021-01-31 08:18

<span id="wait">.</span>

<script>
var dots = window.setInterval( function() {
    var wait = document.getElementById("wait");
    if ( wait.innerHTML.length > 3 ) 
        wait.innerHTML = "";
    else 
        wait.innerHTML += ".";
    }, 100);
</script>

Or you can get fancy and have them go forward and back:

<span id="wait">.</span>

<script>
    window.dotsGoingUp = true;
    var dots = window.setInterval( function() {
        var wait = document.getElementById("wait");
        if ( window.dotsGoingUp ) 
            wait.innerHTML += ".";
        else {
            wait.innerHTML = wait.innerHTML.substring(1, wait.innerHTML.length);
            if ( wait.innerHTML === "")
                window.dotsGoingUp = true;
        }
        if ( wait.innerHTML.length > 9 )
            window.dotsGoingUp = false;



        }, 100);
    </script>

Or you could make them go back and forth randomly:

<span id="wait">.</span>

<script type="text/javascript">
    var dots = window.setInterval( function() {
        var wait = document.getElementById("wait");
        if ( Math.random() < .7 )
            wait.innerHTML += ".";
        else
            wait.innerHTML = wait.innerHTML.substring(1, wait.innerHTML.length);
        }, 100);
</script>

Or I could get a life and stop posting additional snippets.... :D

As Ivo said in the comments, you need to clear the interval at some point, especially if you are not loading a new page after the waiting is finished. :D

0 讨论(0)

1 2 下一页