LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
Fill
Unfill
CSS
html, body {
  font-family: "Helvetica", helvetica, sans-serif;
}

.circle {
  position: relative;
  width: 85px;
  height: 85px;
  margin: 20px auto;
}
.circle svg {
  position: absolute;
  width: 100%;
  height: 100%;
}
.circle svg.circleFill {
  z-index: 1;
  stroke-dasharray: 322;
  stroke-dashoffset: 322;
  -webkit-transition: all 3s;
  transition: all 3s;
  -webkit-transform: rotate(-90deg);
          transform: rotate(-90deg);
}
.circle svg.circleFill.filled {
  stroke-dashoffset: 38.5;
}
.circle svg.circleTrack {
  z-index: 0;
}

.fillBtn,
.unfillBtn {
  width: 150px;
  padding: 10px 0;
  margin: 20px auto;
  text-align: center;
  background: #cccccc;
  color: #888888;
  border-radius: 4px;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.fillBtn:hover,
.unfillBtn:hover {
  color: #ffffff;
  cursor: pointer;
}
JS
$(document).ready () ->
  
  animTime = 3000
  animPolice = false
  
  #add new stroke-dashoffset class to element to fill it.
  #note, the jQuery addClass method is not supported by svgs, so you must use attr()
  $('.fillBtn').click () ->
    return if animPolice
    animPolice = true
    $(".circleFill").attr("class", "circleFill filled")
    setTimeout () ->
      animPolice = false
    , animTime
    
  $('.unfillBtn').click () ->
    return if animPolice
    animPolice = true
    $(".circleFill").attr("class", "circleFill")
    setTimeout () ->
      animPolice = false
    , animTime
Host Instantly Drag and Drop Website Builder

 

Description

Click the buttons to fill/un-fill the circular path
Term
Mon, 11/27/2017 - 21:55

Related Codes

Pen ID
Pen ID
Pen ID