Kino Spinner component

kino_spinner.livemd

Kino Spinner

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

Section

defmodule Kino.Spinner do
  def new(dimensions \\ "30px") 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: #{dimensions};
        height: #{dimensions};
        animation: spin 2s linear infinite;
      }

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

Kino.Spinner.new("50px")

Kino.Spinner.new("20px")