# Componente Spinner di caricamento personalizzato

**URL:** https://meta.discourse.org/t/custom-loading-spinner-component/174801
**Category:** Theme component
**Created:** [2 Gennaio 2021, 2:43pm UTC](https://meta.discourse.org/t/custom-loading-spinner-component/174801 "2021-01-02T14:43:23Z")
**Posts on this page:** 19
**Page:** 1

<div class="post-metadata">

### Author: ![meghna](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/meghna/32/453356_2.png) [@meghna](https://meta.discourse.org/u/meghna)
#### Post date: [2 Gennaio 2021, 2:43pm UTC](https://meta.discourse.org/t/custom-loading-spinner-component/174801/1 "2021-01-02T14:43:23Z")

</div>

Mentre lavoravo al [tema Grogu](https://meta.discourse.org/t/grogu-a-theme-inspired-by-the-mandalorian/174758), ho implementato un’icona di caricamento personalizzata per quel tema e ho pensato che sarebbe stato fantastico avere un componente autonomo per personalizzare l’icona della ruota di caricamento.

Questo componente consente allo staff di personalizzare l’icona di rotazione predefinita. Sono disponibili tre opzioni di personalizzazione tramite le impostazioni del tema:

- nome dell’icona
- dimensione dell’icona
- colore dell’icona

Il componente accetta solo il nome di un’icona [FontAwesome](https://fontawesome.com/) e consiglio di sceglierne una tra [queste](https://fontawesome.com/icons/categories/spinners) per ottenere un effetto di rotazione eccezionale.

Buon divertimento e fateci sapere come migliorare ulteriormente questo componente. 🙂

| | | |
| --- | --- | --- |
| 🕶 | **Anteprima** | [Anteprima nel creatore di temi](https://theme-creator.discourse.org/theme/meghna/custom-loading-spinner) |
| 🔗 | **Repository Github** | [discourse-custom-loading-spinner](https://github.com/meghnaAJ/discourse-custom-loading-spinner) |
| 🛠 | **Guida all’installazione** | [Come installare un tema o un componente del tema](https://meta.discourse.org/t/how-do-i-install-a-theme-or-theme-component/63682) |

---

<div class="post-metadata">

### Author: ![ondrej](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ondrej/32/198804_2.png) [@ondrej](https://meta.discourse.org/u/ondrej)
#### Post date: [2 Gennaio 2021, 2:53pm UTC](https://meta.discourse.org/t/custom-loading-spinner-component/174801/2 "2021-01-02T14:53:57Z")

</div>

Ciao, appena installato questo! Un miglioramento che potresti apportare è aggiungere un altro colore per il tema scuro, poiché il colore scelto per il tema chiaro, come #000000, non sarà visibile su un tema scuro.

---

<div class="post-metadata">

### Author: ![meghna](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/meghna/32/453356_2.png) [@meghna](https://meta.discourse.org/u/meghna)
#### Post date: [2 Gennaio 2021, 2:55pm UTC](https://meta.discourse.org/t/custom-loading-spinner-component/174801/3 "2021-01-02T14:55:45Z")

</div>

È proprio per questo che il colore è personalizzabile tramite l’impostazione del tema ‘colore icona personalizzato’.

 ![Screenshot 2021-01-02 alle 20.26.49](https://global.discourse-cdn.com/meta/original/3X/1/1/110504e7d665f4f5636adb778c3379c2e18353d2.png)

---

<div class="post-metadata">

### Author: ![ondrej](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ondrej/32/198804_2.png) [@ondrej](https://meta.discourse.org/u/ondrej)
#### Post date: [2 Gennaio 2021, 3:02pm UTC](https://meta.discourse.org/t/custom-loading-spinner-component/174801/4 "2021-01-02T15:02:33Z")

</div>

No, ciò che intendo è che il colore dell’icona dovrebbe invertirsi automaticamente a seconda che tu stia utilizzando un tema chiaro o scuro.

Il mio sfondo del tema chiaro è #F0F0F0 e quello del tema scuro è #000000.

Di conseguenza, è difficile trovare un colore che offra un buon contrasto. Voglio un’icona bianca nel tema scuro e una nera nel tema chiaro.  
Grazie 😉

---

<div class="post-metadata">

### Author: ![meghna](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/meghna/32/453356_2.png) [@meghna](https://meta.discourse.org/u/meghna)
#### Post date: [2 Gennaio 2021, 3:20pm UTC](https://meta.discourse.org/t/custom-loading-spinner-component/174801/5 "2021-01-02T15:20:09Z")

</div>

> [@ondrej](#):
>
> Voglio che sia un’icona bianca nel tema scuro e una nera nel tema chiaro.

Per il cambio automatico del colore dell’icona in base ai colori del tema, non specificare alcun valore nell’impostazione del tema “custom icon color”.

Ho ora reso questo il comportamento predefinito tramite:

> <https://github.com/MeghnaAJ/discourse-custom-loading-spinner/commit/1f404c9c32aa846e85e2dc8986dc5c012ae40fba>

---

<div class="post-metadata">

### Author: ![ondrej](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ondrej/32/198804_2.png) [@ondrej](https://meta.discourse.org/u/ondrej)
#### Post date: [2 Gennaio 2021, 3:59pm UTC](https://meta.discourse.org/t/custom-loading-spinner-component/174801/6 "2021-01-02T15:59:15Z")

</div>

Splendido! Grazie @meghna 😍

---

<div class="post-metadata">

### Author: ![MrDavis97](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/mrdavis97/32/206391_2.png) [@MrDavis97](https://meta.discourse.org/u/MrDavis97)
#### Post date: [23 Febbraio 2021, 9:25pm UTC](https://meta.discourse.org/t/custom-loading-spinner-component/174801/7 "2021-02-23T21:25:54Z")

</div>

Adoro questo componente del tema e funziona benissimo nella home page. Tuttavia, in alcune aree della mia istanza di Discourse, viene mostrato il caricamento predefinito. Ad esempio, ogni volta che sono nel pannello di amministrazione o nelle impostazioni utente. @meghna C’è un modo per risolvere questo problema?

---

<div class="post-metadata">

### Author: ![kynic](https://avatars.discourse-cdn.com/v4/letter/k/b487fb/32.png) [@kynic](https://meta.discourse.org/u/kynic)
#### Post date: [14 Settembre 2023, 7:09pm UTC](https://meta.discourse.org/t/custom-loading-spinner-component/174801/8 "2023-09-14T19:09:07Z")

</div>

Aggiornalo, non funziona più con 3.2.0.beta2-dev.

Dà errore nella console di Chrome @meghna

---

<div class="post-metadata">

### Author: ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)
#### Post date: [20 Settembre 2023, 3:44am UTC](https://meta.discourse.org/t/custom-loading-spinner-component/174801/9 "2023-09-20T03:44:29Z")

</div>

Sto testando questo su Ubuntu con l’ultima versione del browser Chrome e sto riscontrando il seguente errore sul mio sito di sviluppo locale:

`component-templates.js:54 [discourse/theme-10/discourse/templates/components/conditional-loading-spinner] conditional-loading-spinner è stato creato utilizzando gjs e il suo template non può essere sovrascritto. Ignorando la sovrascrittura.`

Sul mio sito di produzione, testando anche con l’ultima versione del browser Chrome su Ubuntu, non riscontro errori, ma non vedo nemmeno uno spinner di caricamento.

Penso che siano state apportate alcune modifiche al modo in cui i template vengono sovrascritti nei temi da quando questo componente tematico è stato rilasciato: [(not recommended) Overriding Discourse templates from a Theme or Plugin](https://meta.discourse.org/t/overriding-discourse-templates-from-a-theme-or-plugin/247487). Penso che anche il modo in cui Discourse implementa lo spinner di caricamento sia cambiato da allora.

---

<div class="post-metadata">

### Author: ![kynic](https://avatars.discourse-cdn.com/v4/letter/k/b487fb/32.png) [@kynic](https://meta.discourse.org/u/kynic)
#### Post date: [24 Settembre 2023, 2:20am UTC](https://meta.discourse.org/t/custom-loading-spinner-component/174801/10 "2023-09-24T02:20:07Z")

</div>

@meghna questo verrà risolto o è rotto ora?🤔

---

<div class="post-metadata">

### Author: ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)
#### Post date: [24 Settembre 2023, 2:53am UTC](https://meta.discourse.org/t/custom-loading-spinner-component/174801/11 "2023-09-24T02:53:18Z")

</div>

Aspetta un attimo. Il team è stato alla riunione annuale e potrebbe avere altre priorità quando ricomincerà a lavorare questa settimana.

---

<div class="post-metadata">

### Author: ![meghna](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/meghna/32/453356_2.png) [@meghna](https://meta.discourse.org/u/meghna)
#### Post date: [29 Settembre 2023, 3:34pm UTC](https://meta.discourse.org/t/custom-loading-spinner-component/174801/12 "2023-09-29T15:34:23Z")

</div>

La correzione richiede alcune modifiche al core. Ci stiamo lavorando e lo risolveremo presto.

---

<div class="post-metadata">

### Author: ![kynic](https://avatars.discourse-cdn.com/v4/letter/k/b487fb/32.png) [@kynic](https://meta.discourse.org/u/kynic)
#### Post date: [10 Ottobre 2023, 7:04pm UTC](https://meta.discourse.org/t/custom-loading-spinner-component/174801/13 "2023-10-10T19:04:44Z")

</div>

Grazie per l’ottimo lavoro 😃 ❤

---

<div class="post-metadata">

### Author: ![meghna](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/meghna/32/453356_2.png) [@meghna](https://meta.discourse.org/u/meghna)
#### Post date: [13 Ottobre 2023, 6:41am UTC](https://meta.discourse.org/t/custom-loading-spinner-component/174801/14 "2023-10-13T06:41:32Z")

</div>

Questo componente del tema è stato aggiornato per funzionare sull’ultima versione di Discourse (per gentile concessione di @cvx).

---

<div class="post-metadata">

### Author: ![kynic](https://avatars.discourse-cdn.com/v4/letter/k/b487fb/32.png) [@kynic](https://meta.discourse.org/u/kynic)
#### Post date: [27 Ottobre 2023, 3:56am UTC](https://meta.discourse.org/t/custom-loading-spinner-component/174801/15 "2023-10-27T03:56:04Z")

</div>

Ancora non funziona per me. 😕

Modifica: Funziona ora dopo aver aggiornato discourse oggi.

---

<div class="post-metadata">

### Author: ![sunjam](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/sunjam/32/175682_2.png) [@sunjam](https://meta.discourse.org/u/sunjam)
#### Post date: [28 Ottobre 2023, 1:33am UTC](https://meta.discourse.org/t/custom-loading-spinner-component/174801/16 "2023-10-28T01:33:59Z")

</div>

Mi chiedo se usare un’icona svg al posto di FontAwesome. Grazie in ogni caso.

> [@Replace Discourse's default SVG icons with custom icons in a theme](https://meta.discourse.org/t/replace-discourses-default-svg-icons-with-custom-icons-in-a-theme/115736):
>
> You can replace a Discourse’s default SVG icons individually or as a whole with your own custom SVG and override them [within a theme or theme component.](https://meta.discourse.org/t/beginners-guide-to-using-discourse-themes/91966#create-new-themes-and-theme-components-7)Step 1 - Create an SVG Spritesheet To get started, you must create an SVG Spritesheet. This can contain anything from a single additional custom SVG icon up to an entire replacement set of hundreds. The spritesheet should be saved as an SVG file. In principle, you are nesting the \<svg\> tag contents from the original SVG icon file into \<symbol\> …

---

<div class="post-metadata">

### Author: ![kynic](https://avatars.discourse-cdn.com/v4/letter/k/b487fb/32.png) [@kynic](https://meta.discourse.org/u/kynic)
#### Post date: [25 Novembre 2023, 8:28pm UTC](https://meta.discourse.org/t/custom-loading-spinner-component/174801/17 "2023-11-25T20:28:37Z")

</div>

Smettendo di funzionare con l’ultima versione. 3.2.0.beta4-dev

([24532653e6](https://github.com/discourse/discourse/commits/24532653e672783aab8a42dd20c341232fc02d22))

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [25 Novembre 2023, 10:15pm UTC](https://meta.discourse.org/t/custom-loading-spinner-component/174801/18 "2023-11-25T22:15:44Z")

</div>

Per me va bene con l’ultima versione 🤔

---

<div class="post-metadata">

### Author: ![kynic](https://avatars.discourse-cdn.com/v4/letter/k/b487fb/32.png) [@kynic](https://meta.discourse.org/u/kynic)
#### Post date: [25 Novembre 2023, 10:49pm UTC](https://meta.discourse.org/t/custom-loading-spinner-component/174801/19 "2023-11-25T22:49:24Z")

</div>

Sì, funziona in alcuni punti, ma non nei post, quando fai clic su un altro post per vederlo. ora non funziona.
