viernes, 7 de abril de 2023

Como crear un loader spinner en html y css

 Un loader spinner bonito e innovador que puedes usar en tus proyectos.


HTML: 

<!DOCTYPE html>

<html lang="en">

<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">

    <title>Spinner</title>

    <link rel="stylesheet" href="index.css">

</head>

<body>

    <div class="loader">

        <span></span>

        <span></span>

        <span></span>

        <span></span>

    </div>    

</body>

</html>


CSS:

body{

    margin: 0;

    padding: 0;

    display: flex;

    justify-content: center;

    align-items: center;

    height: 100vh;

    background: #240229;

}


.loader{

    position: relative;

    width: 100px;

    height: 100px;

    border-radius: 50%;

    background: linear-gradient(#14ffe9,#ffeb3b,#ff00e0);

    animation: animate 0.75s linear infinite;

}


.loader span{

    position: absolute;

    width: 100%;

    height: 100%;

    border-radius: 50%;

    background: linear-gradient(#14ffe9,#ffeb3b,#ff00e0);

}


.loader span:nth-child(1){

    filter: blur(5px);

}

.loader span:nth-child(2){

    filter: blur(10px);

}

.loader span:nth-child(3){

    filter: blur(25px);

}

.loader span:nth-child(4){

    filter: blur(50px);

}


.loader::after{

    content: "";

    position: absolute;

    top: 10px;

    left: 10px;

    right: 10px;

    bottom: 10px;

    background: #240229;

    border-radius: 50%;

}


@keyframes animate{

    0%{

        transform: rotate(0deg);

    }

    100%{

        transform: rotate(360deg);

    }

}


Publicadas por a la/s No hay comentarios.:
Etiquetas:

martes, 4 de abril de 2023

Loader innovador usando HTML y CSS

 HTML:

<div class="loader">

  <div class="inner one"></div>

  <div class="inner two"></div>

  <div class="inner three"></div>

</div>


CSS:

.loader {

  position: fixed;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  width: 60px;

  height: 60px;

}

.inner {

  position: absolute;

  top: 50%;

  left: 50%;

  width: 15px;

  height: 15px;

  border-radius: 50%;

  animation-duration: 1s;

  animation-iteration-count: infinite;

  animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1);

}

.one {

  transform: translate(-30px, -30px);

  background-color: #ffa500;

  animation-name: move-one;

}

.two {

  transform: translate(0, -30px);

  background-color: #008000;

  animation-name: move-two;

}

.three {

  transform: translate(30px, -30px);

  background-color: #0000ff;

  animation-name: move-three;

}


@keyframes move-one {

  0% {

    transform: translate(-30px, -30px);

  }

  25% {

    transform: translate(0, -30px);

  }

  50% {

    transform: translate(30px, -30px);

  }

  75% {

    transform: translate(0, -30px);

  }

  100% {

    transform: translate(-30px, -30px);

  }

}


@keyframes move-two {

  0% {

    transform: translate(0, -30px);

  }

  25% {

    transform: translate(30px, -30px);

  }

  50% {

    transform: translate(-30px, -30px);

  }

  75% {

    transform: translate(30px, -30px);

  }

  100% {

    transform: translate(0, -30px);

  }

}


@keyframes move-three {

  0% {

    transform: translate(30px, -30px);

  }

  25% {

    transform: translate(-30px, -30px);

  }

  50% {

    transform: translate(0, -30px);

  }

  75% {

    transform: translate(-30px, -30px);

  }

  100% {

    transform: translate(30px, -30px);

  }

}


En este ejemplo, hemos creado un loader con tres puntos que se mueven en diferentes direcciones para crear un efecto de carga animado. La animación se realiza mediante el uso de la propiedad animation de CSS y la función cubic-bezier para crear una curva de aceleración personalizada.

Puedes personalizar los colores y los movimientos de los puntos según tus necesidades y preferencias. Además, puedes ajustar el tamaño del loader cambiando los valores de width y height en la clase .loader.

Espero que este ejemplo te sea útil para crear tu propio loader innovador en HTML y CSS para tu página web.



Publicadas por a la/s No hay comentarios.:
Etiquetas:

domingo, 2 de abril de 2023

Agregar un objeto a un formData y usarlo en una petición en JavaScript

Para agregar un objeto a un FormData en JavaScript, puedes utilizar el método append() del objeto FormData. Este método toma dos argumentos: el nombre de la clave para el objeto y el objeto en sí. Aquí hay un ejemplo:

const formData = new FormData();

const myObject = { name: 'John', age: 30 };

formData.append('myObject', JSON.stringify(myObject));


En este ejemplo, estamos creando un nuevo objeto FormData y luego creando un objeto myObject con dos propiedades: name y age. Luego, utilizamos el método JSON.stringify() para convertir el objeto en una cadena de texto JSON antes de agregarlo al FormData utilizando el método append().

Para usar este FormData en una petición, puedes utilizar la API Fetch de JavaScript para enviar los datos al servidor. Aquí hay un ejemplo:

const formData = new FormData();

const myObject = { name: 'John', age: 30 };

formData.append('myObject', JSON.stringify(myObject));


fetch('/url-de-la-peticion', {

  method: 'POST',

  body: formData

})

  .then(response => response.json())

  .then(data => console.log(data))

  .catch(error => console.error(error));


En este ejemplo, estamos utilizando la función fetch() para enviar una petición POST al servidor con los datos del FormData adjuntos en el cuerpo de la petición. Luego, utilizamos los métodos .then() y .catch() para manejar la respuesta del servidor. En este caso, estamos asumiendo que el servidor responderá con un objeto JSON que luego estamos imprimiendo en la consola.



Publicadas por a la/s No hay comentarios.:
Etiquetas:

Enviar un elemento de un arreglo al final en JavaScript

Para enviar un elemento de un arreglo al final en JavaScript, puedes utilizar el método push() para agregar el elemento al final del arreglo, y el método splice() para eliminar el elemento del arreglo en su posición actual.

Por ejemplo, si queremos mover el elemento en la posición i al final del arreglo 'arr', podemos hacer lo siguiente:


let element = arr[i]; // Guardamos el elemento que queremos mover en una variable

arr.splice(i, 1); // Eliminamos el elemento de la posición i del arreglo

arr.push(element); // Agregamos el elemento al final del arreglo


En este código, 'i' es la posición del elemento que queremos mover, y '1' es el número de elementos que queremos eliminar del arreglo (en este caso, solo eliminamos el elemento en la posición 'i').

Después de ejecutar este código, el elemento en la posición 'i' habrá sido eliminado del arreglo 'arr' y agregado al final del mismo.

Publicadas por a la/s No hay comentarios.:
Etiquetas:

sábado, 1 de abril de 2023

Ordenar un arreglo de objetos por una propiedad definida

Para ordenar un arreglo de objetos por una variable definida en JavaScript, puedes utilizar la función sort(), que ordena los elementos de un arreglo y devuelve el arreglo ordenado.

La función sort() acepta un argumento opcional que es una función de comparación, que define el criterio de ordenamiento. La función de comparación toma dos argumentos, que son los elementos que se están comparando, y devuelve un valor negativo, cero o positivo, dependiendo de si el primer elemento es menor, igual o mayor que el segundo elemento, respectivamente.

Para ordenar el arreglo de objetos por una variable definida, debes definir una función de comparación que compare los valores de la variable en cada objeto. Por ejemplo, si tienes un arreglo de objetos con la siguiente estructura:

var objetos = [

  { nombre: "Juan", edad: 30 },

  { nombre: "Pedro", edad: 25 },

  { nombre: "María", edad: 35 }

];


Para ordenar el arreglo por la variable "edad", puedes definir una función de comparación de la siguiente manera:

function compararPorEdad(a, b) {
  return a.edad - b.edad;
}

Luego, puedes llamar a la función sort() en el arreglo y pasar la función de comparación como argumento:

objetos.sort(compararPorEdad);

Esto ordenará el arreglo de objetos por la variable "edad", de menor a mayor. Si deseas ordenarlo de mayor a menor, puedes simplemente invertir el orden de los elementos en la función de comparación:

function compararPorEdad(a, b) {
  return b.edad - a.edad;
}

objetos.sort(compararPorEdad);


Ahora el arreglo estará ordenado de mayor a menor por la variable "edad".

Publicadas por a la/s No hay comentarios.:
Etiquetas:
Suscribirse a: Entradas (Atom)