Pie Chart CSS3 con animazione e senza JavaScript

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.

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!