Questão FC373555
No desenvolvimento de sites muitas vezes é necessário criar botões como mostrados na figura abaixo, indicando algum procedimento de carregamento no site, em que a imagem de um pequ
Desenvolvimento Web
FCC · 2019
No desenvolvimento de sites muitas vezes é necessário criar botões como mostrados na figura abaixo, indicando algum procedimento de carregamento no site, em que a imagem de um pequeno círculo fica girando no interior do botão.
Usando Bootstrap 4, em condições ideais, este botão pode ser criado por meio do bloco de código abaixo.
<button class="btn btn-primary">
..I..
Carregando..
</button>
O código ficará correto se a indicação I for substituída pela instrução:
- <spinner class="loading-circle"></spinner>
- <span class="spinner-circle"></span>
- <label class="shape-loading"></label>
- <span class="spinner-border spinner-border-sm"></span>
- <label class="spinner-loader"></label>
Mostrar resposta e comentário
Gabarito
D
Comentário do professor
<span class="spinner-border spinner-border-sm"></span> é o componente de spinner do Bootstrap 4 usado para indicar carregamento dentro de elementos como botões. Ele renderiza um pequeno círculo giratório criado por estilos CSS (borda + animação).
A classe .spinner-border gera o spinner; a classe .spinner-border-sm reduz seu tamanho para encaixar em botões compactos. A tag <span> é adequada porque é inline e pode ficar vazia — o estilo faz a animação.
No botão, posicione o spinner antes do texto: <button class="btn btn-primary"><span class="spinner-border spinner-border-sm"></span> Carregando...</button>.
Para acessibilidade, acrescente role="status" e um texto oculto, por exemplo <span class="sr-only">Carregando...</span>, garantindo que leitores de tela informem a ação.
Conteúdo do catálogo FC Concursos · Atualizado em