active_storage-async_variants-ui 0.1.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 279f3c8402b7c582403983ff679ecf6fead34d5a90e72f8952f27647ce9f1a5b
+  data.tar.gz: d931c539a3661e61c0f9fa20a144d399f8f10910169fb5aed75206cdda09c99a
+SHA512:
+  metadata.gz: b58f2d6f42a0122f79ea9d1c831cd53476353be2f2a98666bd0983919343a92dd20b4045c6803246ddc458aaa9e912412eee3baa5362d7fb446a418abdc206e8
+  data.tar.gz: 5e6a2837652e6e17388f3abf00e22a087ebe1cb6ca5e7d383e6a8a2a1d43f7f800ac78a05541cb91ecf95692bcbfa6a843b730842719588abc7dff6d92c282d7

data/.github/workflows/ci.yml

@@ -0,0 +1,24 @@
+name: CI
+
+on:
+  push:
+    branches: [master]
+  pull_request:
+    branches: [master]
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        ruby: ["3.3", "3.4", "4.0"]
+        rails: ["rails-7.2", "rails-8.0", "rails-8.1"]
+    steps:
+      - uses: actions/checkout@v4
+      - uses: ruby/setup-ruby@v1
+        with:
+          ruby-version: ${{ matrix.ruby }}
+          bundler-cache: true
+      - run: bundle exec appraisal ${{ matrix.rails }} bundle install
+      - run: bundle exec appraisal ${{ matrix.rails }} rake

data/.ruby-gemset

@@ -0,0 +1 @@
+active_storage-async_variants-ui

data/.ruby-version

@@ -0,0 +1 @@
+ruby-3.4.2

data/Appraisals

@@ -0,0 +1,11 @@
+appraise "rails-7.2" do
+  gem "rails", "~> 7.2.0"
+end
+
+appraise "rails-8.0" do
+  gem "rails", "~> 8.0.0"
+end
+
+appraise "rails-8.1" do
+  gem "rails", "~> 8.1.0"
+end

data/CHANGELOG.md

@@ -0,0 +1,8 @@
+## [0.1.0]
+
+- Initial release. Extracted from `active_storage-async_variants` (≤ 0.8.0), which now ships the UI-free plumbing. This gem layers on the opinionated UI:
+  - `image_tag` / `video_tag` with `async:` and `direct:` (via `AssetTagHelperExtension`).
+  - The `<turbo-frame>` state endpoint (`StatesController`) and its `_processing` / `_processed` / `_failed` partials, including the self-polling reload and the filename-bearing 1x1 GIF placeholder route.
+  - The circular progress bar (`@botandrose/progress-bar`, with `rate`/`error` states) and the failed-state retry dialog, served through `isolate_assets`.
+  - Configuration: `cdn_host`, `parent_controller`, and `retry_visible_if` (reopened onto `ActiveStorage::AsyncVariants`).
+- Depends on `active_storage-async_variants` (>= 0.9), `turbo-rails`, and `isolate_assets`. Apps that previously used the full `active_storage-async_variants` for its UI should add this gem.

data/CLAUDE.md

