Skip to content
Permalink
Browse files

feat(progressbar): add Progressbar for Material theme

  • Loading branch information...
PreslavKozovski authored and joneff committed Jul 31, 2018
1 parent 08a15b3 commit 1de6d1933efd2840dbd76e26f23930ae74f80dcc
@@ -126,8 +126,7 @@
transform-origin: 0 0;
}
> .k-state-selected {
left: -1px;
bottom: -1px;
bottom: 0;
width: 100%;
}

@@ -171,7 +171,7 @@ $window-inner-padding-y: 24px !default;
$window-titlebar-padding-x: 24px !default;
$window-titlebar-padding-y: 24px !default;

$progressbar-height: 22px;
$progressbar-height: 5px !default;

$zindex-popup: 1;
$zindex-window: 2;
@@ -73,7 +73,7 @@


// Interactivity & UX
//@import "progressbar";
@import "progressbar";
//@import "scroller";


@@ -0,0 +1,11 @@
@import "variables";
@import "mixins";


// Dependencies
@import "common/all";


// Component
@import "progressbar/layout";
@import "progressbar/theme";
@@ -0,0 +1 @@
@import "~@progress/kendo-theme-default/scss/progressbar/layout";
@@ -0,0 +1,147 @@
$progress-text: #3b3b3b !default;
$progress-bg: #bdc2de !default;

$progress-fill-bg: $primary !default;

$progress-status-gap: -17px !default;
$progress-status-font-size: 11px !default;
$progress-status-line-height: 20px !default;

$progress-animation-timing: 2s infinite !default;

@mixin progress-indeterminate-common() {
content: "";
display: block;
position: absolute;
background: $progress-fill-bg;
width: 100%;
height: 100%;
transform-origin: 0 0;
}

@mixin progress-indeterminate-animation($primary-animation-name, $secondary-animation-name, $translate-axis, $scale-axis) {
@keyframes #{$primary-animation-name} {
0% {
transform: unquote("#{$translate-axis}(0)") unquote("#{$scale-axis}(0)");
}
20% {
transform: unquote("#{$translate-axis}(0)") unquote("#{$scale-axis}(.08)");
animation-timing-function: cubic-bezier(.4, .08, .75, .8);
}
60% {
transform: unquote("#{$translate-axis}(83%)") unquote("#{$scale-axis}(.75)");
animation-timing-function: cubic-bezier(.21, .25, .58, .98);
}
100% {
transform: unquote("#{$translate-axis}(250%)") unquote("#{$scale-axis}(.08)");
}
}

@keyframes #{$secondary-animation-name} {
0% {
transform: unquote("#{$translate-axis}(0)") unquote("#{$scale-axis}(.08)");
animation-timing-function: cubic-bezier(.18, 0, .54, .42);
}
22% {
transform: unquote("#{$translate-axis}(34%)") unquote("#{$scale-axis}(.45)");
animation-timing-function: cubic-bezier(.22, .25, .7, .9);
}
46% {
transform: unquote("#{$translate-axis}(82%)") unquote("#{$scale-axis}(.75)");
animation-timing-function: cubic-bezier(.33, .3, .4, 1.2);
}
100% {
transform: unquote("#{$translate-axis}(160%)") unquote("#{$scale-axis}(.08)");
}
}
}

@include exports("progressbar/theme") {

// Theme
.k-progressbar {
color: $progress-text;
background-color: $progress-bg;
overflow: visible;
border-radius: 0;

// Status
.k-progress-status-wrap {
top: $progress-status-gap;
font-size: $progress-status-font-size;
line-height: $progress-status-line-height;
}

// Progress
> .k-state-selected {}
.k-state-selected {
background-color: $progress-fill-bg;
}

// Chunks
> ul {}

.k-item {
border-color: $bg-color;
}
}

.k-progressbar.k-progressbar-vertical {

.k-progress-status-wrap {
top: 0;
left: $progress-status-gap;
}
}

.k-progressbar.k-progressbar-vertical.k-progressbar-reverse {

.k-progress-status-wrap {
left: 1px;
}
}

.k-progressbar.k-progressbar-indeterminate {

@include progress-indeterminate-animation(progress-primary-indeterminate-horizontal, progress-secondary-indeterminate-horizontal, translateX, scaleX);
@include progress-indeterminate-animation(progress-primary-indeterminate-vertical, progress-secondary-indeterminate-vertical, translateY, scaleY);
overflow: hidden;

.k-state-selected,
.k-progress-status-wrap {
display: none;
}
}

.k-progressbar.k-progressbar-horizontal.k-progressbar-indeterminate::before {

@include progress-indeterminate-common();
top: 0;
left: -150%;
animation: progress-primary-indeterminate-horizontal $progress-animation-timing;
}

.k-progressbar.k-progressbar-horizontal.k-progressbar-indeterminate::after {

@include progress-indeterminate-common();
top: 0;
left: -50%;
animation: progress-secondary-indeterminate-horizontal $progress-animation-timing;
}

.k-progressbar.k-progressbar-vertical.k-progressbar-indeterminate::before {

@include progress-indeterminate-common();
top: -150%;
left: 0;
animation: progress-primary-indeterminate-vertical $progress-animation-timing;
}

.k-progressbar.k-progressbar-vertical.k-progressbar-indeterminate::after {

@include progress-indeterminate-common();
top: -50%;
left: 0;
animation: progress-secondary-indeterminate-vertical $progress-animation-timing;
}
}
@@ -0,0 +1,112 @@
<!doctype html>
<html lang="en">

