test-nut-ui
Version:
<p align="center"> <img alt="logo" src="https://img11.360buyimg.com/imagetools/jfs/t1/211965/25/7152/22022/61b16785E433119bb/aa41d7a9f7e823f3.png" width="150" style="margin-bottom: 10px;"> </p>
2 lines (1 loc) • 2.35 kB
CSS
.nut-progress{display:flex;align-items:center;position:relative;width:100%}.nut-progress-outer{flex:auto;border-radius:var(--nutui-progress-border-radius, 2px);height:var(--nutui-progress-height, 4px);background:var(--nutui-progress-background, var(--nutui-gray-4, #f5f5f5))}.nut-progress-outer .nut-progress-active:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border-radius:var(--nutui-progress-border-radius, 2px);animation:progressActive 2s ease-in-out infinite}.nut-progress-right-percent{min-width:var(--nutui-progress-right-percent-text-min-width, 32px);font-size:var(--nutui-progress-right-percent-text-font-size, 12px);color:var(--nutui-progress-right-percent-text-color, var(--nsui-gray-color-7, #8C8C8C));margin:var(--nutui-progress-right-percent-text-margin, 0px 0px 0px 4px);text-align:right}.nut-progress-inner-percent{font-size:var(--nutui-progress-inner-percent-text-font-size, 12px);color:var(--nutui-progress-inner-percent-text-color, var(--nsui-gray-color-1, #ffffff));text-shadow:var(--nutui-progress-inner-percent-text-shadow, 0 0 2px var(--nsui-gray-percent-color-6, rgba(0, 0, 0, .25)));margin:var(--nutui-progress-right-percent-text-margin, 0px 0px 0px 8px)}.nut-progress-inner{height:100%;display:flex;flex-direction:column;justify-content:center;transition:all .4s;border-radius:var(--nutui-progress-border-radius, 2px);background:var(--nutui-progress-color, var(--nutui-brand-color, #2C68FF))}.nut-progress-text{display:flex;align-items:center;position:absolute;top:var(--nutui-progress-text-position-top, -7px);bottom:var(--nutui-progress-text-position-bottom, -7px);transition:all .4s;transform:translate(-50%)}.nut-progress-text__inner{display:flex;align-items:center;justify-content:center;height:100%;width:100%;min-width:var(--nutui-progress-text-min-width, 44px);color:var(--nutui-progress-text-color, var(--nutui-brand-text-color, #ffffff));padding:var(--nutui-progress-text-padding, 0 8px);border-radius:var(--nutui-progress-text-border-radius, 9px);font-size:var(--nutui-progress-text-font-size, 12px);line-height:1;background:var(--nutui-progress-text-background, var(--nutui-progress-color, var(--nutui-brand-color, #2C68FF)))}@keyframes progressActive{0%{background:rgba(255,255,255,.1);width:0}20%{background:rgba(255,255,255,.5);width:0}to{background:rgba(255,255,255,0);width:100%}}