diff --git a/packages/styles/src/fundamental-styles.scss b/packages/styles/src/fundamental-styles.scss index dd1b909636..edf590f3f0 100644 --- a/packages/styles/src/fundamental-styles.scss +++ b/packages/styles/src/fundamental-styles.scss @@ -80,6 +80,7 @@ @import "select"; @import "shellbar"; @import "side-nav"; +@import "skeleton"; @import "slider"; @import "status-indicator"; @import "step-input"; diff --git a/packages/styles/src/skeleton.scss b/packages/styles/src/skeleton.scss new file mode 100644 index 0000000000..9b207fc70c --- /dev/null +++ b/packages/styles/src/skeleton.scss @@ -0,0 +1,46 @@ + +@import "./new-settings"; +@import "./mixins"; + +$block: #{$fd-namespace}-skeleton; + +.#{$block} { + @include fd-reset(); + + display: inline-block; + cursor: wait; + + &__canvas { + display: block; + fill: url(#skeletonGradient); + + --fdSkeletonGradientMiddleColor: #999; + } + + &__begin-end { + stop-color: var(--sapContent_Placeholderloading_Background); + } + + &__middle { + stop-color: var(--fdSkeletonGradientMiddleColor); + animation: fd-skeleton-shimmer 2s linear infinite; + } +} + +@keyframes fd-skeleton-shimmer { + 0% { + stop-color: var(--sapContent_Placeholderloading_Background); + } + + 35% { + stop-color: var(--fdSkeletonGradientMiddleColor); + } + + 65% { + stop-color: var(--fdSkeletonGradientMiddleColor); + } + + 100% { + stop-color: var(--sapContent_Placeholderloading_Background); + } +} diff --git a/packages/styles/stories/Components/skeleton/circle.example.html b/packages/styles/stories/Components/skeleton/circle.example.html new file mode 100644 index 0000000000..e684aec4dc --- /dev/null +++ b/packages/styles/stories/Components/skeleton/circle.example.html @@ -0,0 +1,17 @@ +
3 lines
+2 lines
+