Thadée Cisowski

1644911640

Comment frapper 10 000 NFT avec Moralis

Voulez-vous frapper des milliers de NFT ? Si oui, cette procédure pas à pas est pour vous ! Apprenez à frapper facilement 10 000 NFT avec Moralis en quelques minutes seulement !

Dans cet article, nous allons décomposer le processus de création de 10 000 NFT. Pour rendre le didacticiel plus accessible, nous utiliserons un modèle Moralis déjà préparé pour un moteur de frappe NFT. Donc, si vous préférez ignorer le didacticiel et regarder immédiatement de plus près le référentiel GitHub, consultez le lien suivant : 

Documentation complète du moteur NFT - https://morioh.com/p/50f79d2c67aa 

Les NFT (jetons non fongibles) font partie des fonctionnalités les plus intéressantes du développement Web3 , et de nouvelles idées innovantes ont été générées à la suite de l'utilisation de ces jetons. L'une des tendances les plus en vogue dans le monde de la cryptographie est celle des objets de collection numériques. Ce sont des NFT générés en masse pour créer des collections composées de milliers de jetons. Les deux exemples les plus marquants sont Bored Ape Yacht Club et CryptoPunks . Ces collections contiennent environ 10 000 NFT entièrement uniques, dont certains se vendent pour des montants astronomiques. En raison de l'incroyable succès de ce secteur, nous allons examiner de plus près comment frapper 10 000 NFT et créer votre propre série de jetons avec Moralis .

Dans le didacticiel suivant, nous utiliserons le système d'exploitation Moralis pour créer une collection de NFT. En tant qu'utilisateurs de Moralis, nous pouvons puiser dans l'infrastructure backend de la plateforme et créer notre propre collection en un rien de temps ! 

De plus, en plus de l'infrastructure backend déjà développée de Moralis, la plate-forme fournit également des outils de développement précieux tels que Moralis Speedy Nodes , un support natif pour IPFS , l' API NFT , l'API Price et bien plus encore. 

Donc, si vous cherchez à devenir développeur blockchain, la prochaine étape de votre parcours consiste à vous inscrire auprès de Moralis. Rejoindre la plateforme vous permettra de réduire considérablement le temps de développement de tous vos futurs projets blockchain !

Comment frapper 10 000 NFT en 3 étapes

Dans ce didacticiel, nous décomposerons le processus de création d'une collection de 10 000 NFT. Donc, si vous ne l'avez pas déjà fait, nous vous recommandons de vous familiariser avec les NFT avant de continuer. Vous pouvez obtenir une ventilation complète de ces jetons à partir de l'article suivant : « Qu'est-ce que les NFT ? ”. Cependant, si vous vous sentez à l'aise avec vos connaissances NFT, suivez-nous pendant que nous vous guidons tout au long du processus ! 

Pour rendre ce tutoriel plus compréhensible, nous allons décomposer le processus en trois étapes : 

  1. Création de calques artistiques
  2. Générer de l'art
  3. Frappe 10 000 NFT

Nous utiliserons un modèle Moralis déjà préparé avec un moteur de génération NFT déjà développé pour économiser du temps et des ressources. Alors, sans plus tarder, entrons directement dans le processus et commençons par créer des couches artistiques que nous pouvons alimenter directement dans le moteur NFT !

Étape 1 : Comment créer 10 000 NFT - Création de calques artistiques

L'art de ces collections NFT est des pièces générées par ordinateur qui consistent en une combinaison de différentes couches d'art. Selon ce que vous souhaitez pour votre collection, ces couches peuvent varier ; cependant, pour n'en nommer que quelques-uns, il peut s'agir d'arrière-plans, de vêtements, d'yeux, de nez, d'accessoires, etc. Ainsi, la première étape de notre processus consiste à créer ces couches que nous pourrons utiliser plus tard pour générer des œuvres d'art numériques uniques. 

Pour lancer le processus, nous devons d'abord visiter la page GitHub et cloner tous les fichiers dans notre répertoire local. Dans cette étape, nous nous concentrerons sur le fichier « Moralis Mutants.psd », qui contient un modèle sur la façon dont nous devons structurer les couches. En tant que tel, vous pouvez continuer en ouvrant le fichier dans votre logiciel d'édition préféré. Dans notre cas, nous utiliserons Photoshop.

Le fichier contient déjà quelques calques tels que les accessoires, les yeux, les bras, etc. Cependant, nous ne sommes pas vraiment intéressés par les calques existants ; nous voulons la structure des fichiers. En effet, les couches doivent dépendre entièrement de votre vision du produit final. En tant que tel, il est crucial que vous ayez une image claire dans votre esprit et un thème final pour les NFT avant de concevoir les couches. 

De plus, lors de la création des calques, vous devez garder à l'esprit le nombre de NFT uniques que vous souhaitez prendre en compte. Par exemple, si vous visez à produire 10 000 œuvres d'art, vous aurez besoin d'un nombre beaucoup plus important de calques uniques que si vous vous contentiez d'en créer dix.  

Exportation des fichiers

Une fois que vous avez conçu toutes vos couches, la prochaine partie de cette étape initiale consiste à exporter chaque couche dans des fichiers séparés. Nous avons besoin de toutes les couches séparées et dans des fichiers individuels, car cela permettra à notre moteur de les combiner et de générer des œuvres d'art uniques. 

L'exportation des fichiers est relativement simple, et si vous travaillez également avec Photoshop, il vous suffit de cliquer sur le bouton "Fichiers" en haut de l'interface. Ensuite, accédez à "Exportations" et cliquez sur "Calques vers fichiers".

Cela exportera toutes vos couches individuelles dans des fichiers séparés. Maintenant, tout ce qui reste pour la première étape est de les trier dans des dossiers séparés. Nous allons en avoir un pour chacune des différentes catégories de couches. Ainsi, par exemple, un pour "Nez", un pour "Accessoires", etc.

Les dossiers, à leur tour, doivent également avoir une structure particulière. Chaque dossier doit contenir trois dossiers supplémentaires : « original », « rare » et « super_rare ». Ensuite, c'est à vous de trier chaque couche en fonction de la rareté que vous souhaitez qu'elles soient. 

Étape 2 : Comment frapper 10 000 NFT - Générer de l'art

Dans la deuxième étape, nous allons en fait générer l'art qui, dans la troisième étape, sera utilisé pour frapper 10 000 NFT. Cependant, avant de créer réellement l'art, il y a deux choses que nous devons faire à l'avance. Premièrement, nous devons créer un serveur Moralis. Un serveur fournira tous les outils nécessaires dont nous avons besoin pour créer les œuvres d'art et télécharger les fichiers sur IPFS . Deuxièmement, nous devons également faire quelques configurations au moteur NFT qui générera l'art. 

Comment créer un serveur Moralis

La première chose que vous voulez faire est de vous inscrire auprès de Moralis. C'est entièrement gratuit, et dès que vous vous connectez à votre compte, nous sommes prêts à commencer.

Pour démarrer une instance, vous pouvez cliquer sur le bouton "+ Créer un nouveau serveur" en haut de l'interface Moralis. Appuyez dessus pour ouvrir un menu déroulant avec trois alternatives différentes. Dans ce cas, et puisqu'il s'agit d'un tutoriel, nous choisirons un serveur testnet. Ceci est avantageux car cela nous permet de créer les NFT sans payer de frais de gaz, ce qui nous offrira le luxe de bien faire les choses avant de nous engager dans un réseau principal. 

Une fois le type de serveur souhaité sélectionné, une fenêtre supplémentaire s'ouvrira dans laquelle vous devrez effectuer quelques sélections. Dans notre cas, nous avons choisi le testnet Mumbai de Polygons, et si vous souhaitez suivre, nous vous suggérons de faire de même. 

Avec toutes les informations correctement saisies, il ne reste plus qu'à cliquer sur le bouton "Ajouter une instance" pour lancer le serveur. 

