How to make loading animation using symbols, as it was on DOS or in Ubuntu terminal?

And these characters:

  1. -
  2. /
  3. |
  4. \

I thought CSS animation (maybe), but no. This applies to JS, and how to make it: I do not understand. How to make such an animation?

  • Your question is not clear. Can you somehow formulate it more clearly? - Alexey Shimansky
  • Yes. Already fixed. - Wicopee
  • one
    I'm afraid not everyone knows / remembers how it looks in DDOS / Ubuntu. Without at least some visualization will be difficult) - Alexey Shimansky
  • one
    Well, firstly, DOS, not DDOS (this is a slightly different term), and secondly, these four characters replace each other with a delay of a fraction of a second (they are displayed in the same position), which creates the effect of animation. Who will do - make a JS snippet, so you can immediately see whether it works or not. )) - AK ♦
  • it may well be css animation - Grundy

2 answers 2

You can do this with the help of a single CSS:

body {background-color: blue;} .loader:before { color: white; content: ''; animation: loader 1s infinite; } @keyframes loader { 0% { content: '--' } 25% { content: '/' } 50% { content: '|' } 75% { content: '\5c' } 100% { content: '--' } } 
 <div class="loader"></div>

But unfortunately this method will only work in small circles of browsers, among which Google Chrome. So it’s still better to use JavaScript for cross-browser compatibility:

 setInterval(function() { document.getElementById('loader').innerHTML = '--'; setTimeout(function() { document.getElementById('loader').innerHTML = '/'; setTimeout(function() { document.getElementById('loader').innerHTML = '|'; setTimeout(function() { document.getElementById('loader').innerHTML = '&#92;'; }, 250); }, 250); }, 250); }, 1000); 
 body {background-color: blue;} #loader { color: white; } 
 <div id="loader">--</div>

  • Is it possible to put white content? - Wicopee
  • @Wicopee, yes, look, I edited the answer - Yuri
  • 3
    Firefox does not work - andreymal
  • @Yuri Please specify in response that this behavior is non-standard and will work only in Chrome, since according to the CSS3 specification there is no content property there, although in Chrome its animation is supported. - Vadim Ovchinnikov
  • @Wicopee, notice the modified answer. I forgot about one detail - Yuri

In order for this solution to be supported by different browsers, you must use the Javascript function setInteval , create an array of strings for animation, and take the following line for each step at index:

 (function() { var chars = [ "--", "/", "|", "\\" ]; var index = 0; setInterval(function() { document.getElementById("loader").innerText = chars[index]; ++index; if (index === chars.length) index = 0; }, 250); })(); 
 body { background-color: blue; } #loader { color: white; } 
 <div id="loader"></div>