@@ -0,0 +1,35 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## What This Is
+
+The opinionated UI layer for `active_storage-async_variants` (the plumbing gem, a sibling checkout at `../active_storage-async_variants`). The plumbing gem is UI-free; this gem adds `image_tag`/`video_tag` rendering, a `<turbo-frame>` state endpoint, a circular progress bar, and a retry affordance. It reopens `ActiveStorage::AsyncVariants` (rather than introducing a new namespace) but defines its own engine class, `ActiveStorage::AsyncVariants::UIEngine`, since two engines can't share a class.
+
+## Commands
+
+```bash
+bundle exec rake          # rspec + cucumber (default task is :all)
+bundle exec rspec         # Run all specs
+bundle exec cucumber features/state_rendering.feature  # one browser feature
+```
+
+The `Gemfile` resolves the plumbing gem from `../active_storage-async_variants` via a path override, so local changes there are picked up without a release.
+
+## Architecture
+
+Loaded via `lib/active_storage/async_variants/ui.rb`, which requires the plumbing gem first, then:
+
+- **`AssetTagHelperExtension`** → prepended onto `ActionView::Helpers::AssetTagHelper` — adds `async:`/`direct:` to `image_tag`/`video_tag`; routes unprocessed variants through a `<turbo-frame>`.
+- **`Helper`** — shared view/controller helpers (frame id/src, resolved src, placeholder tag).
+- **`StatesController`** (`app/controllers/...`) — renders `_processing`/`_processed`/`_failed` partials at `GET /active_storage/async_variants/states/:signed_blob_id/:variation_key`, plus a `retry` action and a filename-bearing 1x1 GIF `placeholder` action. Its parent class is `ActiveStorage::AsyncVariants.parent_controller`.
+- **Assets** — `progress-bar.js` / `retry.js` / `progress.css` / `retry.css` served via `isolate_assets` (`Assets.draw` in `config/routes.rb`).
+- **Config** — `cdn_host`, `parent_controller`, `retry_visible_if`, `PASS_THROUGH_HTML_OPTIONS` (defined in `ui.rb`, reopening `ActiveStorage::AsyncVariants`).
+
+The state machine, `ProcessJob`, callbacks endpoint, `Transformer`, and `VariantRecord` columns all live in the plumbing gem.
+
+## Testing
+
+- RSpec specs in `spec/active_storage/` (view helpers, states controller, configuration) + browser-level cucumber features in `features/` (capybara + cuprite against `spec/dummy`).
+- SQLite in-memory schema in `spec/support/schema.rb`; `minimum_coverage 100` is enforced over this gem's `lib`.
+- Jobs use the `:test` queue adapter.

data/LICENSE.txt

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2026 Micah Geisel
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

data/README.md

