.container
h1 Segmented Loader/Progress Sass Mixin
h3 mask-image + mask-size + inline SVG
- for (var i = 1; i <= 9; i++)
.loader(class=`e${i}`)
.percent
View Compiled
//mixin
@mixin segmented_loader($segments, $spacing, $radius){
mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><rect x="#{$spacing/2}" y="0" height="100%" rx="#{$radius}" ry="#{$radius}" style="width:calc(100% - #{$spacing})"/></svg>');
mask-size: #{100/$segments}% 100%;
}
//defaults
.loader{
width:100%;
height:1.5em;
background:rgba(white,0.1);
position:relative;
margin:1em 0;
.percent{
background:#00aaff;
position:absolute;
height:100%;
}
@include segmented_loader(10, 1px, 0.25em);
}
//examples
.e2{
@include segmented_loader(50, 1px, 0.1em);
.percent{background:#e4932a}
}
.e3{
height:3em;
@include segmented_loader(50, 50%, 0.1em);
.percent{background:#009688}
}
.e4{
@include segmented_loader(25, 20%, 1em);
.percent{background:white}
}
.e5{
height:3em;
@include segmented_loader(25, 10%, 1em);
.percent{background:#f44336}
}
.e6{
height:0.5em;
@include segmented_loader(100, 50%, 0);
}
.e7{
height:0.55em;
@include segmented_loader(70, 2px, 0.5em);
.percent{background:linear-gradient(90deg,#CDDC39, #009688, #005c96)}
}
.e8{
@include segmented_loader(30, 1px, 0.25em);
.percent{
background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/851550/2-color-animated-gif.gif);
background-size:auto 200%;
filter: grayscale(100%);
}
}
.e9{
.percent{
background:url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/851550/2-color-animated-gif.gif);
background-size:auto 300%;
}
}
//---
//unrelated styles
@import url('https://fonts.googleapis.com/css?family=Nunito');
*,*:before,*:after{box-sizing:border-box}
body{
padding:50px;
background:#564d52;
color:white;
font-family: 'Nunito', sans-serif;
min-height:100vh;
display:grid;
place-items:center;
h1{margin-top:0}
h3{opacity:0.5}
}
.container{
width:100%;
max-width:800px;
padding:20px;
}
.loader{
@for $i from 1 through 9 {
&:nth-of-type(#{$i}) .percent { animation-delay: $i * 0.25s; }
}
}
.percent{
animation:demo_load 5s infinite alternate;
@keyframes demo_load {
from {width: 0%}
to {width: 100%}
}
}
View Compiled
This Pen doesn't use any external CSS resources.