Configurations d'entrée

Maintenant, avec un serveur à notre disposition, nous pouvons passer à quelques configurations du moteur qui générera les œuvres d'art. Tout d'abord, si vous ne l'avez pas déjà fait, vous pouvez cloner le code de GitHub et l'ajouter à votre IDE (environnement de développement intégré). 

Avec une copie locale du code, l'étape suivante consiste à accéder au fichier « config.js », que vous pouvez trouver dans le dossier « input ». Une fois que vous êtes dans ce fichier, vous pouvez faire défiler jusqu'à la partie "BEGIN COLLECTION CONFIG". 

Vous devez examiner chacun de ces éléments et vous assurer qu'ils correspondent à vos besoins de développement. Cependant, les trois parties les plus importantes sur lesquelles nous devons nous concentrer sont de modifier les constantes "baseImageUri", "editionSize" et "layers". 

Le "baseImageUri" doit être égal à l'URL de votre serveur Moralis. Pour trouver ces informations, il vous suffit de cliquer sur le bouton "Afficher les détails" du serveur en question et de copier-coller cela dans le code. De plus, vous souhaitez également modifier la "editionSize". Si vous souhaitez créer 10 000 NFT, cette const doit être définie sur ce montant. 

Couches

Enfin, vous devrez également vous assurer que la const "couches" est correctement structurée. Au départ, voici à quoi ressemblent les "calques": 

couches constantes = [

  addLayer("Arrière-plan", { x : 0, y : 0 }, { largeur : largeur, hauteur : hauteur }),

  addLayer("Base Torse"),

  addLayer ("Base Head"),

  addLayer("Torse"),

  addLayer("Bras"),

  addLayer("Bouches"),

  addLayer("Yeux"),

  addLayer("Accessoires"),

  addLayer("Nez"),

] ;

Les éléments de cette const doivent correspondre aux calques que vous avez créés à la première étape de ce didacticiel. De plus, la couche la plus "en arrière" de vos œuvres d'art doit être en haut de la liste. Comme vous pouvez le voir dans l'exemple ci-dessus, nous commençons avec « Arrière-plan », puis ajoutons d'autres calques en plus de cela. Si le "Contexte" était au bas du code, il couvrirait le reste des couches. 

Configurations du moteur

Une fois les configurations appropriées du fichier "config.js" finalisées, nous pouvons passer aux dernières modifications apportées au moteur NFT. Pour ce faire, vous devrez naviguer jusqu'au fichier « index.js », où se trouve la partie centrale du code. Cette partie compile tout, y compris les couches, et crée des fichiers JSON . Parallèlement à cela, il a également tout téléchargé sur IPFS et votre serveur Moralis. Cependant, nous n'allons pas approfondir le fonctionnement du moteur réel, mais plutôt examiner de plus près les configurations nécessaires dont nous devons nous occuper. 

Nous pouvons continuer et faire défiler jusqu'à la section "// Moralis creds": 

// Moralis creds
const serverUrl = process.env.SERVER_URL;
const appId = process.env.APP_ID;
const masterKey = process.env.MASTER_KEY;
const apiUrl = process.env.API_URL;
// xAPIKey available here: https://deep-index.moralis.io/api-docs/#/storage/uploadFolder
const apiKey = process.env.API_KEY;

Nous devons faire quelques modifications ici. Tout d'abord, vous pouvez ajouter l'URL du serveur, l'ID de l'application et la clé principale. Encore une fois, ces informations peuvent être trouvées en revenant à Moralis et en cliquant sur le bouton "Afficher les détails" pour le serveur en question : 

Enfin, vous devez également ajouter une URL et une clé d'API, et cela peut être récupéré à partir de l'adresse dans le code que nous avons présenté plus tôt dans cette section. 

Génération de l'illustration

Avec toutes les configurations effectuées sur les fichiers "config.js" et "index.js", nous pouvons simplement continuer et commencer à générer les œuvres d'art. C'est relativement simple, et tout ce que vous avez à faire est de saisir ce qui suit dans le terminal : 

node index.js

Une fois que vous avez appuyé sur Entrée, le code s'exécutera et générera le nombre spécifié d'œuvres d'art. Cependant, si vous générez 10 000 œuvres d'art, cela peut prendre un certain temps pour les télécharger sur IPFS. Mais ne vous inquiétez pas ; ils seront finalisés momentanément. Une fois que tout est terminé, nous pouvons passer à la frappe des NFT réels.

Étape 3 : Comment frapper 10 000 NFT - Frapper 10 000 NFT

Avec notre art généré, la troisième et dernière partie de ce didacticiel consiste à créer les NFT réels. Cependant, pour frapper les NFT, nous avons besoin de quelques éléments. La première chose que nous allons faire est de créer un compte MetaMask, de changer de réseau et d'ajouter du MATIC "play" au portefeuille. Alors, commençons par regarder de plus près MetaMask . 

Configuration de MetaMask

Si vous n'en avez pas, la première chose à faire est de créer un compte MetaMask. C'est assez simple, et tout ce que vous avez à faire est de suivre les étapes présentées par l'extension. Une fois que vous avez un compte, l'étape suivante consiste à changer le réseau MetaMask. Dans notre cas, nous voulons passer au testnet de Mumbai car c'est le réseau que nous avons choisi lors de la création du serveur. 

Cependant, Mumbai ne sera pas l'un des réseaux par défaut de MetaMask, ce qui signifie que nous devons l'ajouter à nos portefeuilles. Lorsque vous travaillez avec Moralis, cela devient incroyablement facile. Tout ce que vous avez à faire est de naviguer vers l'onglet "Speedy Nodes" dans le panneau d'administration de Moralis, de cliquer sur le bouton "Endpoints" pour le réseau Polygon, et enfin de cliquer sur le bouton "Add to MetaMask" pour le testnet. Ensuite, il ne reste plus qu'à s'assurer que cela est sélectionné dans MetaMask. 

Ainsi, avec le réseau actuel sélectionné, nous devons également ajouter du MATIC au portefeuille. Puisque nous travaillons avec un testnet, il est possible de le faire via un robinet Polygon . Tout ce que vous avez à faire est de saisir l'adresse de votre portefeuille pour recevoir en retour un "faux" MATIC. Cependant, il est important de noter que ceux-ci ne fonctionnent que pour le testnet et ne sont pas de vrais MATIC. 

Créer un contrat intelligent

Ensuite, nous avons besoin d'un contrat intelligent que nous pouvons utiliser pour frapper les NFT. Dans ce cas, nous utiliserons un contrat déjà développé : « NFTcontract.sol ». Nous allons utiliser Remix pour créer ce contrat car cela rend à la fois la compilation et le déploiement du contrat plus accessibles. Voici à quoi ressemble le contrat complet : 

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

//import 1155 token contract from Openzeppelin
import "https://github.com/OpenZeppelin/openzeppelin-contracts/blob/master/contracts/token/ERC1155/ERC1155.sol";
import "https://github.com/OpenZeppelin/openzeppelin-contracts/blob/master/contracts/utils/math/SafeMath.sol";
import "https://github.com/OpenZeppelin/openzeppelin-contracts/blob/master/contracts/access/Ownable.sol";

// Example contract to be deployed via https://remix.ethereum.org/ for testing purposes.

