SVG Progress Circle - Sass
How do I make an svg progress circle - sass?
What is a svg progress circle - sass? How do you make a svg progress circle - sass? This script and codes were developed by Alex Pate on 24 November 2022, Thursday.
SVG Progress Circle - Sass - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>SVG Progress Circle - Sass</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:100,300'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="donut"> <svg width="240" height="240" xmlns="http://www.w3.org/2000/svg" class="donut__svg"> <circle id="donut-graph-x" class="donut__svg__scrim" r="90" cy="120" cx="120" stroke-width="3" stroke="#333" fill="none"/> <circle id="donut-graph" class="donut__svg__circle--one" r="90" cy="120" cx="120" stroke-width="4" stroke="url(#purple)" stroke-linejoin="round" stroke-linecap="round" fill="none"/> <defs> <linearGradient id="purple" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" stop-color="#7a5bcf"/> <stop offset="100%" stop-color="#8A6FD5"/> </linearGradient> </defs> </svg> <div class="donut__copy"> <span class="donut__title">82<span class="donut__spic">%</span></span> </div>
</div>
<span class="info"><a href="http://alexpate.uk/journal/pure-svg-progress-circles/" target="_blank">Accompanying article</a></span> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>
SVG Progress Circle - Sass - Script Codes CSS Codes
* { box-sizing: border-box;
}
html,
body { margin: 0 0; padding: 0; height: 100%;
}
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: #212121; font-family: 'Roboto', Helvetica, Arial, sans-serif; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; height: 100%;
}
.donut { position: relative; width: 240px; height: 240px;
}
.donut__copy { text-align: center; width: 100%; height: 100%; padding-top: 68px; top: 0; left: 0; position: absolute;
}
.donut__title,
.donut__secondary { display: block; margin: 0; padding: 0;
}
.donut__title,
.donut__spic { color: #8a6fd5; font-weight: 200;
}
.donut__title { font-size: 79px; position: relative; -webkit-animation: donutTitleFadeLeft 800ms 200ms cubic-bezier(0.99, 0.01, 0.22, 0.94) forwards; animation: donutTitleFadeLeft 800ms 200ms cubic-bezier(0.99, 0.01, 0.22, 0.94) forwards; opacity: 0; -webkit-transform: translateX(0); transform: translateX(0);
}
.donut__spic { position: absolute; top: 20px; font-size: 30px; line-height: 1em; content: "%"; -webkit-animation: donutTitleFadeRight 800ms 200ms cubic-bezier(0.99, 0.01, 0.22, 0.94) forwards; animation: donutTitleFadeRight 800ms 200ms cubic-bezier(0.99, 0.01, 0.22, 0.94) forwards; opacity: 0; -webkit-transform: translateY(-20px); transform: translateY(-20px);
}
@-webkit-keyframes donutTitleFadeLeft { from { opacity: 0; -webkit-transform: translateX(0); transform: translateX(0); } to { opacity: 1; -webkit-transform: translateX(-10px); transform: translateX(-10px); }
}
@keyframes donutTitleFadeLeft { from { opacity: 0; -webkit-transform: translateX(0); transform: translateX(0); } to { opacity: 1; -webkit-transform: translateX(-10px); transform: translateX(-10px); }
}
@-webkit-keyframes donutTitleFadeRight { from { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } to { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); }
}
@keyframes donutTitleFadeRight { from { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } to { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); }
}
.donut__svg { -webkit-transform: rotate(-90deg); transform: rotate(-90deg);
}
.donut__svg__circle--one { stroke-dasharray: 565.48668; stroke-dashoffset: 565.48668;
}
.donut__svg__circle--one { -webkit-animation: donut-show-one 1200ms cubic-bezier(0.99, 0.01, 0.62, 0.94) 0.5s forwards; animation: donut-show-one 1200ms cubic-bezier(0.99, 0.01, 0.62, 0.94) 0.5s forwards; -webkit-transition: stroke-dasharray 400ms ease-in-out; transition: stroke-dasharray 400ms ease-in-out;
}
@-webkit-keyframes donut-show-one { to { stroke-dashoffset: 101.7876; }
}
@keyframes donut-show-one { to { stroke-dashoffset: 101.7876; }
}
.info { font-size: 14px; color: #999; position: absolute; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; bottom: 40px; width: 100%; left: 0; text-align: center;
}
.info a { color: #999;
}
Developer | Alex Pate |
Username | alexpate |
Uploaded | November 24, 2022 |
Rating | 4.5 |
Size | 3,832 Kb |
Views | 26,312 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Graph Preloader | 2,291 Kb |
Single Element Stacked Paper | 2,072 Kb |
Random HEX Color Generator | 2,925 Kb |
Emoji CSS Selectors | 1,868 Kb |
Labs Bubbling Animation | 3,414 Kb |
Button Animation | 2,496 Kb |
Wobble Notification | 2,618 Kb |
Pulse Animation - With Notifications | 2,617 Kb |
SVG Circle progress | 2,928 Kb |
Notifier Pulse | 2,450 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
A Pen by boilzzz | Boilzzz | 2,761 Kb |
CSS3 keyframe onload animation. | Samueljseay | 1,706 Kb |
Brian The CSS Bee | Jonitrythall | 3,922 Kb |
Vue.js Lazy Loading | Kjbrum | 3,620 Kb |
Javascript Welcome | Peterlewicki | 1,573 Kb |
Kut D3 | Jellevrswk | 3,687 Kb |
Coming Soon | MariamMassadeh | 1,680 Kb |
Perspective Origin Demo | Agelber | 3,614 Kb |
A Pen by Paul Sullivan | Pwsm50 | 2,349 Kb |
Wavy Road with Dashes | Jonobr1 | 2,679 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!