Ejemplo 1: spinner de carga de CSS
.loader
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
@keyframes spin
0% transform: rotate(0deg);
100% transform: rotate(360deg);
<divclass="loader">div>Ejemplo 2: CSS cargando ruleta con texto
.centered
text-align: center;
.spinner.loading
display: none;
padding: 50px;
text-align: center;
.loading-text
width: 90px;
position: absolute;
top: calc(50% - 15px);
left: calc(50% - 45px);
text-align: center;
.spinner.loading:before
content: "";
height: 90px;
width: 90px;
margin: -15px auto auto -15px;
position: absolute;
top: calc(50% - 45px);
left: calc(50% - 45px);
border-width: 8px;
border-style: solid;
border-color: #2180c0 #ccc #ccc;
border-radius: 100%;
animation: rotation .7s infinite linear;
@keyframes rotation
from
transform: rotate(0deg);
to
transform: rotate(359deg);
Ejemplo 3: cargador de arranque
<divclass="spinner-border text-primary"role="status"><spanclass="sr-only">Loading...span>div><divclass="spinner-border text-secondary"role="status"><spanclass="sr-only">Loading...span>div><divclass="spinner-border text-success"role="status"><spanclass="sr-only">Loading...span>div><divclass="spinner-border text-danger"role="status"><spanclass="sr-only">Loading...span>div><divclass="spinner-border text-warning"role="status"><spanclass="sr-only">Loading...span>div><divclass="spinner-border text-info"role="status"><spanclass="sr-only">Loading...span>div><divclass="spinner-border text-light"role="status"><spanclass="sr-only">Loading...span>div><divclass="spinner-border text-dark"role="status"><spanclass="sr-only">Loading...span>div>Ejemplo 4: cargador de arranque
<divclass="spinner-border"style="width:3rem;height:3rem;"role="status"><spanclass="sr-only">Loading...span>div><divclass="spinner-grow"style="width:3rem;height:3rem;"role="status"><spanclass="sr-only">Loading...span>div>Ejemplo 5: cargador de arranque
<divclass="text-center"><divclass="spinner-border"role="status"><spanclass="sr-only">Loading...span>div>div>Ejemplo 6: cómo hacer spinner en html
DOCTYPEhtml><html><head><metaname="viewport"content="width=device-width, initial-scale=1"><style>.loaderborder:16px solid #f3f3f3;border-radius:50%;border-top:16px solid #3498db;width:120px;height:120px;-webkit-animation: spin 2s linear infinite;/* Safari */animation: spin 2s linear infinite;/* Safari */@-webkit-keyframes spin0%-webkit-transform:rotate(0deg);100%-webkit-transform:rotate(360deg);@keyframes spin0%transform:rotate(0deg);100%transform:rotate(360deg);style>head><body><h2>How To Create A Loaderh2><divclass="loader">div>body>html>Comentarios y puntuaciones
Si conservas algún recelo o forma de perfeccionar nuestro ensayo te inspiramos escribir una apostilla y con mucho gusto lo ojearemos.
¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)