contract NFTContract is ERC1155, Ownable {
    using SafeMath for uint256;

    constructor()
        ERC1155(
            "ipfs://INSERT_YOUR_CID_METAHASH/metadata/{id}.json" // You can get this saved in dashboard of your Moralis server instance.
        )
    {
        // account, token_id, number
        _mint(msg.sender, 1, 1, "");
        _mint(msg.sender, 2, 1, "");
        _mint(msg.sender, 3, 1, "");
    }

Cependant, avant de compiler et de déployer le contrat, nous devons faire quelques ajustements. Comme vous pouvez le voir, la première chose dont nous avons besoin est le "CID" pour nos fichiers. Vous pouvez trouver ce CID en visitant le tableau de bord de votre serveur Moralis. Pour accéder au tableau de bord, il vous suffit de cliquer sur le bouton "Tableau de bord" du serveur. À partir de là, vous pouvez simplement copier le CID et remplacer "INSERT_YOUR_CID_METAHASH" par le CID. 

Enfin, comme vous pouvez le voir dans le code ci-dessus, cela ne convient que pour frapper trois NFT. En tant que tel, vous devrez créer une boucle qui couvre tous vos fichiers PNG et JSON. Donc, si vous avez 10 000 œuvres d'art uniques, votre boucle doit toutes les inclure. 

Compilation et déploiement

Avec les modifications apportées au contrat intelligent , nous devons le compiler et le déployer. Alors, commençons par compiler le contrat. Nous pouvons facilement compiler le contrat en quelques clics puisque nous travaillons avec Remix. Tout d'abord, naviguons vers l'onglet "Compilateur Solidity" à l'extrême gauche de l'interface Remix. Tout ce que vous avez à faire à partir d'ici est de sélectionner la bonne version de Solidity, le bon contrat et de cliquer sur le bouton "Compiler". 

Une fois le contrat compilé, la prochaine étape consiste à le déployer sur la blockchain. Pour ce faire, cliquez sur l'onglet "Déployer" juste en dessous de "Solidity Compiler". Ensuite, sélectionnez "Injected Web3", le bon contrat, et cliquez sur "Deploy".

Une fois déployé, vous recevrez une adresse de contrat que vous pourrez utiliser pour afficher les NFT sur la version testnet d' OpenSea . 

C'est tout pour ce tutoriel sur la façon de frapper 10 000 NFT ! Cela couvrait comment frapper les NFT sur un testnet; cependant, le processus reste entièrement le même pour un réseau principal. En tant que tel, une fois que vous êtes satisfait de la façon dont les résultats se présentent, vous avez toutes les connaissances nécessaires pour passer au niveau supérieur ! 

Comment frapper 10 000 NFT - Résumé

Dans cet article, nous avons couvert le processus de création de 10 000 NFT en seulement trois étapes simples : 

  1. Création de calques artistiques
  2. Générer de l'art
  3. Frappe 10 000 NFT

Nous avons pu créer des calques, puis utiliser ces calques pour générer des milliers d'œuvres d'art uniques, que nous avons ensuite utilisées pour frapper 10 000 NFT. De plus, nous avons pu le faire facilement en utilisant le système d'exploitation Moralis.

Source de l'article original sur https://moralis.io 

What is GEEK

Buddha Community

samir G

1627843083

Start Your Gaming Action with peerless NFT Game Development Services

NFTs are becoming more popular in the gaming sector as the demand for unique in-game development increases. Professional NFT Game Development Services deliver a thrilling experience with crypto collectibles. As a professional NFT development company, TokyoTechie is the backbone behind various NFT projects. For more details visit us at TokyoTechie - https://bit.ly/3yglPQG

 

#NFT game development services #NFT gaming development solution #NFT Gaming Platform Solutions #NFT game development company

#NFT gaming software development #NFT gaming platform development services

Berta Escamilla

Berta Escamilla

1642484580

Cómo Crear Un Cargador De Solo CSS Usando Un Elemento

Si tiene un sitio web, es útil tener un cargador para que los usuarios puedan saber que algo está sucediendo una vez que hayan hecho clic en un enlace o botón.

Puede usar este componente del cargador en muchos lugares y debería ser lo más simple posible.

En esta publicación, veremos cómo construir dos tipos de cargadores con solo una <div>y unas pocas líneas de código CSS. No solo esto, sino que los haremos personalizables para que pueda crear fácilmente diferentes variaciones del mismo código.

Esto es lo que construiremos:

Spinner y Progress Loader solo para CSS

Spinner y Progress Loader solo para CSS

Cómo crear un cargador giratorio

A continuación se muestra una demostración de lo que estamos construyendo:

https://codepen.io/t_afif/pen/PoJyaNy

 <div class="loader"></div>
 <div class="loader" style="--b: 15px;--c: blue;width: 120px;--n: 8"></div>
 <div class="loader" style="--b: 5px;--c: green;width: 80px;--n: 6;--g: 20deg"></div>
 <div class="loader" style="--b: 20px;--c: #000;width: 80px;--n: 15;--g: 7deg"></div> 

 .loader {
   --b: 10px;  /* border thickness */
   --n: 10;    /* number of dashes*/
   --g: 10deg; /* gap between dashes*/
   --c: red;   /* the color */

   width: 100px; /* size */
   aspect-ratio: 1;
   border-radius: 50%;
   padding: 1px;
   background: conic-gradient(#0000,var(--c)) content-box;
   -webkit-mask:
     repeating-conic-gradient(#0000 0deg,
        #000 1deg calc(360deg/var(--n) - var(--g) - 1deg),
        #0000     calc(360deg/var(--n) - var(--g)) calc(360deg/var(--n))),
     radial-gradient(farthest-side,#0000 calc(98% - var(--b)),#000 calc(100% - var(--b)));
           mask:
     repeating-conic-gradient(#0000 0deg,
        #000 1deg calc(360deg/var(--n) - var(--g) - 1deg),
        #0000     calc(360deg/var(--n) - var(--g)) calc(360deg/var(--n))),
     radial-gradient(farthest-side,#0000 calc(98% - var(--b)),#000 calc(100% - var(--b)));
   -webkit-mask-composite: destination-in;
           mask-composite: intersect;
   animation: load 1s infinite steps(var(--n));
 }
 @keyframes load {to{transform: rotate(1turn)}}

Tenemos 4 cargadores diferentes usando el mismo código. Con solo cambiar algunas variables, podemos generar un nuevo cargador sin necesidad de tocar el código CSS.

Las variables se definen como sigue:

  • --b define el grosor del borde.
  • --n  define el número de guiones.
  • --gdefine el espacio entre guiones. Como estamos tratando con un elemento circular, este es un valor de ángulo.
  • --c define el color.

Aquí hay una ilustración para ver las diferentes variables.

Variables CSS del cargador Spinner

Variables CSS del cargador Spinner

Abordemos el código CSS. Usaremos otra figura para ilustrar una construcción paso a paso del cargador.

Ilustración paso a paso del cargador giratorio

Ilustración paso a paso del cargador giratorio

Primero comenzamos creando un círculo como este:

.loader {
  width: 100px; /* size */
  aspect-ratio: 1;
  border-radius: 50%;
}

Nada complejo hasta ahora. Tenga en cuenta que su uso aspect-rationos permite modificar solo un valor (el width) para controlar el tamaño.

Luego agregamos una coloración de degradado cónico de transparente al color definido (la variable --c):

.loader {
  width:100px; /* size */
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(#0000,var(--c));
}

En este paso, introducimos la maskpropiedad para ocultar algunas partes del círculo de forma repetitiva. Esto dependerá de las variables --ny . --dSi observa detenidamente la figura, notaremos el siguiente patrón:

visible part
invisible part
visible part
invisible part
etc

Para hacer esto, usamos repeating-conic-gradient(#000 0 X, #0000 0 Y). De 0a Xtenemos un color opaco (parte visible) y de Xa Ytenemos uno transparente (parte invisible).

Introducimos nuestras variables:

  • Necesitamos un espacio igual a gentre cada parte visible por lo que la fórmula entre Xy Yserá X = Y - g.
  • Necesitamos nla parte visible, por lo que la fórmula de Ydebería ser Y = 360deg/n. Un círculo completo es 360degasí que simplemente lo dividimos porn

Nuestro código hasta ahora es:

.loader {
  width: 100px; /* size */
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(#0000,var(--c));
  mask: repeating-conic-gradient(#000 0 calc(360deg/var(--n) - var(--g)) , #0000 0 calc(360deg/var(--n))
}

El siguiente paso es el más complicado, porque necesitamos aplicar otra máscara para crear una especie de agujero para obtener la forma final. Para ello usaremos lógicamente a radial-gradient()con nuestra variable b:

radial-gradient(farthest-side,#0000 calc(100% - var(--b)),#000 0)

Un círculo completo del que quitamos un espesor igual a b.

Añadimos esto a la máscara anterior:

.loader {
  width: 100px; /* size */
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(#0000,var(--c));
  mask: 
   radial-gradient(farthest-side,#0000 calc(100% - var(--b)),#000 0),
   repeating-conic-gradient(#000 0 calc(360deg/var(--n) - var(--g)) , #0000 0 calc(360deg/var(--n))
}

Tenemos dos capas de máscara, pero el resultado no es el que queremos. Obtenemos lo siguiente:

Puede parecer extraño pero es lógico. La parte visible "final" no es más que la suma de cada parte visible de cada capa de máscara. Podemos cambiar este comportamiento usando mask-composite. Necesitaría un artículo completo para explicar esta propiedad, así que simplemente daré el valor.

En nuestro caso, debemos considerar intersect(y destination-outpara la propiedad prefijada). Nuestro código se convertirá en:

.loader {
  width: 100px; /* size */
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(#0000,var(--c));
  mask: 
    radial-gradient(farthest-side,#0000 calc(100% - var(--b)),#000 0),
    repeating-conic-gradient(#000 0 calc(360deg/var(--n) - var(--g)) , #0000 0 calc(360deg/var(--n));
  -webkit-mask-composite: destination-in;
          mask-composite: intersect;
}

¡Hemos terminado con la forma! Solo nos falta la animación. Esta última es una rotación infinita.

Lo único a tener en cuenta es que estoy usando una stepsanimación para crear la ilusión de guiones fijos y colores en movimiento.

Aquí hay una ilustración para ver la diferencia.

Una animación lineal frente a una animación de pasos

La primera es una rotación lineal y continua de la forma (no la que queremos) y la segunda es una animación discreta (la que queremos).

Aquí está el código completo, incluida la animación:

 <div class="loader"></div>
 <div class="loader" style="--b: 15px;--c: blue;width: 120px;--n: 8"></div>
 <div class="loader" style="--b: 5px;--c: green;width: 80px;--n: 6;--g: 20deg"></div>
 <div class="loader" style="--b: 20px;--c: #000;width: 80px;--n: 15;--g: 7deg"></div> 

 .loader {
   --b: 10px;  /* border thickness */
   --n: 10;    /* number of dashes*/
   --g: 10deg; /* gap between dashes*/
   --c: red;   /* the color */

   width: 100px; /* size */
   aspect-ratio: 1;
   border-radius: 50%;
   padding: 1px;
   background: conic-gradient(#0000,var(--c)) content-box;
   -webkit-mask:
     repeating-conic-gradient(#0000 0deg,
        #000 1deg calc(360deg/var(--n) - var(--g) - 1deg),
        #0000     calc(360deg/var(--n) - var(--g)) calc(360deg/var(--n))),
     radial-gradient(farthest-side,#0000 calc(98% - var(--b)),#000 calc(100% - var(--b)));
           mask:
     repeating-conic-gradient(#0000 0deg,
        #000 1deg calc(360deg/var(--n) - var(--g) - 1deg),
        #0000     calc(360deg/var(--n) - var(--g)) calc(360deg/var(--n))),
     radial-gradient(farthest-side,#0000 calc(98% - var(--b)),#000 calc(100% - var(--b)));
   -webkit-mask-composite: destination-in;
           mask-composite: intersect;
   animation: load 1s infinite steps(var(--n));
 }
 @keyframes load {to{transform: rotate(1turn)}}

Notarás algunas diferencias con el código que usé en la explicación:

  • Estoy agregando padding: 1pxy configurando el fondo paracontent-box
  • Hay +/1degentre los colores de larepeating-conic-gradient()
  • Hay algunos porcentajes de diferencia entre el color dentro del radial-gradient()

Esas son algunas correcciones para evitar fallas visuales. Se sabe que los degradados producen resultados "extraños" en algunos casos, por lo que debemos ajustar algunos valores manualmente para evitarlos.

Cómo crear un cargador de progreso

Al igual que el cargador anterior, comencemos con una descripción general:

https://codepen.io/t_afif/pen/bGoNddg

 <div class="loader"></div>
 <div class="loader" style="--s:10px;--n:10;color:red"></div>
 <div class="loader" style="--g:0px;color:darkblue"></div>
 <div class="loader" style="--s:25px;--g:8px;border-radius:50px;color:green"></div>

 .loader {
   --n:5;    /* control the number of stripes */
   --s:30px; /* control the width of stripes */
   --g:5px;  /* control the gap between stripes */

   width:calc(var(--n)*(var(--s) + var(--g)) - var(--g));
   height:30px;
   padding:var(--g);
   margin:5px auto;
   border:1px solid;
   background:
     repeating-linear-gradient(90deg,
       currentColor  0 var(--s),
       #0000 0 calc(var(--s) + var(--g))
     ) left / calc((var(--n) + 1)*(var(--s) + var(--g))) 100% 
     no-repeat content-box;
   animation: load 1.5s steps(calc(var(--n) + 1)) infinite;
 }
 @keyframes load {
   0% {background-size: 0% 100%}
 }

Tenemos la misma configuración que el cargador anterior. Variables CSS que controlan el cargador:

  • --n define el número de guiones/rayas.
  • --s define el ancho de cada franja.
  • --g define el espacio entre las rayas.

Ilustración de las variables CSS

Ilustración de las variables CSS

De la figura anterior podemos ver que el ancho del elemento dependerá de las 3 variables. El CSS será el siguiente:

.loader {
  width: calc(var(--n)*(var(--s) + var(--g)) - var(--g));
  height: 30px; /* use any value you want here */
  padding: var(--g);
  border: 1px solid;
}

Usamos paddingpara establecer el espacio en cada lado. Entonces el ancho será igual al número de rayas multiplicado por su ancho y el espacio. Eliminamos un espacio porque para Nlas rayas tenemos N-1espacios.

Para crear las rayas usaremos el siguiente degradado.

repeating-linear-gradient(90deg,
  currentColor 0 var(--s),
  #0000        0 calc(var(--s) + var(--g))
 )

De 0a ses el color definido y de sa s + gun color transparente (la brecha).

Estoy usando currentColorcuál es el valor de la colorpropiedad. Tenga en cuenta que no definí ningún color dentro border, por lo que también se usará para el valor de color. Si queremos cambiar el color del cargador, solo necesitamos establecer la colorpropiedad.

Nuestro código hasta ahora:

.loader {
  width: calc(var(--n)*(var(--s) + var(--g)) - var(--g));
  height: 30px;
  padding: var(--g);
  border: 1px solid;
  background:
    repeating-linear-gradient(90deg,
      currentColor  0 var(--s),
      #0000 0 calc(var(--s) + var(--g))
    ) left / 100% 100% content-box no-repeat;
}

Estoy usando content-boxpara asegurarme de que el degradado no cubra el área de relleno. Luego defino un tamaño igual a 100% 100%y una posición izquierda.

Es hora de la animación. Para este cargador, animaremos el background-sizede 0% 100%a 100% 100%lo que significa el ancho de nuestro degradado de 0%  a100%

Al igual que el cargador anterior, confiaremos en steps()tener una animación discreta en lugar de una continua.

Una animación lineal frente a una animación de pasos

El segundo es el que queremos crear, y lo podemos lograr agregando el siguiente código:

.loader {
  animation: load 1.5s steps(var(--n)) infinite;
}
@keyframes load {
  0% {background-size: 0% 100%}
}

Si observa detenidamente la última figura, notará que la animación no está completa. Nos falta una raya al final, incluso si hemos usado N. Esto no es un error, sino cómo steps()se supone que funciona.

Para superar esto, necesitamos agregar un paso adicional. Aumentamos el background-sizede nuestro degradado para contener N+1rayas y usar steps(N+1). Esto nos llevará al código final:

.loader {
  width: calc(var(--n)*(var(--s) + var(--g)) - var(--g));
  height: 30px;
  padding: var(--g);
  margin: 5px auto;
  border: 1px solid;
  background:
    repeating-linear-gradient(90deg,
      currentColor  0 var(--s),
      #0000 0 calc(var(--s) + var(--g))
    ) left / calc((var(--n) + 1)*(var(--s) + var(--g))) 100% 
    content-box no-repeat;
  animation: load 1.5s steps(calc(var(--n) + 1)) infinite;
}
@keyframes load {
  0% {background-size: 0% 100%}
}

Tenga en cuenta que el ancho del degradado es igual a N+1multiplicado por el ancho de una franja y un espacio (en lugar de ser 100%)

Conclusión

Espero que disfrutes este tutorial. Si está interesado, he creado más de 500 cargadores div únicos solo para CSS . También escribí otro tutorial para explicar cómo crear el cargador de puntos usando solo propiedades de fondo .

Encuentre a continuación enlaces útiles para obtener más detalles sobre algunas propiedades que he usado y que no expliqué a fondo debido a su complejidad:

¡Gracias por leer!

Enlace: https://www.freecodecamp.org/news/how-to-create-a-css-only-loader/

#css 

Adeline McKenzie

Adeline McKenzie

1643336880

How to Create a CSS-Only Loader Using One Element

If you have a website, it's helpful to have a loader so users can tell something is happening once they've clicked a link or button.

You can use this loader component in a lot of places, and it should be as simple as possible.

In this post, we will see how to build two types of loaders with only one <div> and a few lines of CSS code. Not only this but we will make them customizable so you can easily create different variations from the same code.

Here's what we'll build:

CSS-only Spinner and Progress Loader

CSS-only Spinner and Progress Loader

How to Create a Spinner Loader

Below is a demo of what we are building:

https://codepen.io/t_afif/pen/PoJyaNy

 <div class="loader"></div>
 <div class="loader" style="--b: 15px;--c: blue;width: 120px;--n: 8"></div>
 <div class="loader" style="--b: 5px;--c: green;width: 80px;--n: 6;--g: 20deg"></div>
 <div class="loader" style="--b: 20px;--c: #000;width: 80px;--n: 15;--g: 7deg"></div> 

 .loader {
   --b: 10px;  /* border thickness */
   --n: 10;    /* number of dashes*/
   --g: 10deg; /* gap between dashes*/
   --c: red;   /* the color */

   width: 100px; /* size */
   aspect-ratio: 1;
   border-radius: 50%;
   padding: 1px;
   background: conic-gradient(#0000,var(--c)) content-box;
   -webkit-mask:
     repeating-conic-gradient(#0000 0deg,
        #000 1deg calc(360deg/var(--n) - var(--g) - 1deg),
        #0000     calc(360deg/var(--n) - var(--g)) calc(360deg/var(--n))),
     radial-gradient(farthest-side,#0000 calc(98% - var(--b)),#000 calc(100% - var(--b)));
           mask:
     repeating-conic-gradient(#0000 0deg,
        #000 1deg calc(360deg/var(--n) - var(--g) - 1deg),
        #0000     calc(360deg/var(--n) - var(--g)) calc(360deg/var(--n))),
     radial-gradient(farthest-side,#0000 calc(98% - var(--b)),#000 calc(100% - var(--b)));
   -webkit-mask-composite: destination-in;
           mask-composite: intersect;
   animation: load 1s infinite steps(var(--n));
 }
 @keyframes load {to{transform: rotate(1turn)}}

We have 4 different loaders using the same code. By only changing a few variables, we can generate a new loader without needing to touch the CSS code.

The variables are defined like below:

  • --b defines the border thickness.
  • --n  defines the number of dashes.
  • --g defines the gap between dashes. Since we're dealing with a circular element, this one is an angle value.
  • --c defines the color.

Here is an illustration to see the different variables.

CSS Variables of the Spinner loader

CSS Variables of the Spinner loader

Let's tackle the CSS code. We will use another figure to illustrate a step-by-step construction of the loader.

Step-by-Step illustration of the Spinner Loader

Step-by-Step illustration of the Spinner Loader

We first start by creating a circle like this:

.loader {
  width: 100px; /* size */
  aspect-ratio: 1;
  border-radius: 50%;
}

Nothing complex so far. Note the use of aspect-ratio which allows us to only modify one value (the width) in order to control the size.

Then we add a conic gradient coloration from transparent to the defined color (the variable --c):

.loader {
  width:100px; /* size */
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(#0000,var(--c));
}

In this step, we introduce the mask property to hide some parts of the circle in a repetitive manner. This will depend on the --n and --d variables. If you look closely at the figure, we will notice the following pattern:

visible part
invisible part
visible part
invisible part
etc

To do this, we use repeating-conic-gradient(#000 0 X, #0000 0 Y). From 0 to X we have an opaque color (visible part) and from X to Y we have a transparent one (invisible part).

We introduce our variables:

  • We need a gap equal to g between each visible part so the formula between X and Y will be X = Y - g.
  • We need n visible part so the formula of Y should be Y = 360deg/n. A full circle is 360deg so we simply divide it by n

Our code so far is:

.loader {
  width: 100px; /* size */
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(#0000,var(--c));
  mask: repeating-conic-gradient(#000 0 calc(360deg/var(--n) - var(--g)) , #0000 0 calc(360deg/var(--n))
}

This next step is the trickiest one, because we need to apply another mask to create a kind of hole in order to get the final shape. To do this we will logically use a radial-gradient() with our variable b:

radial-gradient(farthest-side,#0000 calc(100% - var(--b)),#000 0)

A full circle from where we remove a thickness equal to b.

We add this to the previous mask:

.loader {
  width: 100px; /* size */
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(#0000,var(--c));
  mask: 
   radial-gradient(farthest-side,#0000 calc(100% - var(--b)),#000 0),
   repeating-conic-gradient(#000 0 calc(360deg/var(--n) - var(--g)) , #0000 0 calc(360deg/var(--n))
}

We have two mask layers, but the result is not what we want. We get the following:

It may look strange but it's logical. The "final" visible part is nothing but the sum of each visible part of each mask layer. We can change this behavior using mask-composite. I would need a whole article to explain this property so I will simply give the value.

In our case, we need to consider intersect (and destination-out for the prefixed property). Our code will become:

.loader {
  width: 100px; /* size */
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(#0000,var(--c));
  mask: 
    radial-gradient(farthest-side,#0000 calc(100% - var(--b)),#000 0),
    repeating-conic-gradient(#000 0 calc(360deg/var(--n) - var(--g)) , #0000 0 calc(360deg/var(--n));
  -webkit-mask-composite: destination-in;
          mask-composite: intersect;
}

We are done with the shape! We are only missing the animation. The latter is an infinite rotation.

The only thing to note is that I am using a steps animation to create the illusion of fixed dashes and moving colors.

Here is an illustration to see the difference

A Linear Animation vs a Steps Animation

The first one is a linear and continuous rotation of the shape (not what we want) and the second one is a discrete animation (the one we want).

Here is the full code including the animation:

 <div class="loader"></div>
 <div class="loader" style="--b: 15px;--c: blue;width: 120px;--n: 8"></div>
 <div class="loader" style="--b: 5px;--c: green;width: 80px;--n: 6;--g: 20deg"></div>
 <div class="loader" style="--b: 20px;--c: #000;width: 80px;--n: 15;--g: 7deg"></div> 

 .loader {
   --b: 10px;  /* border thickness */
   --n: 10;    /* number of dashes*/
   --g: 10deg; /* gap between dashes*/
   --c: red;   /* the color */

   width: 100px; /* size */
   aspect-ratio: 1;
   border-radius: 50%;
   padding: 1px;
   background: conic-gradient(#0000,var(--c)) content-box;
   -webkit-mask:
     repeating-conic-gradient(#0000 0deg,
        #000 1deg calc(360deg/var(--n) - var(--g) - 1deg),
        #0000     calc(360deg/var(--n) - var(--g)) calc(360deg/var(--n))),
     radial-gradient(farthest-side,#0000 calc(98% - var(--b)),#000 calc(100% - var(--b)));
           mask:
     repeating-conic-gradient(#0000 0deg,
        #000 1deg calc(360deg/var(--n) - var(--g) - 1deg),
        #0000     calc(360deg/var(--n) - var(--g)) calc(360deg/var(--n))),
     radial-gradient(farthest-side,#0000 calc(98% - var(--b)),#000 calc(100% - var(--b)));
   -webkit-mask-composite: destination-in;
           mask-composite: intersect;
   animation: load 1s infinite steps(var(--n));
 }
 @keyframes load {to{transform: rotate(1turn)}}

You will notice a few differences with the code I used in the explanation:

  • I am adding padding: 1px and setting the background to content-box
  • There is +/1deg between the colors of the repeating-conic-gradient()
  • There are a few percentages of difference between the color inside the radial-gradient()

Those are some corrections to avoid visual glitches. Gradients are known to produce "strange" results in some cases so we have to adjust some values manually to avoid them.

How to Create a Progress Loader

Like the previous one loader, let's start with an overview:

https://codepen.io/t_afif/pen/bGoNddg

 <div class="loader"></div>
 <div class="loader" style="--s:10px;--n:10;color:red"></div>
 <div class="loader" style="--g:0px;color:darkblue"></div>
 <div class="loader" style="--s:25px;--g:8px;border-radius:50px;color:green"></div>

 .loader {
   --n:5;    /* control the number of stripes */
   --s:30px; /* control the width of stripes */
   --g:5px;  /* control the gap between stripes */

   width:calc(var(--n)*(var(--s) + var(--g)) - var(--g));
   height:30px;
   padding:var(--g);
   margin:5px auto;
   border:1px solid;
   background:
     repeating-linear-gradient(90deg,
       currentColor  0 var(--s),
       #0000 0 calc(var(--s) + var(--g))
     ) left / calc((var(--n) + 1)*(var(--s) + var(--g))) 100% 
     no-repeat content-box;
   animation: load 1.5s steps(calc(var(--n) + 1)) infinite;
 }
 @keyframes load {
   0% {background-size: 0% 100%}
 }

We have the same configuration as the previous loader. CSS variables that control the loader:

  • --n defines the number of dashes/stripes.
  • --s defines the width of each stripe.
  • --g defines the gap between stripes.

Illustration of the CSS Variables

Illustration of the CSS Variables

From the above figure we can see that the width of the element will depend on the 3 variables. The CSS will be as follows:

.loader {
  width: calc(var(--n)*(var(--s) + var(--g)) - var(--g));
  height: 30px; /* use any value you want here */
  padding: var(--g);
  border: 1px solid;
}

We use padding to set the gap on each side. Then the width will be equal to the number of stripes multiplied by their width and the gap. We remove one gap because for N stripes we have N-1 gaps.

To create the stripes we will use the below gradient.

repeating-linear-gradient(90deg,
  currentColor 0 var(--s),
  #0000        0 calc(var(--s) + var(--g))
 )

From 0 to s is the defined color and from s to s + g a transparent color (the gap).

I am using currentColor which is the value of the color property. Note that I didn't define any color inside border so it will also use to the value of color. If we want to change the color of the loader, we only need to set the color property.

Our code so far:

.loader {
  width: calc(var(--n)*(var(--s) + var(--g)) - var(--g));
  height: 30px;
  padding: var(--g);
  border: 1px solid;
  background:
    repeating-linear-gradient(90deg,
      currentColor  0 var(--s),
      #0000 0 calc(var(--s) + var(--g))
    ) left / 100% 100% content-box no-repeat;
}

I am using content-box to make sure the gradient doesn't cover the padding area. Then I define a size equal to 100% 100% and a left position.

It's time for the animation. For this loader, we will animate the background-size from 0% 100% to 100% 100% which means the width of our gradient from 0%  to 100%

Like the previous loader, we will rely on steps() to have a discrete animation instead of a continuous one.

A Linear Animation vs a Steps Animation

The second one is what we want to create, and we can achieve it by adding the following code:

.loader {
  animation: load 1.5s steps(var(--n)) infinite;
}
@keyframes load {
  0% {background-size: 0% 100%}
}

If you look closely at the last figure, you will notice that the animation is not complete. We are missing one stripe at the end, even if we have used N. This is not a bug but how steps() is supposed to work.

To overcome this, we need to add an extra step. We increase the background-size of our gradient to contain N+1 stripes and use steps(N+1). This will get us to the final code:

.loader {
  width: calc(var(--n)*(var(--s) + var(--g)) - var(--g));
  height: 30px;
  padding: var(--g);
  margin: 5px auto;
  border: 1px solid;
  background:
    repeating-linear-gradient(90deg,
      currentColor  0 var(--s),
      #0000 0 calc(var(--s) + var(--g))
    ) left / calc((var(--n) + 1)*(var(--s) + var(--g))) 100% 
    content-box no-repeat;
  animation: load 1.5s steps(calc(var(--n) + 1)) infinite;
}
@keyframes load {
  0% {background-size: 0% 100%}
}

Note that the width of the gradient is equal to N+1 multiplied by the width of one stripe and a gap (instead of being 100% )

Conclusion

I hope you enjoyed this tutorial. If you are interested, I have made more than 500 CSS-only single div loaders. I also wrote another tutorial to explain how to create the Dots loader using only background properties.

Find below useful links to get more detail about some properties I have used that I didn't explain thoroughly due to their complexity:

Thank you for reading!

Link: https://www.freecodecamp.org/news/how-to-create-a-css-only-loader/

#css 

山本 洋介

山本 洋介

1642923600

1つの要素を使用してCSSのみのローダーを作成する

Webサイトがある場合は、ローダーを使用すると、ユーザーがリンクまたはボタンをクリックすると何かが起こっていることを知ることができるので便利です。

このローダーコンポーネントは多くの場所で使用でき、可能な限りシンプルにする必要があります。

<div>この投稿では、1行と数行のCSSコードで2種類のローダーを構築する方法を説明します。これだけでなく、同じコードからさまざまなバリエーションを簡単に作成できるようにカスタマイズできるようにします。

これが私たちが構築するものです：

CSSのみのスピナーとプログレスローダー

CSSのみのスピナーとプログレスローダー

スピナーローダーを作成する方法

以下は、私たちが構築しているもののデモです。

https://codepen.io/t_afif/pen/PoJyaNy

 <div class="loader"></div>
 <div class="loader" style="--b: 15px;--c: blue;width: 120px;--n: 8"></div>
 <div class="loader" style="--b: 5px;--c: green;width: 80px;--n: 6;--g: 20deg"></div>
 <div class="loader" style="--b: 20px;--c: #000;width: 80px;--n: 15;--g: 7deg"></div> 

 .loader {
   --b: 10px;  /* border thickness */
   --n: 10;    /* number of dashes*/
   --g: 10deg; /* gap between dashes*/
   --c: red;   /* the color */

   width: 100px; /* size */
   aspect-ratio: 1;
   border-radius: 50%;
   padding: 1px;
   background: conic-gradient(#0000,var(--c)) content-box;
   -webkit-mask:
     repeating-conic-gradient(#0000 0deg,
        #000 1deg calc(360deg/var(--n) - var(--g) - 1deg),
        #0000     calc(360deg/var(--n) - var(--g)) calc(360deg/var(--n))),
     radial-gradient(farthest-side,#0000 calc(98% - var(--b)),#000 calc(100% - var(--b)));
           mask:
     repeating-conic-gradient(#0000 0deg,
        #000 1deg calc(360deg/var(--n) - var(--g) - 1deg),
        #0000     calc(360deg/var(--n) - var(--g)) calc(360deg/var(--n))),
     radial-gradient(farthest-side,#0000 calc(98% - var(--b)),#000 calc(100% - var(--b)));
   -webkit-mask-composite: destination-in;
           mask-composite: intersect;
   animation: load 1s infinite steps(var(--n));
 }
 @keyframes load {to{transform: rotate(1turn)}}

同じコードを使用する4つの異なるローダーがあります。いくつかの変数を変更するだけで、CSSコードに触れることなく新しいローダーを生成できます。

変数は次のように定義されます。

  • --b 境界線の太さを定義します。
  • --n  ダッシュの数を定義します。
  • --gダッシュ間のギャップを定義します。円形の要素を扱っているので、これは角度の値です。
  • --c 色を定義します。

これは、さまざまな変数を確認するための図です。

スピナーローダーのCSS変数

スピナーローダーのCSS変数

CSSコードに取り組みましょう。別の図を使用して、ローダーの段階的な構成を説明します。

スピナーローダーのステップバイステップの図

スピナーローダーのステップバイステップの図

まず、次のような円を作成します。

.loader {
  width: 100px; /* size */
  aspect-ratio: 1;
  border-radius: 50%;
}

これまでのところ複雑なことはありません。これを使用すると、サイズを制御するためにaspect-ratio1つの値（）のみを変更できることに注意してください。width

次に、透明から定義された色（変数--c）に円錐曲線の色を追加します。

.loader {
  width:100px; /* size */
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(#0000,var(--c));
}

このステップでmaskは、円の一部を繰り返し非表示にするプロパティを紹介します。--nこれはと--d変数に依存します。図をよく見ると、次のパターンに気付くでしょう。

visible part
invisible part
visible part
invisible part
etc

これを行うには、を使用しますrepeating-conic-gradient(#000 0 X, #0000 0 Y)。から0までXは不透明な色（可視部分）があり、からXまでYは透明な色（不可視部分）があります。

変数を紹介します。

  • との間の式がになるgように、各可視部分の間に等しいギャップが必要です。XYX = Y - g
  • n目に見える部分が必要なので、の式YはY = 360deg/nです。完全な円は360deg、単純にで割ったものです。n

これまでのコードは次のとおりです。

.loader {
  width: 100px; /* size */
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(#0000,var(--c));
  mask: repeating-conic-gradient(#000 0 calc(360deg/var(--n) - var(--g)) , #0000 0 calc(360deg/var(--n))
}

この次のステップは最も難しいステップです。最終的な形状を取得するために、別のマスクを適用して一種の穴を作成する必要があるためです。これを行うにはradial-gradient()、変数で論理的にaを使用しますb。

radial-gradient(farthest-side,#0000 calc(100% - var(--b)),#000 0)

に等しい厚さを削除するところから完全な円b。

これを前のマスクに追加します。

.loader {
  width: 100px; /* size */
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(#0000,var(--c));
  mask: 
   radial-gradient(farthest-side,#0000 calc(100% - var(--b)),#000 0),
   repeating-conic-gradient(#000 0 calc(360deg/var(--n) - var(--g)) , #0000 0 calc(360deg/var(--n))
}

2つのマスクレイヤーがありますが、結果は私たちが望むものではありません。次のようになります。

奇妙に見えるかもしれませんが、それは論理的です。「最終的な」可視部分は、各マスクレイヤーの各可視部分の合計に他なりません。この動作は、を使用して変更できますmask-composite。このプロパティを説明するために記事全体が必要になるので、単純に値を示します。

intersect私たちの場合、 （そしてdestination-out接頭辞付きのプロパティについて）考慮する必要があります。コードは次のようになります。

.loader {
  width: 100px; /* size */
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(#0000,var(--c));
  mask: 
    radial-gradient(farthest-side,#0000 calc(100% - var(--b)),#000 0),
    repeating-conic-gradient(#000 0 calc(360deg/var(--n) - var(--g)) , #0000 0 calc(360deg/var(--n));
  -webkit-mask-composite: destination-in;
          mask-composite: intersect;
}

形が出来上がりました！アニメーションが欠けているだけです。後者は無限回転です。

注意すべき唯一のことは、stepsアニメーションを使用して、固定されたダッシュと動く色の錯覚を作成しているということです。

これが違いを見るためのイラストです

線形アニメーションとステップアニメーション

最初のものは形状の線形で連続的な回転であり（私たちが望むものではありません）、2番目のものは離散アニメーション（私たちが望むもの）です。

アニメーションを含む完全なコードは次のとおりです。

 <div class="loader"></div>
 <div class="loader" style="--b: 15px;--c: blue;width: 120px;--n: 8"></div>
 <div class="loader" style="--b: 5px;--c: green;width: 80px;--n: 6;--g: 20deg"></div>
 <div class="loader" style="--b: 20px;--c: #000;width: 80px;--n: 15;--g: 7deg"></div> 

 .loader {
   --b: 10px;  /* border thickness */
   --n: 10;    /* number of dashes*/
   --g: 10deg; /* gap between dashes*/
   --c: red;   /* the color */

   width: 100px; /* size */
   aspect-ratio: 1;
   border-radius: 50%;
   padding: 1px;
   background: conic-gradient(#0000,var(--c)) content-box;
   -webkit-mask:
     repeating-conic-gradient(#0000 0deg,
        #000 1deg calc(360deg/var(--n) - var(--g) - 1deg),
        #0000     calc(360deg/var(--n) - var(--g)) calc(360deg/var(--n))),
     radial-gradient(farthest-side,#0000 calc(98% - var(--b)),#000 calc(100% - var(--b)));
           mask:
     repeating-conic-gradient(#0000 0deg,
        #000 1deg calc(360deg/var(--n) - var(--g) - 1deg),
        #0000     calc(360deg/var(--n) - var(--g)) calc(360deg/var(--n))),
     radial-gradient(farthest-side,#0000 calc(98% - var(--b)),#000 calc(100% - var(--b)));
   -webkit-mask-composite: destination-in;
           mask-composite: intersect;
   animation: load 1s infinite steps(var(--n));
 }
 @keyframes load {to{transform: rotate(1turn)}}

説明で使用したコードとの違いに気付くでしょう。

  • padding: 1px背景を追加して設定していますcontent-box
  • +/1degの色の間にありますrepeating-conic-gradient()
  • 内側の色には数パーセントの違いがあります radial-gradient()

これらは、視覚的な不具合を回避するためのいくつかの修正です。グラデーションは「奇妙な」結果を生成することが知られているため、それらを回避するためにいくつかの値を手動で調整する必要があります。

プログレスローダーを作成する方法

前のローダーと同様に、概要から始めましょう。

https://codepen.io/t_afif/pen/bGoNddg

 <div class="loader"></div>
 <div class="loader" style="--s:10px;--n:10;color:red"></div>
 <div class="loader" style="--g:0px;color:darkblue"></div>
 <div class="loader" style="--s:25px;--g:8px;border-radius:50px;color:green"></div>

 .loader {
   --n:5;    /* control the number of stripes */
   --s:30px; /* control the width of stripes */
   --g:5px;  /* control the gap between stripes */

   width:calc(var(--n)*(var(--s) + var(--g)) - var(--g));
   height:30px;
   padding:var(--g);
   margin:5px auto;
   border:1px solid;
   background:
     repeating-linear-gradient(90deg,
       currentColor  0 var(--s),
       #0000 0 calc(var(--s) + var(--g))
     ) left / calc((var(--n) + 1)*(var(--s) + var(--g))) 100% 
     no-repeat content-box;
   animation: load 1.5s steps(calc(var(--n) + 1)) infinite;
 }
 @keyframes load {
   0% {background-size: 0% 100%}
 }

以前のローダーと同じ構成になっています。ローダーを制御するCSS変数：

  • --n ダッシュ/ストライプの数を定義します。
  • --s 各ストライプの幅を定義します。
  • --g ストライプ間のギャップを定義します。

CSS変数の図

CSS変数の図

上の図から、要素の幅が3つの変数に依存することがわかります。CSSは次のようになります。

.loader {
  width: calc(var(--n)*(var(--s) + var(--g)) - var(--g));
  height: 30px; /* use any value you want here */
  padding: var(--g);
  border: 1px solid;
}

padding両側にギャップを設定するために使用します。その場合、幅はストライプの数に幅とギャップを掛けたものに等しくなります。Nストライプにはギャップがあるため、1つのギャップを削除しN-1ます。

ストライプを作成するには、以下のグラデーションを使用します。

repeating-linear-gradient(90deg,
  currentColor 0 var(--s),
  #0000        0 calc(var(--s) + var(--g))
 )

From 0tosは定義された色であり、from stos + gは透明色（ギャップ）です。

currentColorプロパティの値であるwhichを使用していcolorます。内部に色を定義しなかったためborder、の値にも使用されることに注意してくださいcolor。ローダーの色を変更したい場合は、colorプロパティを設定するだけです。

これまでのコード：

.loader {
  width: calc(var(--n)*(var(--s) + var(--g)) - var(--g));
  height: 30px;
  padding: var(--g);
  border: 1px solid;
  background:
    repeating-linear-gradient(90deg,
      currentColor  0 var(--s),
      #0000 0 calc(var(--s) + var(--g))
    ) left / 100% 100% content-box no-repeat;
}

content-boxグラデーションがパディング領域をカバーしないようにするために使用しています。100% 100%次に、左の位置に等しいサイズを定義します。

アニメーションの時間です。このローダーでは、background-sizefrom 0% 100%toをアニメーション化します。これは、fromから  toへ100% 100%のグラデーションの幅を意味します。0%100%

steps()以前のローダーと同様に、連続的なアニメーションではなく、個別のアニメーションを使用することに依存します。

線形アニメーションとステップアニメーション

2つ目は作成したいもので、次のコードを追加することで実現できます。

.loader {
  animation: load 1.5s steps(var(--n)) infinite;
}
@keyframes load {
  0% {background-size: 0% 100%}
}

最後の図をよく見ると、アニメーションが完全ではないことがわかります。を使用したとしても、最後に1つのストライプがありませんN。これはバグではありませんが、どのように機能するsteps()はずです。

これを克服するには、追加のステップを追加する必要があります。background-sizeグラデーションを増やしてN+1ストライプを含め、を使用しますsteps(N+1)。これにより、最終的なコードが表示されます。

.loader {
  width: calc(var(--n)*(var(--s) + var(--g)) - var(--g));
  height: 30px;
  padding: var(--g);
  margin: 5px auto;
  border: 1px solid;
  background:
    repeating-linear-gradient(90deg,
      currentColor  0 var(--s),
      #0000 0 calc(var(--s) + var(--g))
    ) left / calc((var(--n) + 1)*(var(--s) + var(--g))) 100% 
    content-box no-repeat;
  animation: load 1.5s steps(calc(var(--n) + 1)) infinite;
}
@keyframes load {
  0% {background-size: 0% 100%}
}

グラデーションの幅は、N+1（ではなく100%） 1つのストライプとギャップの幅を掛けたものに等しいことに注意してください。

結論

このチュートリアルを楽しんでいただけたでしょうか。興味があれば、私は500以上のCSSのみのシングルdivローダーを作成しました。また、バックグラウンドプロパティのみを使用してドットローダーを作成する方法を説明する別のチュートリアルを作成しました。

以下の便利なリンクを見つけて、複雑さのために完全には説明しなかった、私が使用したいくつかのプロパティの詳細を確認してください。

読んでくれてありがとう！

リンク：https ：//www.freecodecamp.org/news/how-to-create-a-css-only-loader/

#css 

Jacklin Maximus

Jacklin Maximus

1625051351

NFT Marketplace Software Development Services 2021

NFT marketplace development

The NFT marketplace development is the current scenerio or trendsetter in the digital world. The value of Non Fungible Tokens (NFTs) has not dropped and is still significant and stable in the marketplace. The masssive increase in NFT token value has gained lot of users attraction to adopt this marketplace platform for its efficient features. It’s perfect and best time for investors to consider this blockchain based investment platform since the crypto market for NFT marketplaces is trending in recent times.

An Opensea and rarible similar platform with all technical features and functionalities is developed and given by professional experts. Connect with a leading blockchain company to raise the business standards and compete with others in the marketplace.

Development steps of NFT Marketplace Platform like OpenSea

NFT Marketplace like OpenSea are highly considered to be best for buy, sell and trade across the world in recent times. This OpenSea Clone Script offers a lot of unique digital items for users to trade and benefit from it.

  • The crypto users are attracted to this marketplace since they can tokenize their art, games, and real-world assets to Non Fungible Tokens (NFTs) and get more income in less time.
  • The main reason to select a marketplace like OpenSea is that it acts easily and quickly in transactions with less time and has more crypto value in the trade market.
  • The NFT marketplace platform like OpenSea provides different digital collectibles like domain names, art, games, etc.
  • An NFT marketplace like OpenSea always permits anyone to buy/sell NFTs.
  • The built quality of this marketplace platform is highly scalable , flexible and comes customizable according to crypto users requirements.
  • Opensea clone enables a multi-wallet payment gateway for the purchase of different NFTs & crypto digital tokens.

Creation of NFT Marketplace like Rarible

NFT Marketplace like Rarible are highly considered to be best NFT marketplace across the world in recent times. This OpenSea Clone Script offers a lot of unique digital items for users to trade and advantage from it. The NFT marketplace platform like Rarible has legal compliance in their whole functioning process and attractive crypto user interface (UI) to attract users towards this NFT marketplace platform.
NFT marketplace platform offers comprehensive service to buyers & sellers for developing this NFT marketplace well known worldwide.

An NFT marketplace platform like Rarible provides high-level security, fast transactions , immutability and fewer crypto transaction fees.
The creation of a marketplace platform or website like Rarible built using the latest blockchain technology stack software & highly skilled professional expert’s assistance.

The NFT marketplace website like Rarible is then tested under certain stages and made ready to start or launch for investors to skyrocket their desired business.
Investment towards a marketplace like Rarible has highly potential in cryptocurrency trading and a lot to provide cryptocurrency users since the token value is high volume for competing with others in the crypto based market.

Why BlockchainAppsdeveloper For NFT Marketplace Development?

BlockchainAppsDeveloper is the top leading NFT Marketplace Development Company, We offer ready-to-launch or start NFT Marketplace Development Services that help to build your own NFT Marketplace like Rarible, Opensea, Ghost market, etc.

GhostMarket Clone Script - GhostMarket Like NFT marketplace Development

OpenSea Clone Script - OpenSea Like NFT marketplace Development

Rarible Clone Script - Rarible LIke NFT marketplace Development

Top trending NFT game Clone scripts

Axie infinity clone script

zed run clone script

cryptokitties clone script

decentraland clone script

Binemon Clone Script

Polkawar clone script

Sorare clone script

gods unchained clone script

Tinyhero clone script

Splinterland clone script

#nft marketplace software development #nft marketplace development #nft marketplace like rarible #nft marketplace platform like opensea #nft