/** * element: div.page-host * toggle-class: "loading" *//* COMMON */@keyframesplaceHolderShimmer{0%{background-position:-468px0}100%{background-position:468px0}}.animated-background{animation-duration:1.25s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:placeHolderShimmer;animation-timing-function:linear;color:transparent;pointer-events:none;background:#F6F6F6;background:linear-gradient(toright,#F6F6F68%,#F0F0F018%,#F6F6F633%);background-size:800px104px;//height:96px;position:relative;&>*{visibility:hidden;&:after,&::-webkit-input-placeholder,&::-moz-placeholder,&:-ms-input-placeholder,&:-moz-placeholder{visibility:hidden;color:transparent;}}&:after,&::-webkit-input-placeholder,&::-moz-placeholder,&:-ms-input-placeholder,&:-moz-placeholder{visibility:hidden;color:transparent;}}/* Select what to animate for loading (and hide its contents) */.loading{.person-section{.image-wrapper{@extend.animated-background;}.person-wrapper{h2,p{@extend.animated-background;}}}.personal-section{.nextofkin-section,.children-section,.form-group{&>label+*{@extend.animated-background;}&:after{color:transparent;}}}.nok_and_children_section{.nextofkin-section,.children-section{@extend.animated-background;}}.employment-section{@extend.animated-background;}}
Comments (0)
HTTPSSSH
You can clone a snippet to your computer for local editing.
Learn more.