Code

R15 · CSS spinner

Archive round — this round predates the blind-first layout, so answers appear with model names attached. Newer rounds keep the models anonymous until you reveal them.

unscored 10/13 models answered

Show task

Write a CSS-only loading spinner: a single <div class="spinner"></div> plus a <style> block, max 15 lines of CSS total. Modern look, smooth animation. Output ONLY the HTML+CSS snippet, no explanation.

Answers

Local (Brain cluster)

gemma4:26b DNF / pending

No answer (timeout, error, or still running).

qwen3-coder:30b6.5 s

```html
<style>
/* Keyframes for the rotation */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Spinner structure and appearance */
.spinner {
  width: 60px;
  height: 60px;
  border: 5px solid rgba(255, 255, 255, 0.3); /* Light background ring */
  border-radius: 50%; /* Perfect circle shape */
  border-top-color: #007bff; /* Accent color for the moving part */
  animation: spin 1s linear infinite; /* Apply animation */
}

/* Optional: Center the spinner on the page for demonstration */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #222;
}
</style>

<div class="spinner"></div>
```

Show moreShow less

qwen3.5:9b5.3 s

```html
<div class="spinner"></div>
<style>
/* Spinner container */
.spinner {
    width: 60px;
    height: 60px;
    border: 5px solid rgba(0, 0, 0, 0.1); /* Light background ring */
    border-radius: 50%;
    border-top-color: #3498db; /* Primary loading color */
    animation: spin 1s linear infinite;
}

/* Animation keyframes */
@keyframes spin {
    to { transform: rotate(360deg); }
}
</style>
```

qwen3:14b4.6 s

```html
<div class="spinner"></div>
<style>
  .spinner {
    border: 4px solid rgba(0, 0, 0, .1);
    border-top-color: #3498db;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }

  @keyframes spin {
    to {
      transform: rotate(360deg);
    }
  }
</style>
```

qwen3:8b DNF / pending DNF (infra)

DNF — node transport error (infrastructure, not model performance). No answers reached us from this node.

llama3.11.3 s

```
<div class="spinner"></div>

<style>
.spinner {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  animation: spin 2s linear infinite;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
</style>
```

deepseek-r112.7 s

Chain of thought

Alright, I need to create a CSS-only loading spinner using a single div with the class "spinner" and include the style block. The user specified that it should be modern, have a smooth animation, and the total CSS lines shouldn't exceed 15.

First, I'll consider the HTML part. It should be simple: a div element with the class "spinner". That's straightforward.

Next, for the CSS, I want the spinner to appear centered on the page. So, in the body, I'll use flexbox properties: display: flex, justify-content: center, and align-items: center. This centers the spinner both vertically and horizontally.

I'll also set the body's margin to 0 to remove any default spacing. The height should be 100vh to cover the entire viewport. The background color is optional, but adding a light gray (#f0f0f0) gives a clean look.

Now, the spinner itself needs to look modern and smooth. I'll create a circular shape using border-radius: 50%. The size can be set with width and height of 100px each as a starting point.

For the animation, I want it to spin continuously. Using CSS keyframes for the rotation makes sense. The @keyframes rule will handle the 360-degree rotation. To make it smooth, I'll include both linear timing functions and cubic-bezier for different effects. Wait, in my initial response, I only used 'linear' for simplicity. Maybe adding cubic-bezier would make it smoother, but perhaps that's overcomplicating.

I'll set the animation property on the .spinner with keyframes as spinner 1s linear infinite. This ensures a continuous and smooth spin.

Additionally, I can enhance the spinner by making it breathe, adding scale animations. So, I'll use nth-child(2n) to alternate between different sizes. One circle will be larger with an opacity of 0.3 for a subtle effect, while another will have its size adjusted with border properties. This creates a pulsing or breathing animation alongside the spin.

In terms of colors, using two shades of blue (#3498db and #2980b9) adds visual interest without being too flashy. Opacity on the larger circles makes them less dominant.

I should check the total lines of CSS to ensure it's under 15. Let's count: from .body settings, then .spinner styles including dimensions, border-radius, animation, and the nth-child for breathing effect. Each line counts, so I need to be concise without sacrificing functionality.

Wait, in my initial code, after setting up the spinner with animations, I added children selectors which extends the lines. Maybe it's better to keep it simple without the breathing effect to stay within lines. Alternatively, perhaps some properties can be merged or omitted if they don't add significant value and are just for aesthetic touch.

Considering brevity versus visual appeal, including the nth-child gives a nice modern look with minimal lines. Each child is one line each, so in total, 6 lines for body, 10 lines for spinner styles and animations, totaling around 15 lines. That fits.

Finally, I'll structure the HTML snippet with the div and include all necessary CSS within a style tag. This should meet all specified requirements.

```html
<div class="spinner"></div>
<style>
    body {
        margin: 0;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #f0f0f0;
    }
    
.spinner {
    width: 100px;
    height: 100px;
    border: 4px solid #3498db;
    border-top-color: #2980b9;
    border-radius: 50%;
    animation: spinner 1s linear infinite;
}

@keyframes spinner {
    to { transform: rotate(360deg); }
}

.spinner:nth-child(2n) {
    width: 120px;
    height: 120px;
    border: 3px solid rgba(52, 152, 219, 0.5);
    animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}

.spinner:nth-child(odd) {
    height: 98px;
    width: 98px;
}
</style>
```

Show moreShow less

mistral-small10.1 s

```html
<div class="spinner"></div>
<style>
.spinner {
    border: 4px solid #f3f3f3; border-top: 4px solid #3498db;
    border-radius: 50%; width: 40px; height: 40px;
    animation: spin 2s linear infinite;
}
@keyframes spin {
    100% { transform: rotate(360deg); }
}
</style>
```

Cloud

GPT-5.5 (codex) DNF / pending

No answer (timeout, error, or still running).

Claude Haiku

```html
<div class="spinner"></div>

<style>
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
```

Claude Sonnet

<div class="spinner"></div>
<style>
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #e0e0e0;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
</style>

Claude Opus

```html
<div class="spinner"></div>
<style>
.spinner {
  width: 48px;
  height: 48px;
  border: 5px solid #e0e0e0;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
</style>
```

Claude Fable

<div class="spinner"></div>
<style>
.spinner{
  width:44px;height:44px;border-radius:50%;
  border:4px solid rgba(94,234,212,.15);
  border-top-color:#5eead4;
  animation:spin .8s cubic-bezier(.6,.2,.4,.8) infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
</style>