Animated submit/progress buttons with pure css3

Question

How can someone achieve the effect shown here using pure css3.

Did you look through the comments? This is close: http://codepen.io/rikschennink/pen/mjBsA — Dark Falcon, Jun 06 '14 at 14:48
yep, it's close, but it doesn't achieve the circular loading effect on the border — 254code_rep, Jun 06 '14 at 15:11

score 1 · Answer 1 · edited May 23 '17 at 12:06

Using this (pure CSS/without javascript):

I create an example, Probably still not what you are looking for, but it was the closest I came.

<style>
@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
    }
}

@-moz-keyframes rotate {
    from {
        -moz-transform: rotate(0deg);
    }

    to {
        -moz-transform: rotate(360deg);
    }
}

@-o-keyframes rotate {
    from {
        -o-transform: rotate(0deg);
    }

    to {
        -o-transform: rotate(360deg);
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

#startupload:target {
    /*"disable" button*/
    background: transparent;
    border: none;
}

#startupload:target div.before {
    /*Hide If has hash in url address browser*/
    display: none;
}

#startupload div.progress-circle-container {
    position: relative;
    height: 230px;
    width: 230px;
    margin: 0 auto;
    display: none; /*hide If no Hash in address*/
}
#startupload:target div.progress-circle-container {
    display: block; /*Show If Hash in address*/
}

#startupload div.progress-circle-container div.progress-circle-outer {
    background-color: #faef85;
    background-repeat: repeat-x;
    background-image: -moz-linear-gradient(0deg, #d66f0f, #faef85);
    background-image: -webkit-linear-gradient(0deg, #d66f0f, #faef85);
    background-image: -o-linear-gradient(0deg, #d66f0f, #faef85);
    background-image: linear-gradient(0deg, #d66f0f, #faef85);
    width: 230px;
    height: 230px;
    position: absolute;
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
    animation-play-state: paused;
    -webkit-animation: rotate 2.2s infinite linear;
    -moz-animation: rotate 2.2s infinite linear;
    -o-animation: rotate 2.2s infinite linear;
    animation: rotate 2.2s infinite linear;
    -webkit-box-shadow: inset 0 2px 10px #d58513,inset 0 0 20px #b93d00,0 0 15px rgba(216, 140, 23, 0.25);
    -moz-box-shadow: inset 0 2px 10px #d58513,inset 0 0 20px #b93d00,0 0 15px rgba(216, 140, 23, 0.25);
    box-shadow: inset 0 2px 10px #d58513,inset 0 0 20px #b93d00,0 0 15px rgba(216, 140, 23, 0.25);
    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
    border-radius: 200px;
}

#startupload:target div.progress-circle-container div.progress-circle-outer.animate {
    -webkit-animation-play-state: running;
    -moz-animation-play-state: running;
    -o-animation-play-state: running;
    animation-play-state: running;
}

#startupload div.progress-circle-container div.progress-circle-inner {
    height: 170px;
    width: 170px;
    margin: 0 auto;
    position: absolute;
    left: 30px;
    top: 30px;
    -webkit-border-radius: 200px;
    -moz-border-radius: 200px;
    border-radius: 200px;
    background-color: #fff;/*change color background*/
    -webkit-box-shadow: inset 0 2px 1px #ffffff,inset 0 -1px 1px rgba(0, 0, 0, 0.08),inset 0 -3px 1px rgba(0, 0, 0, 0.09),0 2px 2px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: inset 0 2px 1px #ffffff,inset 0 -1px 1px rgba(0, 0, 0, 0.08),inset 0 -3px 1px rgba(0, 0, 0, 0.09),0 2px 2px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 2px 1px #ffffff,inset 0 -1px 1px rgba(0, 0, 0, 0.08),inset 0 -3px 1px rgba(0, 0, 0, 0.09),0 2px 2px rgba(0, 0, 0, 0.3);
    text-align: center;
}
</style>

<form action="#startupload">
    <button id="startupload" type="submit">
        <div class="before">
            Start upload
        </div>
        <div class="progress-circle-container">
            <div class="progress-circle-outer animate">
            </div>
            <div class="progress-circle-inner"></div>
        </div>
    </button>
</form>

Perhaps the ultimate goal to achieve the best is something like:

css3 animations frame by frame

found this [article](https://medium.com/secoya-tech/radial-progress-indicator-using-css-a917b80c43f9) it comes really close — 254code_rep, Jun 08 '14 at 18:03
@254code_rep you said with "pure css", but this article uses lesscss, so then javascript can, then we can use canvas instead of CSS. — Protomen, Jun 08 '14 at 18:56
@GuilhermeNascimento, Less CSS is "Pure CSS", You just have to compile it. JavaScript doesn't compile into CSS, does it? :-D — Steel Brain, Dec 11 '14 at 16:42
@SteelBrain No "less CSS" is not "CSS" in fact. It is not compiled it is "pre-processor". In my previuos [comment](http://stackoverflow.com/questions/24084612/animated-submit-progress-buttons-with-pure-css3/24087640#comment37192361_24087640) I was talking he asked in "pure css3" (read the title of question please), in other words without additional libraries. Thanks for your comment. — Protomen, Dec 11 '14 at 16:52
I am sorry, I wasn't able to elaborate what I was trying to say. What I was saying is that What do we get in the end? we get Pure CSS, which means that one can suggest a less article for css. Less is pre-processed, It's not processed each time or stuff :-D , thank you for your reply. — Steel Brain, Dec 11 '14 at 17:28

Animated submit/progress buttons with pure css3

1 Answers1