Livebook Kino Spinner component

kino_spinner.livemd

Kino Spinner component

Mix.install([
  {:kino, "~> 0.12.3"}
])

Section

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

Kino.Spinner.new()