Loaders & Progress
Loader circular grande
- Preview
- HTML
- CSS
<div class="loader">
<div class="loader__circular">
<span class="loader__core"></span>
</div>
</div>
.loader {
display: block;
width: fit-content;
}
.loader .loader__circular {
height: 104px;
width: 104px;
position: relative;
border-radius: 100%;
background-image: linear-gradient(135deg, #01141E 25%, #E4E4E4 55%, #E4E4E4 55%, #E4E4E4 100%);
animation: rotateAnimation 1s infinite linear;
}
.loader__circular .loader__core {
display: block;
width: 80%;
height: 80%;
position: absolute;
left: 10%;
top: 10%;
background-color: #FFF;
margin: 0 auto;
border-radius: 100%;
}
@keyframes rotateAnimation {
100% {
transform: rotate(360deg)
}
}
Loader circular médio
- Preview
- HTML
- CSS
<div class="loader">
<div class="loader__circular">
<span class="loader__core"></span>
</div>
</div>
.loader {
display: block;
width: fit-content;
}
.loader .loader__circular {
position: relative;
width: 80px;
height: 80px;
border-radius: 100%;
background-image: linear-gradient(135deg, #01141E 25%, #E4E4E4 55%, #E4E4E4 55%, #E4E4E4 100%);
animation: rotateAnimation 1s infinite linear;
}
.loader__circular .loader__core {
display: block;
width: 80%;
height: 80%;
position: absolute;
left: 10%;
top: 10%;
background-color: #FFF;
margin: 0 auto;
border-radius: 100%;
}
@keyframes rotateAnimation {
100% {
transform: rotate(360deg)
}
}
Loader circular pequeno
- Preview
- HTML
- CSS
<div class="loader">
<div class="loader__circular">
<span class="loader__core"></span>
</div>
</div>
.loader {
display: block;
width: fit-content;
}
.loader .loader__circular {
position: relative;
width: 40px;
height: 40px;
border-radius: 100%;
background-image: linear-gradient(135deg, #01141E 25%, #E4E4E4 55%, #E4E4E4 55%, #E4E4E4 100%);
animation: rotateAnimation 1s infinite linear;
}
.loader__circular .loader__core {
display: block;
width: 80%;
height: 80%;
position: absolute;
left: 10%;
top: 10%;
background-color: #FFF;
margin: 0 auto;
border-radius: 100%;
}
@keyframes rotateAnimation {
100% {
transform: rotate(360deg)
}
}
Loader linear grande
- Preview
- HTML
- CSS
<div class="loader">
<span class="loader__linear"></span>
</div>
.loader {
display: flex;
margin: 10px;
}
.loader .loader__linear {
display: block;
background: linear-gradient(to right, #E4E4E4, #01141E, #E4E4E4);
background-size: 200%;
height: 8px;
width: 208px;
border-radius: 8px;
animation: loading-gradient 1s linear infinite;
}
@keyframes loading-gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: -100% 50%;
}
100% {
background-position: -200% 50%;
}
}
Loader linear médio
- Preview
- HTML
- CSS
<div class="loader">
<span class="loader__linear"></span>
</div>
.loader {
display: flex;
margin: 10px;
}
.loader .loader__linear {
background: linear-gradient(to right, #E4E4E4, #01141E, #E4E4E4);
background-size: 200%;
animation: loading-gradient 1s linear infinite;
width: 104px;
height: 6px;
border-radius: 6px;
}
@keyframes loading-gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: -100% 50%;
}
100% {
background-position: -200% 50%;
}
}
Loader linear pequeno
- Preview
- HTML
- CSS
<div class="loader">
<span class="loader__linear"></span>
</div>
.loader {
display: flex;
margin: 10px;
}
.loader .loader__linear {
background: linear-gradient(to right, #E4E4E4, #01141E, #E4E4E4);
background-size: 200%;
animation: loading-gradient 1s linear infinite;
height: 5px;
width: 52px;
border-radius: 5px;
}
@keyframes loading-gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: -100% 50%;
}
100% {
background-position: -200% 50%;
}
}
Loader de progresso circular grande
- Preview
- HTML
- CSS
<span class="loader"></span>
.loader {
display: block;
width: 104px;
height: 104px;
border-radius: 50%;
position: relative;
transform: rotate(45deg);
}
.loader::before {
content: "";
box-sizing: border-box;
position: absolute;
inset: 0px;
border-radius: 50%;
border: 10px solid #E6E6E6;
}
.loader::after {
content: "";
box-sizing: border-box;
position: absolute;
inset: 0px;
border-radius: 50%;
border: 10px solid #01141E;
animation: prixClipFix 2s linear infinite;
}
@keyframes prixClipFix {
0% {
clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)
}
25% {
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)
}
50% {
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)
}
75% {
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)
}
100% {
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)
}
}
Loader de progresso circular médio
- Preview
- HTML
- CSS
<span class="loader"></span>
.loader {
display: block;
width: 80px;
height: 80px;
border-radius: 50%;
position: relative;
transform: rotate(45deg);
}
.loader::before {
content: "";
box-sizing: border-box;
position: absolute;
inset: 0px;
border-radius: 50%;
border: 8px solid #E6E6E6;
}
.loader::after {
content: "";
box-sizing: border-box;
position: absolute;
inset: 0px;
border-radius: 50%;
border: 8px solid #01141E;
animation: prixClipFix 2s linear infinite;
}
@keyframes prixClipFix {
0% {
clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)
}
25% {
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)
}
50% {
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)
}
75% {
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)
}
100% {
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)
}
}
Loader de progresso circular pequeno
- Preview
- HTML
- CSS
<span class="loader"></span>
.loader {
display: block;
width: 40px;
height: 40px;
border-radius: 50%;
position: relative;
transform: rotate(45deg);
}
.loader::before {
content: "";
box-sizing: border-box;
position: absolute;
inset: 0px;
border-radius: 50%;
border: 4px solid #E6E6E6;
}
.loader::after {
content: "";
box-sizing: border-box;
position: absolute;
inset: 0px;
border-radius: 50%;
border: 4px solid #01141E;
animation: prixClipFix 2s linear infinite;
}
@keyframes prixClipFix {
0% {
clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)
}
25% {
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)
}
50% {
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)
}
75% {
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)
}
100% {
clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)
}
}
Loader de progresso linear grande
- Preview
- HTML
- CSS
<div class="loader">
<span class="loader__progress"></span>
</div>
.loader {
display: flex;
margin: 10px;
}
.loader .loader__progress {
display: block;
position: relative;
height: 8px;
width: 208px;
border-radius: 8px;
background-color: #E6E6E6;
overflow: hidden;
}
.loader .loader__progress::after {
content: '';
width: 100%;
height: 100%;
background-color: #01141E;
position: absolute;
border-radius: 4px;
top: 0;
left: 0;
box-sizing: border-box;
animation: loading-progress 4s linear infinite;
}
@keyframes loading-progress {
0% {
left: 0;
transform: translateX(-100%);
}
}
Loader de progresso linear médio
- Preview
- HTML
- CSS
<div class="loader">
<span class="loader__progress"></span>
</div>
.loader {
display: flex;
margin: 10px;
}
.loader .loader__progress {
display: block;
position: relative;
background-color: #E6E6E6;
overflow: hidden;
width: 104px;
height: 6px;
border-radius: 6px;
}
.loader .loader__progress::after {
content: '';
width: 100%;
height: 100%;
background-color: #01141E;
position: absolute;
border-radius: 4px;
top: 0;
left: 0;
box-sizing: border-box;
animation: loading-progress 2s linear infinite;
}
@keyframes loading-progress {
0% {
left: 0;
transform: translateX(-100%);
}
}
Loader de progresso linear pequeno
- Preview
- HTML
- CSS
<div class="loader">
<span class="loader__progress"></span>
</div>
.loader {
display: flex;
margin: 10px;
}
.loader .loader__progress {
display: block;
position: relative;
background-color: #E6E6E6;
overflow: hidden;
height: 5px;
width: 52px;
border-radius: 5px;
}
.loader .loader__progress::after {
content: '';
width: 100%;
height: 100%;
background-color: #01141E;
position: absolute;
border-radius: 4px;
top: 0;
left: 0;
box-sizing: border-box;
animation: loading-progress 2s linear infinite;
}
@keyframes loading-progress {
0% {
left: 0;
transform: translateX(-100%);
}
}