Produto
PRODUTO
Spinner
O spinner é utilizado para indicar o progresso de carregamento ou processamento de conteúdo, seja um upload de arquivo, carregamento de página, mudança de estado de um componente etc.
Tipos
Sempre use a animação de introdução para o spinner. Ela deve ser reproduzido assim que uma ação do usuário for iniciada e, em seguida, fazer a transição para o componente carregado.
Background claro
Background escuro
Código
HTML 
Exibir código
Copiar código
Exibir código
<span class="spinner">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
<defs>
<path id="a" d="M1 12a1 1 0 0 1 2 0 9 9 0 1 0 9-9 1 1 0 0 1 0-2c6.075 0 11 4.925 11 11s-4.925 11-11 11S1 18.075 1 12z"></path>
</defs>
<g fill="none" fill-rule="evenodd">
<path d="M0 0h24v24H0z"></path>
<mask id="b" fill="#fff">
<use xlink:href="#a"></use>
</mask>
<use fill="none" fill-rule="nonzero" xlink:href="#a"></use>
<g fill="#3153f5" mask="url(#b)">
<path d="M0 0h24v24H0z"></path>
</g>
</g>
</svg>
</span>
<span class="spinner dark">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
<defs>
<path id="a" d="M1 12a1 1 0 0 1 2 0 9 9 0 1 0 9-9 1 1 0 0 1 0-2c6.075 0 11 4.925 11 11s-4.925 11-11 11S1 18.075 1 12z"></path>
</defs>
<g fill="none" fill-rule="evenodd">
<path d="M0 0h24v24H0z"></path>
<mask id="b" fill="#fff">
<use xlink:href="#a"></use>
</mask>
<use fill="none" fill-rule="nonzero" xlink:href="#a"></use>
<g fill="#fff" mask="url(#b)">
<path d="M0 0h24v24H0z"></path>
</g>
</g>
</svg>
</span>
SASS Exibir código
Copiar código
Exibir código
.spinner{
width: 40px;
height: 40px;
line-height: 40px;
display: block;
svg{
position: relative;
top: -2px;
width: 24px;
height: 24px;
-webkit-animation-name: spin;
-webkit-animation-duration: 2000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 2000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 2000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: spin;
animation-duration: 2000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
&.dark{
line-height: 58px;
text-align: center;
background-color: #1e2a54;
}
}
@-ms-keyframes spin {
from {-ms-transform: rotate(0deg);}
to {-ms-transform: rotate(360deg);}
}
@-moz-keyframes spin {
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(360deg);}
}
@-webkit-keyframes spin {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
@keyframes spin {
from {transform: rotate(0deg);}
to {transform: rotate(360deg);}
}