tentativo di ricreare un gif di carico in css

sto cercando di ricreare il seguente gif in puro css -tentativo di ricreare un gif di carico in css

loading image

Css qui - http://codepen.io/anon/pen/FmCaL - (webkit/cromo solo a mo)

Sto tentando di ricreare il frammento mancante del cerchio utilizzando il precedente & dopo i selettori di psuedo, ma non riesco a ottenere gli angoli giusti.

È anche possibile fare? C'è un approccio migliore?

Grazie per qualsiasi aiuto finora. Avrei dovuto specificare che ho bisogno che la freccia sia trasparente. Non posso usare un colore a tinta unita per la parte mancante del cerchio.

fonte

2013-07-30 Finnnn

Che cosa è esattamente attualmente non va con gli angoli? Intendi la piccola lacuna nel cerchio interno? È un problema che il cerchio esterno non sia un vero cerchio? –

Gli elementi precedente e successivo non sembrano corretti. Dovrebbero essere completamente collegati al "cerchio". Non è abbastanza simile alla gif. – Finnnn

Che ne dici di farlo semplicemente in questo modo?

Demo

div { 
    border: 10px solid #000; 
    height: 50px; 
    width: 50px; 
    border-radius: 50%; 
    position: relative;  
} 

div:after { 
    height: 0; 
    width: 0; 
    display: block; 
    position: absolute; 
    right: -12px; 
    content: " "; 
    border-bottom: 12px solid #fff; 
    border-right: 12px solid transparent; 
    transform: rotate(10deg); 
}

Spiegazione: Quello che stiamo facendo qui sta usando :after pseudo per posizionare l'elemento di assoluta al cerchio e l'utilizzo di transform proprietà per ruotare il triangolo.

Demo 2 (con animazione)

div { 
    border: 10px solid #000; 
    height: 50px; 
    width: 50px; 
    border-radius: 50%; 
    position: relative;  
    animation: spin 1s infinite linear; 
} 

div:after { 
    height: 0; 
    width: 0; 
    display: block; 
    position: absolute; 
    right: -12px; 
    content: " "; 
    border-bottom: 12px solid #fff; 
    border-right: 12px solid transparent; 
    transform: rotate(10deg); 
} 

@keyframes spin { 
    from { transform: rotate(0deg); } 
    to { transform: rotate(360deg); } 
}

Il mio suggerimento: Come hai aggiornato il tuo qustion, hai detto che volevi una grondaia trasparente, vi suggerisco di utilizzare un'immagine di .png e ruotare piuttosto che scrivere 100 righe di CSS e preoccuparsi della compatibilità tra browser. In alternativa, dato che ho condiviso un link nei commenti, puoi usare il mascheramento CSS.

fonte

2013-07-30 11:40:56

I miei pensieri esattamente. Aggiornato, quindi funziona anche in Chrome/webkit: http://jsfiddle.net/EFycS/1/ – GolezTrol

Ho avuto qualcosa di simile: http://codepen.io/anon/pen/BsokL – Kobi

problemi di rete, aggiornerò la risposta Presto con una demo e spiegazione spinning, mi dispiace per quello –

Se non si cura se il triangolo è trasparente, posso suggerire qualcosa di simile:

DEMO (opere in Chrome e Firefox)

.loading { 
    display: inline-block; 
    margin: 5em; 
    border: 10px solid grey; 
    border-radius: 50%; 
    width: 20px; 
    height: 20px; 
    -webkit-animation: spin 1s linear infinite; 
    -moz-animation: spin 1s linear infinite; 
    animation: spin 1s linear infinite;  
} 
.loading:before { 
    content: ''; 
    display: block; 
    border: 13px solid transparent; 
    border-right-color: white; 
    width: 20px; 
    height: 0; 
    border-radius: 50%; 
    margin: -3px 0 0 -13px; 
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    transform: rotate(-90deg); 
} 
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(359deg); }} 
@-moz-keyframes spin { 100% { -moz-transform: rotate(359deg); }} 
@keyframes spin { 100% { transform: rotate(359deg); }}

fonte

2013-07-30 11:52:34 tborychowski

tentativo di ricreare un gif di carico in css

risposta

Problemi correlati