Como criar um Spinner Vertical com html

10 de dezembro de 2023 C. Junior

Neste tutorial mostro como criar um Spinner Vertical usando apenas CSS e Html.

Este em um breve tutorial que mostro como construir e estilizar um Spinner Vertical usando html, css e javascript.

Um Spinner Vertical é um componente de interface gráfica que permite aos usuários decrementar e incrementar um valor a um input, possibilitando o usuário realizar a alteração do valor do input tanto escrevendo pelo teclado quanto usando o mouse ao clicar nos botões que acompanham o componente.

Logo abaixo mostro o código usado para implementar o componente. Primeiro vamos criar a estrutura da página e do componente, se quiser pode acompanhar o vídeo acima mostrando o processo de criação do componente :

<!DOCTYPE html>
<html lang="pt-br">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link rel="stylesheet" href="style.css">
<title>Spinner Vertical</title>

</head>

<body>

<div class="container">

<h2 class="title">Spinner Vertical</h2>

<span class="spinner">
<button type="button" 
class="spinner-button spinner-button-up"
onclick="spinnerAddValue();">
<span>+</span>
</button>
<input type="text" class="spinner-input" value="0" >

<button type="button" 
class="spinner-button spinner-button-down"
onclick="spinnerSubtractValue();">
<span>-</span>
</button>
</span>

</div>

<script src="main.js"></script>

</body>

</html>

Em seguida vamos criar o código de estilização da página e de seus componentes, segue abaixo os códigos de estilização usados neste tutorial:

*,
*:after,
*:before {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
text-decoration: none;
}
body {
display: flex;
height: 100vh;
background-color: #dde5ed;
}
.container {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 4rem;
padding: 1rem;
}
.title {
padding: 0.8rem 1rem;
border-radius: 6px;
background: #17193b;
text-align: center;
color: orange;
font-weight: 900;
font-size: 24px;
}
.spinner {
width: 300px;
display: flex;
flex-direction: column;
border-radius: 4px;
background-color: #fff;
box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
0 1px 3px 0 rgba(0, 0, 0, 0.12);
}
.spinner-button {
padding: 1rem;
margin: 0;
color: #fff;
outline: 0 none;
font-size: 2rem;
font-weight: 900;
box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
transition: all 0.1s ease-in-out;
cursor: pointer;
}
.spinner-button-up {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
background: #56a37a;
}
.spinner-button-down {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
background: #d72337;
}
.spinner-button:active {
transform: scale(0.98);
}
.spinner-input {
margin: 0;
padding: 1rem;
color: #495057;
background: #fff;
outline: 0 none;
border: none;
text-align: center;
font-size: 1.8rem;
font-weight: 700;
}

Após a estilização dos componentes da página, vamos criar o código em javascript que será o responsável pela alteração dos valores do spinner, para isso criei 2 funções uma para adição do valor e outra pra decrementar o valor do spinner, em seguida adicionei cada função ao seu respectivo botão, no evento (onclick) dos botões, segue abaixo como ficou o código:

const spinnerValue = document.querySelector(".spinner input");

const spinnerAddValue = () => {
spinnerValue.value = Number(spinnerValue.value) + 1;
};

const spinnerSubtractValue = () => {
spinnerValue.value = Number(spinnerValue.value) - 1;
};

Logo após a implementação das funções de incrementar e decrementar, vamos vincular as funções a seus respectivos botões, no botão com o símbolo (+) adiciono a função (spinnerAddValue) e no botão com o símbolo (-) adiciono a função (spinnerSubtractValue), segue abaixo como ficou o código:

<button type="button" 
class="spinner-button spinner-button-up"
onclick="spinnerAddValue();">
<span>+</span>
</button>

<button type="button" 
class="spinner-button spinner-button-down"
onclick="spinnerSubtractValue();">
<span>-</span>
</button>

Este foi um breve tutorial mostrando como criar um Spinner Vertical com css e html.

Segue abaixo segue os links do vídeo mostrando a construção do componente e o código no github com o projeto criado.

O código criado neste tutorial irá gerar um componente igual ao da figura abaixo:

Vídeo Tutorial:

https://youtu.be/L3iHrd2v94g

Código fonte do tutorial:

Código Fonte

UrutauDev

Como criar um Spinner Vertical com html

Neste tutorial mostro como criar um Spinner Vertical usando apenas CSS e Html.

Este em um breve tutorial que mostro como construir e estilizar um Spinner Vertical usando html, css e javascript.

Logo abaixo mostro o código usado para implementar o componente. Primeiro vamos criar a estrutura da página e do componente, se quiser pode acompanhar o vídeo acima mostrando o processo de criação do componente :

Em seguida vamos criar o código de estilização da página e de seus componentes, segue abaixo os códigos de estilização usados neste tutorial:

Este foi um breve tutorial mostrando como criar um Spinner Vertical com css e html.

Segue abaixo segue os links do vídeo mostrando a construção do componente e o código no github com o projeto criado.

O código criado neste tutorial irá gerar um componente igual ao da figura abaixo:

Vídeo Tutorial:

Código fonte do tutorial:

Deixe um comentário Cancelar resposta

Neste tutorial mostro como criar um Spinner Vertical usando apenas CSS e Html.

Este em um breve tutorial que mostro como construir e estilizar um Spinner Vertical usando html, css e javascript.

Logo abaixo mostro o código usado para implementar o componente. Primeiro vamos criar a estrutura da página e do componente, se quiser pode acompanhar o vídeo acima mostrando o processo de criação do componente :

Em seguida vamos criar o código de estilização da página e de seus componentes, segue abaixo os códigos de estilização usados neste tutorial:

Este foi um breve tutorial mostrando como criar um Spinner Vertical com css e html.

Segue abaixo segue os links do vídeo mostrando a construção do componente e o código no github com o projeto criado.

O código criado neste tutorial irá gerar um componente igual ao da figura abaixo:

Vídeo Tutorial:

Código fonte do tutorial:

Você pode gostar também

Como criar Gráfico Gauge

Criando speedDial usando css

Como criar Chronoline usando css

Deixe um comentário Cancelar resposta