g | x | w | all
Bytes Lang Time Link
108convey211224T154853ZZeroCode
180AWK250930T162645Zxrs
3934MATL211224T011104ZLuis Men
093JavaScript220330T023948ZMatthew
055APL Dyalog Unicode211224T000720ZAdá
091Python 3.8 prerelease211228T042446ZM Virts
234HTML5 + CSS3 78 + 156 =211226T230101ZIsmael M
nanpug + CSS211226T112647Zccprog
089Wolfram Mathematica211227T023953Ztheorist
251HTML5 + CSS3211224T075351ZNeil
149C gcc211226T044429ZErikF
158Python 2211225T184602ZElPedro
nanCP1610 machine code211224T012622ZArnauld
032Stax211225T125234ZRazetime
03605AB1E211224T201220ZKevin Cr
019Charcoal211224T002705ZNeil

convey, 108 bytes

You never said that the program must have an output, you said in fact "a program that displays exactly the following ASCII animation"

And my program has that animation inside it:

    >>,'######'[
    ^<v
     ^<
 >>>v  >>>v
>,<<<  ,<<<
^    >v'######'[
^<< >^,'######'[
>>^ ^<<
'######'[

Try it online!

Here is the program running:

enter image description here

And in the center you can see... THE LOAD ANIMATION :v

enter image description here

Really the programs doesn't start by an state of the animation, it waits two cycles before start but... it's cool... I suppose?

AWK, 180 bytes

END{for(j=7;++j;){a="801978829688398548"
for(i=0;i++<17;printf(1~i?"\r":X)(8~x?FS:9~x?RS:(j-x)%8<6?"#":" "))x=substr(a,i,1)
system("sleep .1")
for(i=0;i++<3;)printf"\033[A\033[K"}}

Not pretty, but it works...

MATL, 39 34 bytes

`3&Xx0'=<.Ic^w'FO8:@YShZah4eH>ZcDT

Try it at MATL online!

How it works

`            % Do..while
  3&Xx       %   Pause for 300 ms and clear screen
  0          %   Push 0
  '=<.Ic^w'  %   Push this string (*)
  F          %   Push false (**)
  O          %   Push 0
  8:         %   Push [1 2 ... 8]
  @          %   Push current iteration index, k
  YS         %   Rotate right by k units. For example, in the 1st iteration
             %   (k=1) this gives [8 1 2 3 4 5 6 7]
  h          %   Concatenate: prepends 0. This gives [0 8 1 2 3 4 5 6 7]
             %   in the 1st iteration
  Za         %   Base conversion. Converts the string (*) from the base
             %   formed by all printable ASCII chars except single quote
             %   (represented by the false input, (**)) to the base (***).
             %   This gives [6 5 0 7 0 0 4 8 0 0 3 0 1 2] in the 1st iteration
  h          %   Concatenate: prepends 0. Gives [0 6 5 0 7 0 0 4 8 0 0 3 0 1 2]
  4e         %   Reshape into 4-row matrix in column-major order. This pads with
             %   a 0 at the end to have a number of entries multiple of 4. Gives
             %   [ 0 7 8 0 ;
             %     6 0 0 1 ;
             %     5 0 0 2 ;
             %     0 4 3 0 ]
             %   in the 1st iteration. For other iterations the nonzero values
             %   will be rotated with respect to the above
  H>         %   Greater than 0? Gives
             %   [ 0 1 1 0 ;
             %     1 0 0 0 ;
             %     1 0 0 0 ;
             %     0 1 1 0 ]
  Zc         %   Convert nonzeros to '#' and zeros to char 0 (shown as space)
             %   [ ' ## ' ;
             %     '#   ' ;
             %     '#   ' ;
             %     ' ## ' ]
  D          %   Display
  T          %   Push true
             % End (implicit). A new iteration is run because the top of the
             % stack is true

JavaScript, 93 bytes

setInterval(_=>console.log(` 01
7  2
6  3
 54`.replace(/\S/g,n=>(i-n)%8<6?'#':' ',i++)),i=99)

APL (Dyalog Unicode), 60 55 bytes

Full program. Requires 0-based indexing. Uses 0 and 1 instead of and #. Waits 1 seconds between frames and stops after the 8th.

⎕ED&'a'⋄{⎕DL≡a∘←⊃⍤⍕¨4 4⍴'012080037004065'∊⍕1+8|⍵+⍳6}¨⍳8

'a' the (eventual) variable name "a"
& in a background thread:
⎕ED open an EDit window on that name

 then:

⍳8 generate the integer sequence 0…7
{ on each element of that, apply the following anonymous lambda:
⍳6 generate the integer sequence 0…5
⍵+ add the argument to that
8| find the division remainder of that when divided by 8
1+ increment that
 format as space-separated text
'012080037004065'∊ for each character in this string, check if it is a member (1) or not (0) of that string
4 4⍴ reshape those 16 1s and 0s into a 4-by-4 matrix
⍕¨ format each of those numbers as a 1-character list
⊃¨ get the first character of each
a∘← globally assign that value to the variable a (the edit window will update)
 get the nesting depth of that matrix (it is 1)
⎕DL DeLay that many seconds

Old version in action: screencast

Python 3.8 (pre-release), 91 bytes

Not my favorite because there's no delay...

Also this only works with a terminal that supports moving the cursor with \x1b[r;cH, and clearing the terminal with \x1b[2J (... It works for me in termux on Android so far...)

[print('\x1b[2J','\x1b[%c;%cH*'*6%(*('2131424334241312'*2)[b*2:b*2+12],))for b in range(8)]

Try it online!

Python 3.8 (pre-release), 119 bytes

Here's a more realistic answer with the most obvious delay.

import time;[print('\x1b[2J','\x1b[%c;%cH*'*6%(*('2131424334241312'*2)[b*2:b*2+12],))or time.sleep(1)for b in range(8)]

Try it online!

HTML5 + CSS3 - 78 + 156 = 234 bytes

This answer is entirely based on @Neil's answer.

This was offered as a size reduction of his original answer, which he allowed me to share as an answer.
This answer includes a 1 byte trick as well, taken from the original answer.

pre>*{animation:a steps(4,start)1s calc(var(--c,0)*-125ms)infinite}c{--c:7}d{--c:1}e{--c:6}f{--c:2}h{--c:5}j{--c:3}k{--c:4}@keyframes a{to{visibility:hidden
<pre> <a>#</a><c>#</c>
<d>#</d>  <e>#</e>
<f>#</f>  <h>#</h>
 <j>#</j><k>#</k>

This relies entirely on invalid tags, to calculate the CSS animation delays. This allows to shorten the selectors a lot, and is shorter than pre-calculating the delays.


If we're allowed to take certain liberties with the presentation of the loading animation, it's possible to reduce the size a few more bytes.

Using opacity instead of visibility, it's possible to have 2 hidden and all others partially visible.
If the timing can be flexible, it is possible to save some bytes as well.

This also includes a suggestion by @Neil, to use 1s steps for 8s, shaving this one down by 2 bytes.

As such, here's a 78 + 145 = 223 bytes long solution, which might not be valid (but looks prettier, in my opinion):

pre>*{animation:a steps(4,start)8s calc(var(--c,0)*-1s)infinite}c{--c:7}d{--c:1}e{--c:6}f{--c:2}h{--c:5}j{--c:3}k{--c:4}@keyframes a{to{opacity:0
<pre> <a>#</a><c>#</c>
<d>#</d>  <e>#</e>
<f>#</f>  <h>#</h>
 <j>#</j><k>#</k>


Please remember to upvote @Neil's answer before considering upvoting mine.

pug + CSS, 81 + 135 = 216 87 + 123 = 210 bytes

-o=54060,i=0
while o>>=1
 if o&1
  a(style=`--i:-${((i&1?7:0)^i++>>1)/8}s`) 0
 else
  b
body{display:grid;grid:none/repeat(4,1ch)}a{animation:a steps(4,start)1s var(--i)infinite}@keyframes a{to{visibility:hidden

Watch it on CodePen. Click on the downward arrow in the HTML area to see the compiled HTML.

The animation is inspired by Neil's answer, but the custom CSS variables are injected by pug.

The characters are ordered with a CSS grid, four items per row with a width of 1ch each.

1ch is defined as the exact advance of the 0 character in that font. That is the reason for displaying it, so the output is exactly aligned as if it was formatted with <pre>.

Edit: saved 6 bytes with the help of Ismael Miguel.

Wolfram Mathematica 89 bytes

ListPlot[CirclePoints@8~RotateLeft~u~Drop~2,PlotRange->{{-1,1},{-1,1}}]~Animate~{u,0,7,1}

This gif is a bit glitchy, but the above animation does appear correctly, and play automatically and continuously, within a Mathematica notebook.

enter image description here

How it works:

The ASCII characters in the challenge are arranged as vertices on an octagon rather than points on a circle (the left and right pairs are vertically aligned, and the top and bottom pairs are horizontally aligned), so I used CirclePoints@8 to get the coordinates of the 8 vertices of a regular octagon centered about {0,0}. I rotated this coordinate list successively to the left by u, and then dropped the first two points. I used ListPlot to plot these, and then animated this, increasing u from 0 to 7 in increments of 1.

The characters are displayed as plot points.

Even though ,PlotRange->{{-1,1},{-1,1}} costs 27 bytes, an explicit plot range specification was needed to maintain the aspect ratio of the plot as the points were rotated, so that the points would always appear at the same position on the screen.

Alternately, for three less bytes (86), one could use ListPolarPlot to put the six points on an actual circle (separated by angles of Pi/4), rather than the vertices of an octagon:

ListPolarPlot[1 &~Array~6,DataRange->{u,5*Pi/4+u},PlotRange->Full]~Animate~{u,0,7,Pi/4} 

This latter code would have been longer than the former, except that here the position and aspect ratio can be fixed using PlotRange->Full instead of PlotRange->{{-1,1},{-1,1}}.

HTML5 + CSS3, 190 + 98 = 288 162 + 102 = 264 86 + 170 166 165 = 256 252 251 bytes

tt{--c:1}div{--c:2}div tt{--c:3}a+a{--d:calc(7 - var(--c,0))}a{animation:a steps(4,start)1s calc(var(--d,var(--c,0))/8*-1s)infinite}@keyframes a{to{visibility:hidden
<pre> <a>#</a><a>#</a>
<tt><a>#</a>  <a>#</a><div><a>#</a>  <a>#</a>
<tt> <a>#</a><a>#

Explanation: This is based on my Stack Overflow answer to Imitating a blink tag with CSS3 animations, however the number of steps is set to 4 to reduce the duty cycle from 80% to 75% and CSS variables are used to offset the animation of each # character. Edit: Saved at least 24 bytes thanks to @IsmaelMiguel. Saved 1 byte by stealing @ccprog's 1s/8 trick.

C (gcc), 162 149 bytes

Loops forever. Each line is encoded in 4-bit segments and shifted to produce the line for the current frame, with increasingly long sleep() values. The screen is cleared with a form feed character, which should work in most terminal emulators.

It would be possible to save 3 bytes by not initializing the starting frame, but there is a chance that a negative number could be entered before the function is called, resulting in a frame with a 0-second delay.

i,h;f(c){for(c=0;puts("\f");sleep(++c))for(i=4;i--;puts(""))for(h=L"\x66402666\x98891199\x88999119\x46666620"[i]>>c%8*4&15;h;h/=2)printf(L" #"+h%2);}

Try it online!

Python 2, 158 bytes

import time
while 1:
 for w in range(8):
	print'\n'*99
	for x in'48966886698469906912611621960996'[w*4:w*4+4]:print('000'+bin(int(x))[2:])[-4:]
	time.sleep(1)

This version does not work on Try it online!

Uses 0 for and 1 for #.

Here is a version (non competing) without the clear screens and pauses (one of which blows up TIO) which displays each stage of the animation for each cycle and allows users without a Python 2.7 environment to see the output. For me, this covers the most important and interesting part of the challenge. Clearing the screen and adding delays is really just commentary IMHO.

Python 2, 118 bytes

for w in range(8):
 for x in'48966886698469906912611621960996'[w*4:w*4+4]:print('000'+bin(int(x))[2:])[-4:]
 print ' '

Try it online!

CP-1610 machine code, 33 DECLEs1 ≈ 42 bytes2

1. A CP-1610 opcode is encoded with a 10-bit value (0x000 to 0x3FF), known as a 'DECLE'.
2. As per the exception described in this meta answer, the exact score is 41.25 bytes (330 bits)

Uses $'s and spaces. Loops forever. Each frame is displayed during ~650 ms. This is a full program mapped in the memory range $4800-$4820. (The Intellivision bootstrap code will jump at $4800 after a reset if it finds something there.)

                      BT    EQU   $200      ; BACKTAB address
                            ROMW  10        ; 10-bit ROM
                            ORG   $4800     ; map the program at $4800

4800   0002                 EIS             ; enable interrupts

4801   02B8 007E            MVII  #$7E, R0  ; load %01111110 in R0
4803   0044                 SWAP  R0,   2   ; expand it to %0111111001111110

4804   00BD           loop: MOVR  R7,   R5  ; \_ R5 = pointer to
4805   02FD 0013            ADDI  #p-$, R5  ; /       BACKTAB positions

4807   0081           draw: MOVR  R0,   R1  ; copy R0 to R1
4808   03B9 0020            ANDI  #32,  R1  ; isolate the 6th bit
480A   02F9 0007            ADDI  #7,   R1  ; add 7 to draw in white
480C   02AA                 MVI@  R5,   R2  ; load the position in R2
480D   0251                 MVO@  R1,   R2  ; write the character
480E   0058                 SLLC  R0        ; \_ rotate the pattern
480F   0028                 ADCR  R0        ; /  to the left
4810   0092                 TSTR  R2        ; is R2 equal to 0?
4811   022C 000B            BNEQ  draw      ; if not, draw again

4813   0012           idle: DECR  R2        ; idle loop: decrement R2
4814   022B 0002            BMI   idle      ; until it looks positive

4816   0220 0013            B     loop      ; restart

                            ; positions
4818   0229 023D ...  p:    DECLE BT+41, BT+61, BT+82, BT+83
481C   0240 022C ...        DECLE BT+64, BT+44, BT+23, BT+22
4820   0000                 DECLE 0

Output

output

made with jzIntv

Stax, 32 bytes

éÄû?*&╬_ÅuQ☼Ñï|Σ░♦ë♣∞î,↑&èå#QWÉ╡

Run and debug it

Uses JS requestAnimationFrame to delay a frame between each step. Here is one which uses a 30-frame delay for better inspection: link

Idea is similar to MATL. Lack of vectorization makes it somewhat bulky.

05AB1E, 36 bytes

[2¾6×2úN._7Ý.Λ,т.W’IEx.Helpers.Ї’.E

If only 05AB1E had a builtin to clear the console.. :/

Starts at frame 6, and rotates indefinitely in reversed order. Uses 0 instead of # as character, although could alternatively use 1/2 for the same byte-count by replacing the ¾ with X/Y respectively. Sleeps for 100 ms between each print, but could alternatively sleep any of these times for the same byte-count: 1/2/3/4/5/6/7/8/9/T (10)/ (26)/ (36)/ (95)/ (255)/ (256)/ (1000), by replacing the т.

Explanation:

[                   # Loop indefinitely: 
 2                  #  Push 2
 ¾                  #  Push 0
  6×                #  Repeat it 6 times as string: "000000"
    2ú              #  Pad with 2 leading spaces: "  000000"
      N._           #  Rotate the string the loop-index amount of times towards the left
 7Ý                 #  Push list [0,1,2,3,4,5,6,7]
         .Λ         #  Use the modifiable Canvas builtin with these three options
           ,        #  Pop and print it with trailing newline
 т.W                #  Sleep for 100 ms
 ’IEx.Helpers.Ї’   #  Push dictionary string "IEx.Helpers.clear"
                 .E #  Evaluate and execute it as Elixir code

See this 05AB1E tip of mine (section How to use the dictionary?) to understand why ’IEx.Helpers.Ї’ is "IEx.Helpers.clear".

The Canvas Builtin uses three arguments to draw a shape:

7   0   1
  ↖ ↑ ↗
6 ← X → 2
  ↙ ↓ ↘
5   4   3

2¾6×2úN._7Ý creates the following Canvas arguments:

Try the first two steps online.

Step 1: Draw 2 characters (" ") in direction 0/:

 
 

Step 2: Draw 2-1 characters ("0") in direction 1/:

 0
 
 

Step 3: Draw 2-1 character ("0") in direction 2/:

 00
 
 

Step 4: Draw 2-1 character ("0") in direction 3/:

 00
   0
 

etc.

Step 7: Draw 2-1 character ("0") in direction 6/:

 00
   0
   0
 00

Step 8: Draw 2-1 character (" ") in direction 7/:

 00
   0
   0
 00

See this 05AB1E tip of mine for an in-depth explanation of the Canvas builtin.

I don't have a gif to see the animation in action, because IEx.Helpers.clear (or any clear through Elixir-eval for that matter) doesn't seem to work on Windows machines.. I tried to enable ANSI escape codes in the Windows Console by modifying the Registry on my PC, but wasn't able to get it to work. This should work as intended on a non-Windows machines, though.

As alternative, here the outputs where the clear-command is ignored and the infinite loop [ is replaced with a loop of eight 8F: Try it online.

Charcoal, 21 19 bytes

RFχ⁸GH*²⮌…“⊟4«L”⁺⁸ι

Try it online! Link is to verbose version of code. Outputs 8 frames. Explanation:

RFχ⁸

Repeats 8 times with a 10ms delay in between each repeat, dumping the canvas to the terminal each time. (Note that this just shows up as control characters in TIO.)

GH*²⮌…“⊟4«L”⁺⁸ι

Draw an octagon using the multidirectional *, which means all directions in turn, in the order right, down right, down, down left, left, up left, up, up right. Each side of the octagon is 2 characters long, and the octagon is drawn using a cyclic permutation of the string # ##### (obtained through reversing the cyclic extension of ##### # which then gets implicitly truncated to 8 characters) depending on the loop index.

For offline use you may prefer 1 second frames for the same byte count:

RFφ⁸GH*²⮌…“⊟4«L”⁺⁸ι

The animation can be extended to 1000 frames (125 whole cycles) at a cost of two bytes:

RFχφGH*²⮌…“⊟4«L”⁺⁸﹪ι⁸

Try it online! Link is to verbose version of code. Or with 1s frames:

RFφφGH*²⮌…“⊟4«L”⁺⁸﹪ι⁸

An infinite animation would take 27 25 bytes (10ms and 1s frames):

RWχ¹«GH*²⮌…“⊟4«L”⁺⁸﹪φ⁸≦⊕φ
RWφ¹«GH*²⮌…“⊟4«L”⁺⁸﹪φ⁸≦⊕φ