@@ -0,0 +1,89 @@
+# ActiveStorage::AsyncVariants::UI
+
+The opinionated UI layer for [`active_storage-async_variants`](https://github.com/botandrose/active_storage-async_variants): `image_tag` / `video_tag` rendering with `async:` / `direct:`, a `<turbo-frame>` that polls a processing variant to completion, a circular progress bar (with an error state), and an optional retry affordance — all served through an isolated asset pipeline.
+
+The plumbing gem (`active_storage-async_variants`) is intentionally UI-free: a variant's `.url` serves the original while pending/processing/failed and the processed variant once ready. Add **this** gem when you want the turbo-frame/progress-bar/retry experience on top.
+
+## Installation
+
+```ruby
+gem "active_storage-async_variants-ui"
+```
+
+This pulls in `active_storage-async_variants` (the plumbing) as a dependency. Run its migrations as documented there:
+
+```bash
+bin/rails active_storage_async_variants:install:migrations
+bin/rails db:migrate
+```
+
+The only other runtime requirement is **Turbo** — the gem depends on `turbo-rails`, which a default Rails app already includes. No manual JS/CSS wiring: the async state partials are self-contained `<turbo-frame>`s and their CSS/JS are served from an isolated asset route.
+
+## `image_tag` / `video_tag` with `async:` and `direct:`
+
+This gem adds two options to `image_tag` and `video_tag`:
+
+```erb
+<%# A progress bar while pending/processing, polls for completion,
+    swaps to the real image when ready. %>
+<%= image_tag user.avatar.variant(:web), async: true %>
+
+<%# When the variant is ready, render its direct CDN/S3 URL instead of
+    routing through Rails. While pending/failed, falls back to the
+    Rails representation URL (which serves the original). %>
+<%= image_tag user.avatar.variant(:web), direct: true %>
+
+<%# Both together: direct URL once processed, progress bar while pending. %>
+<%= image_tag user.avatar.variant(:web), async: true, direct: true %>
+
+<%# Same for videos. %>
+<%= video_tag user.video.variant(:web), async: true, controls: true %>
+```
+
+The first argument must be a `VariantWithRecord` or `Preview` when either option is set; otherwise `image_tag` / `video_tag` behave exactly as in stock Rails.
+
+While a variant is processing, the partial renders a zero-network sized box (a tiny filename-bearing 1x1 GIF, or a source-less `<video>`) with the circular progress bar floating over it — indeterminate until progress is reported, then a determinate percentage that creeps forward between polls. Once a variant permanently fails, the same progress bar renders in its error state (a red ring with an X).
+
+### Configure the direct URL host
+
+By default `direct:` uses the storage service's URL. To serve from a CDN, set the host:
+
+```ruby
+# config/initializers/active_storage_async_variants.rb
+ActiveStorage::AsyncVariants.cdn_host = "https://d1234abcd.cloudfront.net"
+```
+
+The resulting URL is `"#{cdn_host}/#{variant.key}"`.
+
+## Configuration
+
+This gem reopens `ActiveStorage::AsyncVariants`, so its options sit alongside the plumbing gem's in a single `configure` block (each is also a plain accessor):
+
+```ruby
+# config/initializers/active_storage_async_variants.rb
+ActiveStorage::AsyncVariants.configure do |config|
+  config.cdn_host          = "https://d1234abcd.cloudfront.net"
+  config.parent_controller = "ApplicationController"
+  config.retry_visible_if { current_user&.admin? }
+end
+```
+
+| Option | Default | Purpose |
+|--------|---------|---------|
+| `cdn_host` | `nil` | Host for `direct:` URLs (`"#{cdn_host}/#{variant.key}"`); falls back to the storage service URL. |
+| `parent_controller` | `"ActionController::Base"` | Base class for the gem's `StatesController`, so the retry view can reach your app's `current_user`. Set as a String. |
+| `retry_visible_if` | off | Block (run in the view context) gating the failed-state retry affordance. |
+
+The `heartbeat_interval` (poll cadence) and `heartbeat_stale_after` options live in the plumbing gem; the processing `<turbo-frame>` re-polls at `heartbeat_interval`.
+
+## Retry affordance
+
+When `retry_visible_if` returns truthy, a failed variant reveals (on hover) a control that opens a dialog with the error and a "Retry processing" button. The button destroys the failed `VariantRecord` and re-enqueues the transform via the variant's `#enqueue!`. The dialog's CSS/JS are served as cached assets from `/active_storage/async_variants/assets/…`.
+
+## Overriding the partials
+
+Apps can override any state partial by creating a same-named file in their own `app/views/active_storage/async_variants/states/` (`_processing`, `_processed`, `_failed`, `show`).
+
+## License
+
+MIT

data/Rakefile

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+require "bundler/gem_tasks"
+require "rspec/core/rake_task"
+
+RSpec::Core::RakeTask.new(:spec)
+
+desc "Run browser-level acceptance tests (cucumber + cuprite against spec/dummy)"
+task :cucumber do
+  sh "bundle exec cucumber"
+end
+
+desc "Run rspec and cucumber"
+task all: [:spec, :cucumber]
+
+namespace :vendor do
+  desc "Pull the latest @botandrose/progress-bar from unpkg.com into app/assets"
+  task :progress_bar do
+    require "open-uri"
+    url = "https://unpkg.com/@botandrose/progress-bar"
+    dest = File.expand_path("app/assets/javascripts/progress-bar.js", __dir__)
+    File.write(dest, URI.open(url).read)
+    puts "Vendored #{url} -> #{dest}"
+  end
+end
+
+task default: :all

data/app/assets/javascripts/progress-bar.js

@@ -0,0 +1,347 @@
+const CIRCLE_RADIUS = 40; // fallback r attribute; CSS shrinks it to fit the stroke
+const PATH_LENGTH = 100;  // normalize the arc so dash math is independent of the radius
+const RATE_HZ = 30;       // optimistic auto-advance tick frequency
+
+const STYLES = `
+  :host {
+    --progress-color: #2E7D32;
+    --error-color: #7a242f;
+    --indeterminate-color: #999;
+    --track-color: #333333;
+    --progress-duration: 120ms;
+    --indeterminate-duration: 1.5s;
+    --bar-height: 32px;
+    --bar-padding: 8px;
+    --circular-size: 64px;
+    --circular-thickness: 16;
+    display: block;
+    overflow: hidden;
+    background: var(--track-color);
+    border: 1px solid #999;
+    border-radius: 4px;
+    min-height: var(--bar-height);
+    padding: var(--bar-padding);
+    font-size: 13px;
+    align-content: center;
+    box-sizing: border-box;
+    position: relative;
+  }
+  .bar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 0%;
+    background: var(--progress-color);
+    transition: width var(--progress-duration) ease;
+    z-index: 1;
+  }
+  .text{position: relative; z-index: 2;}
+  :host([error]) .bar {
+    background: var(--error-color);
+  }
+
+  /* Indeterminate (linear): no percent set — a fixed-width segment sweeping across the track. */
+  :host(:not([percent])) .bar {
+    background: var(--indeterminate-color);
+    width: 40%;
+    animation: indeterminate-linear var(--indeterminate-duration) infinite linear;
+  }
+
+  @keyframes indeterminate-linear {
+    0%   { transform: translateX(-100%); }
+    100% { transform: translateX(250%); }
+  }
+
+  /* Circular mode: the host box styling is for the linear track, so drop it. */
+  :host([mode="circular"]) {
+    background: transparent;
+    border: none;
+    overflow: visible;
+    padding: 0;
+    min-height: 0;
+  }
+
+  .circular {
+    position: relative;
+    display: inline-flex;
+    width: var(--circular-size);
+    height: var(--circular-size);
+  }
+
+  .ring {
+    width: 100%;
+    height: 100%;
+    transform: rotate(-90deg);
+  }
+
+  .ring circle {
+    fill: none;
+    stroke-width: var(--circular-thickness);
+    /* Shrink the radius so the stroke's outer edge always lands inside the
+       100x100 viewBox, no matter how thick --circular-thickness is. */
+    r: calc(49px - var(--circular-thickness) * 0.5px);
+  }
+
+  .track {
+    stroke: var(--track-color);
+  }
+
+  .progress-ring {
+    stroke: var(--progress-color);
+    stroke-linecap: round;
+    stroke-dasharray: ${PATH_LENGTH};
+    stroke-dashoffset: ${PATH_LENGTH};
+    transition: stroke-dashoffset var(--progress-duration) ease;
+  }
+
+  :host(:not([percent])) .progress-ring {
+    stroke: var(--indeterminate-color);
+  }
+
+  /* The X of the error glyph; revealed by [error]. */
+  .error-mark {
+    display: none;
+    fill: none;
+    stroke: var(--error-color);
+    stroke-width: var(--circular-thickness);
+    stroke-linecap: round;
+  }
+
+  .label {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+    mix-blend-mode: difference;
+  }
+
+  /* When the host carries its own inline styling (e.g. a color override), opt
+     out of the blend trick and just inherit, so the override wins predictably. */
+  :host([style]) .label {
+    mix-blend-mode: initial;
+    color: inherit;
+  }
+
+  /* Indeterminate (circular): no percent set — spin a fixed arc around the ring. */
+  :host(:not([percent])) .ring {
+    animation: indeterminate-rotate var(--indeterminate-duration) infinite linear;
+  }
+
+  :host(:not([percent])) .progress-ring {
+    stroke-dashoffset: ${PATH_LENGTH * 0.75};
+  }
+
+  @keyframes indeterminate-rotate {
+    0%   { transform: rotate(-90deg); }
+    100% { transform: rotate(270deg); }
+  }
+
+  /* Error (circular): static full ring + X. Last so it beats the indeterminate rules. */
+  :host([error]) .track { stroke: var(--error-color); }
+  :host([error]) .progress-ring { display: none; }
+  :host([error]) .ring { animation: none; }
+  :host([error]) .error-mark { display: block; }
+`;
+
+const LINEAR_HTML = `
+  <div class="bar"></div>
+  <div class="text"><slot></slot></div>
+`;
+
+const CIRCULAR_HTML = `
+  <div class="circular">
+    <svg class="ring" viewBox="0 0 100 100">
+      <circle class="track" cx="50" cy="50" r="${CIRCLE_RADIUS}"></circle>
+      <circle class="progress-ring" cx="50" cy="50" r="${CIRCLE_RADIUS}" pathLength="${PATH_LENGTH}"></circle>
+      <path class="error-mark" d="M37 37 L63 63 M63 37 L37 63"></path>
+    </svg>
+    <span class="label"><slot></slot></span>
+  </div>
+`;
+
+let styleSheet = null;
+function getStyleSheet() {
+  if (!styleSheet) {
+    styleSheet = new CSSStyleSheet();
+    styleSheet.replaceSync(STYLES);
+  }
+  return styleSheet;
+}
+
+function clampPercent(value) {
+  const number = Number(value);
+  if (Number.isNaN(number)) {
+    throw new TypeError(`progress-bar: percent must be numeric, got ${JSON.stringify(value)}`);
+  }
+  return Math.min(100, Math.max(0, number));
+}
+
+function parseRate(value) {
+  const number = Number(value);
+  if (Number.isNaN(number)) {
+    throw new TypeError(`progress-bar: rate must be numeric, got ${JSON.stringify(value)}`);
+  }
+  return number;
+}
+
+class ProgressBar extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+    this._percent = null;
+    this._renderedMode = null;
+    this._rateTimer = null;
+  }
+
+  connectedCallback() {
+    this.render();
+    this.setAttribute('role', 'progressbar');
+    this.setAttribute('aria-valuemin', '0');
+    this.setAttribute('aria-valuemax', '100');
+    this.updateBar();
+    this._syncTicker();
+  }
+
+  disconnectedCallback() {
+    this._stopTicker();
+  }
+
+  get percent() {
+    return this._percent;
+  }
+
+  set percent(value) {
+    if (value === null || value === undefined) {
+      this.removeAttribute('percent');
+    } else {
+      this.setAttribute('percent', clampPercent(value));
+    }
+  }
+
+  get error() {
+    return this.hasAttribute('error');
+  }
+
+  set error(value) {
+    this.toggleAttribute('error', Boolean(value));
+  }
+
+  get rate() {
+    const value = this.getAttribute('rate');
+    return value === null ? null : Number(value);
+  }
+
+  set rate(value) {
+    if (value === null || value === undefined) {
+      this.removeAttribute('rate');
+    } else {
+      this.setAttribute('rate', parseRate(value));
+    }
+  }
+
+  get indeterminate() {
+    return !this.hasAttribute('percent');
+  }
+
+  get mode() {
+    return this.getAttribute('mode') === 'circular' ? 'circular' : 'linear';
+  }
+
+  set mode(value) {
+    this.setAttribute('mode', value);
+  }
+
+  static get observedAttributes() {
+    return ['percent', 'mode', 'rate'];
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === 'percent') {
+      this._percent = newValue === null ? null : clampPercent(newValue);
+    }
+    if (name === 'rate' && newValue !== null) {
+      parseRate(newValue);
+    }
+    if (name === 'mode') {
+      this.render();
+    }
+    if (name === 'percent' || name === 'rate') {
+      this._syncTicker();
+    }
+    this.updateBar();
+  }
+
+  updateBar() {
+    if (this.mode === 'circular') {
+      const ring = this.shadowRoot?.querySelector('.progress-ring');
+      if (ring) {
+        ring.style.strokeDashoffset = this.indeterminate
+          ? ''
+          : String(PATH_LENGTH * (1 - this._percent / 100));
+      }
+    } else {
+      const bar = this.shadowRoot?.querySelector('.bar');
+      if (bar) {
+        // Leave width to the indeterminate CSS animation when unknown.
+        bar.style.width = this.indeterminate ? '' : `${this._percent}%`;
+      }
+    }
+
+    if (this.indeterminate) {
+      this.removeAttribute('aria-valuenow');
+    } else {
+      this.setAttribute('aria-valuenow', String(this._percent));
+    }
+  }
+
+  // Optimistic auto-advance: while a nonzero rate is set on a determinate bar,
+  // creep percent forward on its own. Indeterminate bars ignore rate entirely.
+  _syncTicker() {
+    const rate = Number(this.getAttribute('rate'));
+    const shouldRun = this.isConnected && !this.indeterminate && Number.isFinite(rate) && rate !== 0;
+    if (shouldRun && this._rateTimer === null) {
+      this._rateTimer = setInterval(() => this._tick(), 1000 / RATE_HZ);
+    } else if (!shouldRun) {
+      this._stopTicker();
+    }
+  }
+
+  _stopTicker() {
+    if (this._rateTimer !== null) {
+      clearInterval(this._rateTimer);
+      this._rateTimer = null;
+    }
+  }
+
+  _tick() {
+    const rate = Number(this.getAttribute('rate'));
+    const next = clampPercent(this._percent + rate / RATE_HZ);
+    if (next !== this._percent) {
+      this.percent = next;
+    }
+    // Hitting the bound it's heading toward retires the rate; a later percent
+    // change can re-arm it.
+    if (next === 0 || next === 100) {
+      this.removeAttribute('rate');
+    }
+  }
+
+  render() {
+    const mode = this.mode;
+    if (this._renderedMode === mode) {
+      return;
+    }
+    this._renderedMode = mode;
+    this.shadowRoot.adoptedStyleSheets = [getStyleSheet()];
+    this.shadowRoot.innerHTML = mode === 'circular' ? CIRCULAR_HTML : LINEAR_HTML;
+  }
+}
+
+if (!customElements.get('progress-bar')) {
+  customElements.define('progress-bar', ProgressBar);
+}
+
+export default ProgressBar;

