可拖动环形进度条效果代码
代码语言：html
所属分类：进度条
代码描述：可拖动环形进度条效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
.me-toggle {
position: fixed;
z-index: 9999;
top: 8px;
left: 8px;
display: none;
width: 48px;
height: 48px;
cursor: pointer;
outline: none;
border: none;
background: transparent;
padding: 0;
margin: 0;
overflow: visible;
}
@media only screen and (max-width: 800px) {
.me-toggle {
display: none;
}
}
.me-toggle__info {
position: absolute;
z-index: 2;
top: 30px;
left: 30px;
margin: 0;
color: white;
text-transform: uppercase;
font-size: 10px;
opacity: 0;
letter-spacing: 1px;
font-weight: 300;
}
.me-logo__device--small {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
width: 48px;
height: 48px;
}
.me-close {
visibility: hidden;
opacity: 0;
}
.me-toggle__base {
width: 100%;
height: 48px;
background: black;
background-image: linear-gradient(205deg, #313346 0%, #15161D 76%);
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
border-radius: 2px;
}
.me-panel {
position: absolute;
z-index: 9998;
top: 0;
left: 0;
display: flex;
justify-content: center;
width: 50%;
height: 100%;
transform: translateX(-101%);
color: white;
margin: auto;
background-image: linear-gradient(205deg, #313346 0%, #15161D 76%);
box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.3);
font-family: noto-sans-condensed, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
line-height: 1.357;
text-align: center;
-webkit-font-kerning: normal;
font-kerning: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-y: scroll;
overflow: -moz-scrollbars-none;
-ms-overflow-style: none;
scrollbar-width: none;
}
.me-panel::-webkit-scrollbar {
display: none;
}
@media only screen and (max-width: 800px) {
.me-panel {
display: none;
}
}
.me-panel__content {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: center;
width: 90%;
max-width: 376px;
height: 100%;
min-height: 630px;
visibility: hidden;
opacity: 0;
}
.me-panel__content-top {
flex-basis: 60%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
}
.me-panel__content-btm {
flex-basis: 40%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-end;
}
.me-logo {
width: 76px;
height: 66px;
}
.me-logo__device {
opacity: 0;
}
.me-title {
position: relative;
top: auto;
left: auto;
margin: 26px 0 35px;
font-family: noto-sans-extracondensed, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 5px;
}
.me-title span {
display: block;
margin-top: 5px;
opacity: 0.5;
font-family: noto-sans-condensed, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
}
.me-thanks {
margin-bottom: 16px;
overflow: hidden;
}
.me-thanks__title {
margin: 0 0 2px;
font-family: noto-sans-extracondensed, sans-serif;
font-weight: 700;
font-style: normal;
font-size: 104px;
text-transform: uppercase;
letter-spacing: 5px;
line-height: 1;
}
.me-line {
width: 100%;
height: 1px;
background: white;
opacity: 0.16;
}
.me-intro {
margin: 0;
opacity: 0.5;
}
.me-profile {
position: relative;
display: flex;
justify-content: center;
width: 100%;
height: 100%;
margin-top: 18px;
min-height: 20vh;
}
.me-profile__link {
position: absolute;
top: calc(50% - 54px);
left: calc(50% - 132px);
width: 262px;
height: 108px;
border-radius: 50%;
}
.me-profile__link.me-profile__link-disabled {
pointer-events: none;
cursor: default;
}
.me-line-vert {
width: 1px;
height: 100%;
min-height: 20vh;
background: white;
opacity: 0.16;
}
.me-links {
width: 100%;
}
.me-links__list {
display: flex;
justify-content: space-between;
margin: 0;
padding: 0;
height: 92px;
overflow: hidden;
}
.me-links__item {
list-style-type: none;
}
.me-links__link {
position: relative;
display: flex;
align-items: center;
height: 100%;
color: white;
opacity: 0.5;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 2px;
transition: scale 0.2s linear, color 0.2s linear;
}
.me-links__link:hover {
color: #4A90E2;
opacity: 1;
}
.me-links__link:hover .me-links__item-marker {
transform: scale(1);
}
.me-links__item-marker {
position: absolute;
left: 50%;
bottom: 0;
z-index: 1;
width: 1px;
height: 30px;
background-color: #4A90E2;
transform: scale(0);
transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
transform-origin: center bottom;
}
/* ==========================================================================
Variables etc
========================================================================== */
.results__dial-percent-text text, body {
font-family: "proxima-nova", sans-serif;
font-style: normal;
font-weight: 400;
}
.results__dial-saving, .results__dial-perc, .results__dial-perc-text, .results__dial-results {
font-family: "proxima-nova", sans-serif;
font-style: normal;
font-weight: 700;
}
/* ==========================================================================
General
========================================================================== */
body {
background-image: linear-gradient(340deg, #008996 0%, #092a30 100%);
font-feature-settings: "kern" 1, "liga" 1, "lnum" 1;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 520px;
height: 520px;
}
/* ==========================================================================
Dial
========================================================================== */
.results__dial {
visibility: hidden;
}
.results__dial text, .results__dial tspan {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Percentage Markers
========================================================================== */
.results__dial-percent-text text {
-webkit-font-smoothing: subpixel-antialiased;
}
/* Text
========================================================================== */
.results__dial-perc-text, .results__dial-results {
font-feature-settings: "tnum" 1;
text-anchor: middle;
}
.results__dial-perc-text, .results__dial-results {
font-size: 24px;
}
.results__dial-perc {
text-anchor: middle;
font-size: 48px;
-webkit-font-smoothing: subpixel-antialiased;
}
.results__dial-saving {
font-size: 48px;
-webkit-font-smoothing: subpixel-antialiased;
}
/* Dragger
========================================================================== */
.results__dial-drag-arrows, .results__dial-drag-pad {
pointer-events: none;
}
.results__dial-drag-hit {
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 520" class="results__dial">
<title>Calculator Savings Dial</title>
<g class="results__dial-circles">
<path class="results__dial-outer" d="M260,64c110.46,0,200,89.54,200,200S370.46,464,260,464,60,374.46,60,264,149.54,64,260,64" fill="none" stroke="#64d3de" stroke-miterlimit="10" opacity="0.6"/>
<path class="results__dial-track" d="M260,86A178,178,0,1,1,82,264,178,178,0,0,1,260,86" fill="none" stroke="#50afb8" stroke-miterlimit="10" stroke-width="8"/>
<path class="results__dial-track-perc" d="M260,86A178,178,0,1,1,82,264,178,178,0,0,1,260,86" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="8"/>
</g>
<g class="results__dial-markers" fill="#64d3de">
<rect class="results__dial-marker" x="260" y="55" width="1" height="9" />
<rect class="results__dial-marker" x="260" y="55" width="1" height="9" />
<rect class="results__dial-marker" x="260" y="55" width="1" height="9" />
<rect class="results__dial-marker" x="260" y="55" width="1" height="9" />
<rect class="results__dial-marker" x="260" y="55" width="1" height="9" />
<rect class="results__dial-marker" x="260" y="55" width="1" height="9" />
</g>
<g class="results__dial-percent-text" fill="#64d3de" font-size="18" >
<text x="255" y="43.99">0%</text>
<text x="388" y="86.99">10%</text>
<text x="471" y="199.99">20%</text>
<text x="470" y="340.99">30%</text>
<text x="381" y="454.99">40%</text>
<text x="250" y="495.99">50%</text>
</g>
<g class="">
<text class="results__dial-perc-text results__text" x="272" y="203.98" fill="#fff">
<tspan class="results__dial-perc" text-anchor="start">0</tspan>
<tspan baseline-shift="super">%</tspan>
</text>
<text class="results__dial-effect results__text" x="154.43" y="236.67" font-size="16" fill="#64d3de">INCREASE IN HAND HYGIENE
<tspan x="175" dy="24">EFFECTIVENESS SAVES:</tspan>
</text>
<text class="results__dial-results results__text" text-anchor="middle" x="250" y="318" fill="#64d3de">
<tspan baseline-shift="super">$</tspan>
<tspan fill="#fff" class="results__dial-saving">0</tspan>
</text>
</g>
<g class="results__dial-drag" fill="#fff">
<g class="results__dial-drag-inner">
<circle class="results__dial-drag-hit" cx="260" cy="35" r="30" fill="white" opacity="0" />
<circle class="results__dial-drag-pad" cx="260" cy="35" r="20" />
<g class="results__dial-drag-arrows" fill="#092a30">
<polygon points="266.73 38.66 266 37.96 268.55 35.48 266 33.01 266.73 32.3 270 35.48 266.73 38.66" />
<polygon points="253.27 38.66 254 37.96 251.45 35.48 254 33.01 253.27 32.3 250 35.48 253.27 38.66" />
<rect x="251" y="35" width="18" height="1" />
</g>
</g>
<rect class="results__dial-drag-line" x="260" y="55" width="1" height="35" />
</g>
</svg>
</div>
<button class="me-toggle">
<svg class="me-logo__device--small" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
<defs>
<filter id="turb">
<feTurbulence id="turbwave" type="fractalNoise" baseFrequency="0" numOctaves="3" result="turbulence_3" data-filterId="3" seed='2' />
<feDisplacementMap xChannelSelector="R" yChannelSelector="G" in="SourceGraphic" in2="turbulence_3" scale="40" />
</filter>
</defs>
<g fill="#fff">
<path class="me-logo__device-large" d="M25.33,9h8.1L19.29,36.67a5.83,5.83,0,0,1-5.19,3.19H6L20.14,12.19A5.83,5.83,0,0,1,25.33,9Z"/>
<path class="me-logo__device-small" d="M42,20.43,37.58,29.2a5.83,5.83,0,0,1-5.17,3.23H24.29l4.42-8.77a5.82,5.82,0,0,1,5.17-3.23Z"/>
</g>
<g class="me-close">
<rect class="me-close__line1" x="14" y="23" width="20" height="2" fill="#fff" />
<rect class="me-close__line2" x="14" y="23" width="20" height="2" fill="#fff" />
</g>
</svg>
<p class="me-toggle__info">Info</p>
<div class="me-toggle__base"></div>
</button>
<div class="me-panel">
<div class="me-close-icon">
<div class="me-close-icon__line"></div>
<div class="me-close-icon__line"></div>
</div>
<div class="me-panel__content">
<div class="me-panel__content-top">
<div class="me-logo">
<svg class="me-logo__device"xmlns="http://www.w3.org/2000/svg" viewBox="0 0 306.93 262">
<defs>
<filter id="me-turb2">
<feTurbulence id="turbwave2" type="fractalNoise" baseFrequency="0" numOctaves="3" result="turbul.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0