Loading Circle Animation

Question

Loading Circle Animation

Challenge

Write a full program that takes no input (or has an unused input) that displays exactly the following ASCII animation for as long as possible or only 8 frames.

Frame 1:

 #
#
#  #
 ##

Frame 2:

 ##
#
#
 ##

Frame 3:

 ##
#  #
#
 #

Frame 4:

 ##
#  #
#  #

^{(Note that the line at the end is empty.)}

Frame 5:

 ##
#  #
   #
  #

Frame 6:

 ##
   #
   #
 ##

Frame 7:

  #
   #
#  #
 ##

Frame 8:

#  #
#  #
 ##

^{(Note that the line at the start is empty.)}

Rules

• The program takes no input (or has an unused input).
• The animation can start at any frame, but must animate in sequential order.
• The animation can be in reverse order.
• The program has to run as long as possible or for exactly 8 frames.
• The animation has to be displayed at the same position on screen for every frame.
• Trailing/leading whitespace is okay, as long as the animation looks right.
• # and space can be replaced with different (not a newline) distinct characters that are each 1 byte.
• There should be an additional pause of any length but more than 0 ms after an entire frame is drawn.
• This is code-golf, so the shortest answer in bytes wins.

Answer 1

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 runing:

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

Really the programs doesn't start by an state of the animation, it waits 2 cycles before start but... its cool... i supose?

Answer 2

CP-1610 machine code, 33 DECLEs¹ ≈ 42 bytes²

<sub>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)</sub>

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

^{made with jzIntv}

Answer 3

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.

Answer 4

Charcoal, 21 19 bytes

ＲＦχ⁸ＧＨ*²⮌…“⊟4«Ｌ”⁺⁸ι

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

ＲＦχ⁸

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

ＧＨ*²⮌…“⊟4«Ｌ”⁺⁸ι

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:

ＲＦφ⁸ＧＨ*²⮌…“⊟4«Ｌ”⁺⁸ι

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

ＲＦχφＧＨ*²⮌…“⊟4«Ｌ”⁺⁸﹪ι⁸

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

ＲＦφφＧＨ*²⮌…“⊟4«Ｌ”⁺⁸﹪ι⁸

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

ＲＷχ¹«ＧＨ*²⮌…“⊟4«Ｌ”⁺⁸﹪φ⁸≦⊕φ
ＲＷφ¹«ＧＨ*²⮌…“⊟4«Ｌ”⁺⁸﹪φ⁸≦⊕φ

Answer 5

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

Answer 6

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 8^th.

⎕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:

Answer 7

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:

• Length of the lines we want to draw
• Character/string to draw
• The direction to draw in, where each digit represents a certain direction:

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

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

• Length: 2
• Characters: " 000000" (potentially rotated)
• Directions: [0,1,2,3,4,5,6,7], which translate to \$[↑,↗,→,↘,↓,↙,←,↖]\$

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.

Answer 8

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.

Answer 9

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!

Answer 10

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.

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

Answer 11

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.

Answer 12

C (gcc), 162 149 bytes

• -13 thanks to ceilingcat

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!

Answer 13

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.

Answer 14

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!

Answer 15

JavaScript, 93 bytes

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