data/app/assets/javascripts/retry.js

@@ -0,0 +1,11 @@
+// Declarative shadow roots are only attached by the initial HTML parser, not by
+// fragment insertion (innerHTML / Turbo frame swaps), so promote them on connect.
+customElements.define("async-variant-retry", class extends HTMLElement {
+  connectedCallback() {
+    if (this.shadowRoot) return
+    const template = this.querySelector(":scope > template[shadowrootmode]")
+    if (!template) return
+    this.attachShadow({ mode: template.getAttribute("shadowrootmode") }).append(template.content)
+    template.remove()
+  }
+})

data/app/assets/stylesheets/progress.css

@@ -0,0 +1,35 @@
+/* turbo-frame is inline by default; make it and the wrapper block-level so the
+   media box (and the progress bar centered on it) coincides with the parent
+   figure box, instead of sitting in a taller line box from the baseline gap --
+   otherwise an overlay centered on the figure lands off-center from the ring. */
+turbo-frame:has(> .async-variant-processing),
+turbo-frame:has(> .async-variant-failed) {
+  display: block;
+}
+.async-variant-processing,
+.async-variant-failed {
+  position: relative;
+  display: block;
+}
+/* Present to reserve the variant's box, but rendered invisible via opacity
+   rather than visibility/display -- so it still has layout and stays queryable
+   by Capybara. The progress bar floats over it. block drops the baseline
+   descender so the ring centers on the box, not a few px below it. */
+.async-variant-processing img,
+.async-variant-processing video,
+.async-variant-failed img,
+.async-variant-failed video {
+  opacity: 0.001;
+  display: block;
+}
+.async-variant-progress {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  --circular-size: 80px;
+  --progress-color: #2E7D32;
+  --indeterminate-color: #2E7D32;
+  --track-color: rgba(0, 0, 0, 0.25);
+  --error-color: #ff7c81;
+}