<head>
<title>Progressbar</title>

<link rel="stylesheet" href="../../packages/default/dist/all.css" />
<link rel="stylesheet" href="assets/styles.css" />
<script src="assets/scripts.js"></script>

<style>
div[data-role='progressbar'] {
margin: 10px;
}
</style>
</head>

<body>
<div id="test-area">
<div id="pb" data-role="progressbar" class="k-widget k-progressbar k-progressbar-horizontal">
<span class="k-progress-status-wrap">
<span class="k-progress-status">10</span>
</span>
<div class="k-state-selected" style="width: 10%;">
<span class="k-progress-status-wrap" style="width: 1000%;">
<span class="k-progress-status">10</span>
</span>
</div>
</div>
<div id="pb-chunk" data-role="progressbar" class="k-widget k-progressbar k-progressbar-horizontal">
<ul class="k-reset">
<li class="k-item k-first k-state-selected" style="width: 20%;"></li>
<li class="k-item k-state-selected" style="width: 20%;"></li>
<li class="k-item k-state-default" style="width: 20%;"></li>
<li class="k-item k-state-default" style="width: 20%;"></li>
<li class="k-item k-state-default k-last" style="width: 20%;"></li>
</ul>
</div>
<br>
<div id="pbr" data-role="progressbar" class="k-widget k-progressbar k-progressbar-horizontal k-progressbar-reverse">
<span class="k-progress-status-wrap">
<span class="k-progress-status">10</span>
</span>
<div class="k-state-selected" style="width: 10%;">
<span class="k-progress-status-wrap" style="width: 1000%;">
<span class="k-progress-status">10</span>
</span>
</div>
</div>
<div id="pbr-chunk" data-role="progressbar" class="k-widget k-progressbar k-progressbar-horizontal k-progressbar-reverse">
<ul class="k-reset">
<li class="k-item k-state-default k-first" style="width: 20%;"></li>
<li class="k-item k-state-default" style="width: 20%;"></li>
<li class="k-item k-state-default" style="width: 20%;"></li>
<li class="k-item k-state-selected" style="width: 20%;"></li>
<li class="k-item k-last k-state-selected" style="width: 20%;"></li>
</ul>
</div>
<hr>
<div id="pbv" data-role="progressbar" class="k-widget k-progressbar k-progressbar-vertical">
<span class="k-progress-status-wrap">
<span class="k-progress-status">20</span>
</span>
<div class="k-state-selected" style="height: 20%;">
<span class="k-progress-status-wrap" style="height: 500%;">
<span class="k-progress-status">20</span>
</span>
</div>
</div>
<div id="pbv-chunk" data-role="progressbar" class="k-widget k-progressbar k-progressbar-vertical">
<ul class="k-reset">
<li class="k-item k-state-default k-first" style="height: 20%;"></li>
<li class="k-item k-state-default" style="height: 20%;"></li>
<li class="k-item k-state-selected" style="height: 20%;"></li>
<li class="k-item k-state-selected" style="height: 20%;"></li>
<li class="k-item k-last k-state-selected" style="height: 20%;"></li>
</ul>
</div>
<div id="progressbar" data-role="progressbar" class="k-widget k-progressbar k-progressbar-vertical k-progressbar-indeterminate">
<span class="k-progress-status-wrap">
<span class="k-progress-status">0</span>
</span>
</div>
<div id="pbvr" data-role="progressbar" class="k-widget k-progressbar k-progressbar-vertical k-progressbar-reverse">
<span class="k-progress-status-wrap">
<span class="k-progress-status">98</span>
</span>
<div class="k-state-selected" style="height: 98%;">
<span class="k-progress-status-wrap" style="height: 102.041%;">
<span class="k-progress-status">98</span>
</span>
</div>
</div>
<div id="pbvr-chunk" data-role="progressbar" class="k-widget k-progressbar k-progressbar-vertical k-progressbar-reverse">
<ul class="k-reset">
<li class="k-item k-first k-state-selected" style="height: 20%;"></li>
<li class="k-item k-state-selected" style="height: 20%;"></li>
<li class="k-item k-state-selected" style="height: 20%;"></li>
<li class="k-item k-state-default" style="height: 20%;"></li>
<li class="k-item k-state-default k-last" style="height: 20%;"></li>
</ul>
</div>
<hr />
<div id="progressBar" data-role="progressbar" class="k-widget k-progressbar k-progressbar-horizontal k-progressbar-indeterminate">
<span class="k-progress-status-wrap">
<span class="k-progress-status">0</span>
</span>
</div>
</div>
</body>

</html>

0 comments on commit 1de6d19

Please sign in to comment.
You can’t perform that action at this time.