LoaderBar.vue
A lightweight, themeable loading bar component for Vue.
1 min read
Updated
A small, themeable loading bar for Vue. It exposes buffer and fill elements that can be animated with CSS, and is easy to drop into any layout. The component is below.
LoaderBar.vue
vue
<template>
<div class="dk-loader-bar">
<div class="dk-loader-bar__item dk-loader-bar__item--buffer"/>
<div class="dk-loader-bar__item dk-loader-bar__item--fill"/>
</div>
</template>
<style lang="scss" scoped>
.dk-loader-bar {
position: relative;
top: 0;
left: 0;
width: 100%;
overflow: hidden;
&, &__item {
height: 3px;
}
&__item {
position: absolute;
bottom: 0;
background: var(--dk-color-primary);
&--buffer {
left: 0;
width: 100%;
opacity: .5;
}
&--fill {
left: -5%;
will-change: transform, width;
animation: progressbar 2s infinite cubic-bezier(.4, 0, .2, 1);
}
}
}
@keyframes progressbar {
0% {
animation-timing-function: cubic-bezier(.15, 0, .52, .41);
transform: translateX(0);
width: 5%;
}
25% {
animation-timing-function: cubic-bezier(.31, .28, .8, .73);
transform: translateX(37.65%);
width: 15%;
}
50% {
animation-timing-function: cubic-bezier(.4, .63, .6, .9);
transform: translateX(84.39%);
width: 30%;
}
100% {
animation-timing-function: cubic-bezier(.4, .63, .6, .9);
transform: translateX(100%);
width: 100%;
}
}
</style>Something wrong or want to discuss this article?
Get in touch