Pie Chart CSS3 con animazione e senza JavaScript

CSS

Un utente su Facebook, Enrico, che ringrazio in quanto mi ha dato questa brillante idea, chiedeva se era possibile realizzare un grafico a torta, animato ma solo con i CSS. Ed io gli ho risposto che tutto è possibile, basta volerlo.

pie_chart_css3_animations_minimamente

Ovviamente questo è un esperimento, ma è anche facile da capire e comprendere. Partiamo subito dal codice HTML5:

Come vedete ci sono molti div, ma questo è dovuto al fatto che per le animazioni a volte bisogna ingegnarsi. Nel codice che vi ho illustrato sopra, avete 2 tipi di grafici a torta, al primo è possibile dare un valore che va da una percentuale del 50% fino ad un massimo del 100%, mentre il secondo da una percentuale dello 0% fino ad un massimo del 50%.

Per quanto riguarda il CSS eccolo:

E’ un codice che va studiato, ma vi basterà fare un compia ed incolla dell’esempio per capire quanto sia facile lavorarci in questo modo.

Inoltre ho utilizzato un attributo del nuovo linguaggio HTML5, ovvero il data-percentage, ed ho fatto in modo che la percentuale non debba essere cambiata dal codice CSS, ma direttamente nel codice HTML.

Se volete cambiare la dimensione del cerchio, dovrete non solo agire sulla parte normale della larghezza “width” e della altezza “height” ma anche sulla funzione che ha permesso tutto questo, ovvero il clip. Il clip ha la funzione di una maschera, è come se volete nascondere qualcosa e l’orientamento è sempre in senso orario, ecco un esempio di clip che ho utilizzato:

L’ordine è il seguente “(top, right, bottom, left)” e va detto che il clip, funziona solo con “position: fixed” oppure “position: absolute” e non permette l’uso di un valore in percentuale, ma solo un valore in pixel, è quindi leggermente limitativo.

Il codice che ho creato è per ora embrionale, ma abbastanza compatibile con i browser più recenti. Se avete suggerimenti o commenti, scrivetelo qui sotto!

7 commenti su Pie Chart CSS3 con animazione e senza JavaScript

  1. Ciao, quello che hai fatto è molto interessante.
    Ho una domanda per te:

    Io praticamente devo controllare l’animazione con javascript/jquery.
    Quindi avrò due pulsanti +/- che incrementano/decrementano il completamento dell’animazione. Hai qualche idea di come posso fare?

    Thank you 🙂

    1. Ciao Daniele,

      in teoria il metodo migliore per farlo è che al tuo + o – devi poter dire allo javascript di cambiare nel codice html il data-percentage=””

      Tutto qui 🙂

  2. Ciao, molto bello ci ho messo un po a trovare questo esempio.
    Vorrei chiederti due cose se ti è possibile rispondermi:
    1) è possibile inserire un contatore incrementale apposto delle immagini?
    2) come potrei utilizzare questo listato in un template joomla 3>.
    Grazie e spero di essere stato chiaro.

    1. Ciao Mariano,

      Per inserire un contatore incrementale è possible farlo ma sono tramite JavaScript.
      Il codice è HTML e quindi è utilizzabile su qualsiasi piattaforma.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *