Adds a spinner

public-apps/smart_cells.livemd

@@ -12,6 +12,32 @@ Mix.install([
 
 ## Section
 
+```elixir
+defmodule Kino.Spinner do
+  def new() do
+    Kino.HTML.new("""
+    <div class="loader"></div>
+
+    <style>
+      .loader {
+        border: 16px solid #f3f3f3; /* Light grey */
+        border-top: 16px solid #3498db; /* Blue */
+        border-radius: 50%;
+        width: 30px;
+        height: 30px;
+        animation: spin 2s linear infinite;
+      }
+
+      @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+      }
+    </style>
+    """)
+  end
+end
+```
+
 ```elixir
 defmodule GitHubAPI do
   def headers(),
@@ -55,20 +81,29 @@ defmodule GitHubAPI do
 end
 ```
 
+```elixir
+frame = Kino.Frame.new() |> Kino.render()
+
+Kino.Frame.append(frame, Kino.Spinner.new())
+```
+
 ```elixir
 items = GitHubAPI.new() |> GitHubAPI.get_all()
 nil
 ```
 
 ```elixir
-for repo <- items, repo["repository"]["owner"]["login"] != "livebook-dev" do
-  %{
-    "Name" => repo["repository"]["name"],
-    "Description" => repo["repository"]["description"],
-    "URL" => repo["repository"]["html_url"]
-  }
-end
-|> Kino.DataTable.new(name: "Smart cells")
+table =
+  for repo <- items, repo["repository"]["owner"]["login"] != "livebook-dev" do
+    %{
+      "Name" => repo["repository"]["name"],
+      "Description" => repo["repository"]["description"],
+      "URL" => repo["repository"]["html_url"]
+    }
+  end
+  |> Kino.DataTable.new(name: "Smart cells")
+
+Kino.Frame.render(frame, table)
 ```
 
-<!-- livebook:{"offset":1656,"stamp":{"token":"XCP.UQKFeTQkO9H-qhsO_ThypqbD1bal4zBCrCVmJb1odeGBZWy0CRpRuEKYQxsySyhsEHNurHX68ZQO3WXdmGn2IrQl_5LBcCztAgyKBJY11b4Cw1ksj_RS","version":2}} -->
+<!-- livebook:{"offset":2330,"stamp":{"token":"XCP.M4F9Mu9JmVN3zo1H252A6D_XZK0YF0q6oNOcG5Ddz3jQuIiKPSiqgM0qdcv3ETVMC5DzgJA0o9GSnps38eVzGwJNhy27ZAr3o9Junmz98dkNvYcBQAiJ","version":2}} -->