Skip to content

Commit

Permalink
Merge branch 'main' into update-ui-shell-story
Browse files Browse the repository at this point in the history
  • Loading branch information
tw15egan authored Jul 29, 2021
2 parents 2bb4b46 + b01e485 commit 7bdeb07
Show file tree
Hide file tree
Showing 10 changed files with 67 additions and 54 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,6 @@
width: 100%;
min-height: 2rem;
align-items: center;

.#{$prefix}--loading__svg circle {
stroke-width: 12;
}

.#{$prefix}--loading__stroke {
stroke-dashoffset: $loading--small__gap;
}
}

.#{$prefix}--inline-loading__text {
Expand Down
10 changes: 10 additions & 0 deletions packages/components/src/components/loading/_functions.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
//
// Copyright IBM Corp. 2016, 2018
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

@function loading-progress($circumference, $percentage) {
@return $circumference - $percentage / 100 * $circumference;
}
9 changes: 5 additions & 4 deletions packages/components/src/components/loading/_keyframes.scss
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
//

@import 'vars';
@import 'functions';

@keyframes rotate {
0% {
Expand All @@ -31,18 +32,18 @@
/* Stroke animations */
@keyframes init-stroke {
0% {
stroke-dashoffset: 240;
stroke-dashoffset: loading-progress($circumference, 0);
}
100% {
stroke-dashoffset: $loading__gap;
stroke-dashoffset: loading-progress($circumference, 81);
}
}

@keyframes stroke-end {
0% {
stroke-dashoffset: $loading__gap;
stroke-dashoffset: loading-progress($circumference, 81);
}
100% {
stroke-dashoffset: 240;
stroke-dashoffset: loading-progress($circumference, 0);
}
}
11 changes: 6 additions & 5 deletions packages/components/src/components/loading/_loading.scss
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,10 @@
@import '../../globals/scss/vars';
@import '../../globals/scss/css--reset';
@import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
@import 'keyframes';
@import 'mixins';
@import 'functions';
@import 'vars';
@import 'mixins';
@import 'keyframes';

/// Loading styles
/// @access private
Expand All @@ -30,18 +31,18 @@
}

.#{$prefix}--loading__svg circle {
stroke-dasharray: 240;
stroke-dasharray: $circumference $circumference;
stroke-linecap: butt;
stroke-width: 10;
}

.#{$prefix}--loading__stroke {
stroke: $interactive-04;
stroke-dashoffset: $loading__gap;
stroke-dashoffset: loading-progress($circumference, 81);
}

.#{$prefix}--loading--small .#{$prefix}--loading__stroke {
stroke-dashoffset: $loading--small__gap;
stroke-dashoffset: loading-progress($circumference, 48);
}

.#{$prefix}--loading--stop {
Expand Down
4 changes: 2 additions & 2 deletions packages/components/src/components/loading/_vars.scss
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,12 @@
/// @type Number
/// @access private
/// @group loading
$loading__gap: 16;
$radius: 44;

/// @type Number
/// @access private
/// @group loading
$loading--small__gap: 110;
$circumference: $radius * 2 * 3.1416;

/// @type Number
/// @access private
Expand Down
5 changes: 2 additions & 3 deletions packages/react/src/components/Loading/Loading.js
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,6 @@ function Loading({
[`${prefix}--loading-overlay--stop`]: !active,
});
const loadingId = id || `loading-id-${instanceId}`;
const spinnerRadius = small ? '42' : '44';

const loading = (
<div
Expand All @@ -53,14 +52,14 @@ function Loading({
className={`${prefix}--loading__background`}
cx="50%"
cy="50%"
r={spinnerRadius}
r="44"
/>
) : null}
<circle
className={`${prefix}--loading__stroke`}
cx="50%"
cy="50%"
r={spinnerRadius}
r="44"
/>
</svg>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,14 +26,6 @@ $-loading-gap-small: 110;
width: 100%;
min-height: 2rem;
align-items: center;

.#{$prefix}--loading__svg circle {
stroke-width: 12;
}

.#{$prefix}--loading__stroke {
stroke-dashoffset: $-loading-gap-small;
}
}

.#{$prefix}--inline-loading__text {
Expand Down
10 changes: 10 additions & 0 deletions packages/styles/scss/components/loading/_functions.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
//
// Copyright IBM Corp. 2016, 2018
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

@function loading-progress($circumference, $percentage) {
@return $circumference - $percentage / 100 * $circumference;
}
35 changes: 11 additions & 24 deletions packages/styles/scss/components/loading/_loading.scss
Original file line number Diff line number Diff line change
Expand Up @@ -12,23 +12,10 @@
@use '../../utilities/component-reset';
@use '../../utilities/convert';
@use '../../utilities/z-index' as *;
@use 'vars' as *;
@use 'functions' as *;
@use 'animation';

/// @type Number
/// @access private
/// @group loading
$-loading-gap: 16;

/// @type Number
/// @access private
/// @group loading
$-loading-gap-small: 110;

/// @type Number
/// @access private
/// @group loading
$-loading-size: 5.5rem;

/// Loading styles
/// @access private
/// @group loading
Expand All @@ -37,8 +24,8 @@ $-loading-size: 5.5rem;
@include component-reset.reset;
@include animation.spin;

width: $-loading-size;
height: $-loading-size;
width: $loading-size;
height: $loading-size;
}

// Animation (Spin by default)
Expand All @@ -47,18 +34,18 @@ $-loading-size: 5.5rem;
}

.#{$prefix}--loading__svg circle {
stroke-dasharray: 240;
stroke-dasharray: $circumference $circumference;
stroke-linecap: butt;
stroke-width: 10;
}

.#{$prefix}--loading__stroke {
stroke: $interactive;
stroke-dashoffset: $-loading-gap;
stroke-dashoffset: loading-progress($circumference, 81);
}

.#{$prefix}--loading--small .#{$prefix}--loading__stroke {
stroke-dashoffset: $-loading-gap-small;
stroke-dashoffset: loading-progress($circumference, 48);
}

.#{$prefix}--loading--stop {
Expand Down Expand Up @@ -135,19 +122,19 @@ $-loading-size: 5.5rem;
/* Stroke animations */
@keyframes init-stroke {
0% {
stroke-dashoffset: 240;
stroke-dashoffset: loading-progress($circumference, 0);
}
100% {
stroke-dashoffset: $-loading-gap;
stroke-dashoffset: loading-progress($circumference, 81);
}
}

@keyframes stroke-end {
0% {
stroke-dashoffset: $-loading-gap;
stroke-dashoffset: loading-progress($circumference, 81);
}
100% {
stroke-dashoffset: 240;
stroke-dashoffset: loading-progress($circumference, 0);
}
}
}
21 changes: 21 additions & 0 deletions packages/styles/scss/components/loading/_vars.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
//
// Copyright IBM Corp. 2016, 2018
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

/// @type Number
/// @access private
/// @group loading
$radius: 44;

/// @type Number
/// @access private
/// @group loading
$circumference: $radius * 2 * 3.1416;

/// @type Number
/// @access private
/// @group loading
$loading-size: 5.5rem;

0 comments on commit 7bdeb07

Please sign in to comment.