jquery - Image manipulation with css or javascript -
i have minor question image manipulation on websites.
i got question implement form of rating system users can rate 1-2 or 3 stars. 1 star shown per item. request star updates stars below:
= 100%
= 70%
now comes question: there form of css or javascript magic allows me without using multiple images.
thank in advance
there way this.
- first, star image needs displayed.
then on star, radial progress bar displayed reverse progress. color of 1 side of white , side transparent.
visit https://codepen.io/jo-asakura/pen/stfhi know how can radial progress bar.
css
@import url(https://fonts.googleapis.com/css?family=lato:700); .size(@w, @h) { height: @h; width: @w; } // -- *, *:before, *:after { box-sizing: border-box; } html, body { background: #ecf0f1; color: #444; font-family: 'lato', tahoma, geneva, sans-serif; font-size: 16px; padding: 10px; } .set-size { font-size: 10em; } .charts-container:after { clear: both; content: ""; display: table; } @bg: #34495e; @size: 1em; .pie-wrapper { .size(@size, @size); float: left; margin: 15px; position: relative; &:nth-child(3n+1) { clear: both; } .pie { .size(100%, 100%); clip: rect(0, @size, @size, @size / 2); left: 0; position: absolute; top: 0; .half-circle { .size(100%, 100%); border: @size / 10 solid #3498db; border-radius: 50%; clip: rect(0, @size / 2, @size, 0); left: 0; position: absolute; top: 0; } } .label { @font-size: @size / 4; @font-size-redo: @size * 4; background: @bg; border-radius: 50%; bottom: @font-size-redo / 10; color: #ecf0f1; cursor: default; display: block; font-size: @font-size; left: @font-size-redo / 10; line-height: @font-size-redo * .65; position: absolute; right: @font-size-redo / 10; text-align: center; top: @font-size-redo / 10; .smaller { color: #bdc3c7; font-size: .45em; padding-bottom: 20px; vertical-align: super; } } .shadow { .size(100%, 100%); border: @size / 10 solid #bdc3c7; border-radius: 50%; } &.style-2 { .label { background: none; color: #7f8c8d; .smaller { color: #bdc3c7; } } } &.progress-30 { .draw-progress(30, #3498db); } &.progress-60 { .draw-progress(60, #9b59b6); } &.progress-90 { .draw-progress(90, #e67e22); } &.progress-45 { .draw-progress(45, #1abc9c); } &.progress-75 { .draw-progress(75, #8e44ad); } &.progress-95 { .draw-progress(95, #e74c3c); } } .pie-wrapper--solid { border-radius: 50%; overflow: hidden; &:before { border-radius: 0 100% 100% 0 / 50%; content: ''; display: block; height: 100%; margin-left: 50%; transform-origin: left; } .label { background: transparent; } &.progress-65 { .draw-progress--solid(65, #e67e22, @bg); } &.progress-25 { .draw-progress--solid(25, #9b59b6, @bg); } &.progress-88 { .draw-progress--solid(88, #3498db, @bg); } } // -- .draw-progress(@progress, @color) when (@progress <= 50) { .pie { .right-side { display: none; } } } .draw-progress(@progress, @color) when (@progress > 50) { .pie { clip: rect(auto, auto, auto, auto); .right-side { transform: rotate(180deg); } } } .draw-progress(@progress, @color) { .pie { .half-circle { border-color: @color; } .left-side { @rotate: @progress * 3.6; transform: rotate(~'@{rotate}deg'); } } } .draw-progress--solid(@progress, @color, @bg) when (@progress <= 50) { &:before { background: @bg; transform: rotate((100 - (50 - @progress)) / 100 * 360deg * -1); } } .draw-progress--solid(@progress, @color, @bg) when (@progress > 50) { &:before { background: @color; transform: rotate((100 - @progress) / 100 * 360deg); } } .draw-progress--solid(@progress, @color, @bg) { background: linear-gradient(to right, @color 50%, @bg 50%); } html
<div class="set-size charts-container"> <div class="pie-wrapper progress-30"> <span class="label">30<span class="smaller">%</span></span> <div class="pie"> <div class="left-side half-circle"></div> <div class="right-side half-circle"></div> </div> </div> <div class="pie-wrapper progress-60"> <span class="label">60<span class="smaller">%</span></span> <div class="pie"> <div class="left-side half-circle"></div> <div class="right-side half-circle"></div> </div> </div> <div class="pie-wrapper progress-90"> <span class="label">90<span class="smaller">%</span></span> <div class="pie"> <div class="left-side half-circle"></div> <div class="right-side half-circle"></div> </div> </div> <div class="pie-wrapper progress-45 style-2"> <span class="label">45<span class="smaller">%</span></span> <div class="pie"> <div class="left-side half-circle"></div> <div class="right-side half-circle"></div> </div> <div class="shadow"></div> </div> <div class="pie-wrapper progress-75 style-2"> <span class="label">75<span class="smaller">%</span></span> <div class="pie"> <div class="left-side half-circle"></div> <div class="right-side half-circle"></div> </div> <div class="shadow"></div> </div> <div class="pie-wrapper progress-95 style-2"> <span class="label">95<span class="smaller">%</span></span> <div class="pie"> <div class="left-side half-circle"></div> <div class="right-side half-circle"></div> </div> <div class="shadow"></div> </div> <div class="pie-wrapper pie-wrapper--solid progress-65"> <span class="label">65<span class="smaller">%</span></span> </div> <div class="pie-wrapper pie-wrapper--solid progress-25"> <span class="label">25<span class="smaller">%</span></span> </div> <div class="pie-wrapper pie-wrapper--solid progress-88"> <span class="label">88<span class="smaller">%</span></span> </div> </div> 
Comments
Post a Comment