Add icon svg on the submission thank you page
Added icon svg and animation
This commit is contained in:
karemarsy
parent
144fa22820
commit
139ae58906
@ -35,7 +35,7 @@ $light: #fff;
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.is-vcentered{
|
.is-vcentered {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -47,8 +47,6 @@ $light: #fff;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
}
|
}
|
||||||
@ -57,3 +55,124 @@ body {
|
|||||||
background: rgb(225, 98, 89);
|
background: rgb(225, 98, 89);
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.animation-ctn {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes checkmark {
|
||||||
|
0% {
|
||||||
|
stroke-dashoffset: 100px
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
stroke-dashoffset: 200px
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-ms-keyframes checkmark {
|
||||||
|
0% {
|
||||||
|
stroke-dashoffset: 100px
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
stroke-dashoffset: 200px
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes checkmark {
|
||||||
|
0% {
|
||||||
|
stroke-dashoffset: 100px
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
stroke-dashoffset: 0px
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes checkmark-circle {
|
||||||
|
0% {
|
||||||
|
stroke-dashoffset: 480px
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
stroke-dashoffset: 960px;
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-ms-keyframes checkmark-circle {
|
||||||
|
0% {
|
||||||
|
stroke-dashoffset: 240px
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
stroke-dashoffset: 480px
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes checkmark-circle {
|
||||||
|
0% {
|
||||||
|
stroke-dashoffset: 480px
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
stroke-dashoffset: 960px
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes colored-circle {
|
||||||
|
0% {
|
||||||
|
opacity: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 100
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* other styles */
|
||||||
|
/* .svg svg {
|
||||||
|
display: none
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
.inlinesvg .svg svg {
|
||||||
|
display: inline
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg-icon {
|
||||||
|
align-items: center;
|
||||||
|
display: inline-flex;
|
||||||
|
justify-content: center;
|
||||||
|
height: 154px;
|
||||||
|
width: 154px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* .svg img {
|
||||||
|
display: none
|
||||||
|
} */
|
||||||
|
|
||||||
|
.svg-icon--order-success svg polyline {
|
||||||
|
-webkit-animation: checkmark 0.30s ease-in-out 0.9s backwards;
|
||||||
|
animation: checkmark 0.30s ease-in-out 0.9s backwards
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg-icon--order-success svg circle {
|
||||||
|
-webkit-animation: checkmark-circle 0.8s ease-in-out backwards;
|
||||||
|
animation: checkmark-circle 0.8s ease-in-out backwards;
|
||||||
|
}
|
||||||
|
|
||||||
|
.svg-icon--order-success svg circle#colored {
|
||||||
|
-webkit-animation: colored-circle 0.8s ease-in-out 0.9s backwards;
|
||||||
|
animation: colored-circle 0.8s ease-in-out 0.9s backwards;
|
||||||
|
}
|
||||||
@ -11,7 +11,7 @@
|
|||||||
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
|
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="has-text-centered-mobile">
|
<body>
|
||||||
|
|
||||||
<main>
|
<main>
|
||||||
<%= yield %>
|
<%= yield %>
|
||||||
|
|||||||
@ -1,16 +1,28 @@
|
|||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="columns is-vcentered">
|
<div class="columns is-vcentered">
|
||||||
<div class="column is-half is-offset-one-quarter">
|
<div class="column is-family-secondary has-text-centered is-half is-offset-one-quarter">
|
||||||
<div>
|
<div>
|
||||||
<h5 class="is-size-1 has-text-centered has-text-warning">
|
<div class="animation-ctn">
|
||||||
<i class="fas fa-thumbs-up "></i>
|
<div class="svg-icon svg-icon--order-success svg">
|
||||||
</h5>
|
<svg xmlns="http://www.w3.org/2000/svg" width="154px" height="154px">
|
||||||
|
<g fill="none" stroke="#22AE73" stroke-width="2">
|
||||||
|
<circle cx="77" cy="77" r="72" style="stroke-dasharray:480px, 480px; stroke-dashoffset: 960px;">
|
||||||
|
</circle>
|
||||||
|
<circle id="colored" fill="#22AE73" cx="77" cy="77" r="72"
|
||||||
|
style="stroke-dasharray:480px, 480px; stroke-dashoffset: 960px;"></circle>
|
||||||
|
<polyline class="st0" stroke="#fff" stroke-width="10" points="43.5,77.8 63.7,97.9 112.2,49.4 "
|
||||||
|
style="stroke-dasharray:100px, 100px; stroke-dashoffset: 200px;" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<h1 class="has-text-centered has-text-black is-size-1 has-text-weight-semibold is-family-secondary">Thank You!
|
<h1 class=" has-text-black is-size-1 has-text-weight-semibold">Thank You!
|
||||||
</h1><br>
|
</h1><br>
|
||||||
<p class="is-size-5 has-text-centered has-text-black is-family-secondary">We received your submission.</p><br>
|
<p class="is-size-5 has-text-black ">We received your submission.</p><br>
|
||||||
<div class="has-text-centered">
|
<div class="">
|
||||||
<button class="button is-active is-medium is-dark">Back to previous page</button>
|
<button class="button is-success is-medium">Back to previous page</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user