我目前正在从事一个项目，在这个项目中，我必须构建一个包含百分比和定制svg动画的加载屏幕。我已经遍及整个互联网，但是找不到我所需要的东西？我似乎什至无法获得一个简单的加载栏来工作！
我在下面列出了我目前拥有的东西。由于progressbar.js包含动画和百分比，因此我一直在使用this walkthrough，但是任何指导将不胜感激！
（我的想法是让南瓜种子在栏杆加载时彼此旋转，然后连接在一起，一旦栏杆达到100％，南瓜就会弹出）
var ProgressBar = required('progressbar.js')
var line = new ProgressBar.Line('#container');
var bar = new ProgressBar.Line('#container', {
strokeWidth: 4,
easing: 'easeInOut',
duration: 1400,
color: '#92D4CE',
trailColor: '#78BA43',
trailWidth: 1,
svgStyle: {width: '100%', height: '100%'},
text: {
style: {
// Text color.
// Default: same as stroke color (options.color)
color: '#999',
position: 'absolute',
right: '0',
top: '30px',
padding: 0,
margin: 0,
transform: null
},
autoStyleContainer: false
},
from: {color: '#92D4CE'},
to: {color: '#78BA43'},
step: (state, bar) => {
bar.setText(Math.round(bar.value() * 100) + ' %');
}
});
bar.animate(1.0); // Number from 0.0 to 1.0body{
#container {
margin: 20px;
width: 400px;
height: 8px;
position: relative;
}
}<body>
<div id="container"></div>
<div id="animated">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 144">
<style>
.st0{fill:#fee0c4}.st1{fill:#fbcaba}.st2{fill:#feeee7}.st4{fill:#d4644b}.st6{fill:#957754}.st8{fill:none;stroke:#3a2e18;stroke-width:.3793;stroke-miterlimit:10}
</style>
<g id="seeds">
<g id="seedThree">
<path class="st0" d="M51.78 89.68c0 3.98-3.69 7.2-6.81 7.2-3.13 0-6.81-3.22-6.81-7.2s4.26-15.15 6.81-17.92c2.15-2.34 6.81 13.94 6.81 17.92z"/>
<path class="st1" d="M46.81 74.91s8.99 17.87-1.85 20.98c.07 0 12.63.01 1.85-20.98zM43.26 76.56S40.2 85.3 39.5 88.35c.01 0 1.41-7.12 3.76-11.79z"/>
<ellipse transform="rotate(-18.558 40.64 90.84)" class="st2" cx="40.65" cy="90.84" rx="1.14" ry="1.94"/>
<ellipse transform="rotate(-18.558 40.319 88.068)" class="st2" cx="40.33" cy="88.07" rx=".21" ry=".36"/>
</g>
<g id="seedTwo">
<path class="st0" d="M77.07 49.58c0 3.98-3.69 7.2-6.81 7.2-3.13 0-6.81-3.22-6.81-7.2s4.26-15.15 6.81-17.92c2.15-2.34 6.81 13.94 6.81 17.92z"/>
<path class="st1" d="M72.1 34.81s8.99 17.87-1.85 20.98c.06 0 12.63.01 1.85-20.98zM68.55 36.46s-3.06 8.74-3.76 11.79c.01 0 1.4-7.12 3.76-11.79z"/>
<ellipse transform="rotate(-18.558 65.931 50.743)" class="st2" cx="65.94" cy="50.74" rx="1.14" ry="1.94"/>
<ellipse transform="rotate(-18.558 65.61 47.97)" class="st2" cx="65.62" cy="47.97" rx=".21" ry=".36"/>
</g>
<g id="seedOne">
<path class="st0" d="M100.36 87.93c0 3.98-3.69 7.2-6.81 7.2-3.13 0-6.81-3.22-6.81-7.2S91 72.78 93.55 70.01c2.15-2.34 6.81 13.95 6.81 17.92z"/>
<path class="st1" d="M95.39 73.16s8.99 17.87-1.85 20.98c.06 0 12.63.01 1.85-20.98zM91.84 74.81s-3.06 8.74-3.76 11.79c0 0 1.4-7.12 3.76-11.79z"/>
<ellipse transform="rotate(-18.558 89.215 89.095)" class="st2" cx="89.22" cy="89.09" rx="1.14" ry="1.94"/>
<ellipse transform="rotate(-18.558 88.895 86.322)" class="st2" cx="88.9" cy="86.32" rx=".21" ry=".36"/>
</g>
</g>
<g id="pumpkin">
<path d="M72.08 50.12S41.63 36.8 26.62 58.96c-11.11 16.4-7.86 43.14 11.56 54.45 11.99 6.98 36.45 9.02 58.99 3.15 23.51-6.12 33.21-33.49 21.8-54.65-2.51-4.61-14.42-20.63-46.89-11.79z" fill="#f89a56"/>
<path class="st4" d="M99.35 56.7s11.81 33.21 6.18 52.43c0 0 10.52-25.04-6.18-52.43zM44.23 55.24s-12.18 25.09-4.16 52.15c-.59-.32-14.85-25.74 4.16-52.15zM72.54 60.93s-4.81 36.14 0 49.93c.23-.01.92-45.46 0-49.93z"/>
<path d="M68.3 53.41s2.94 4.05 7.6 1.84 4.05-17.42 16.93-24.41c0-.37-5.27-3.68-10.18-3.43-.37.12-.26 1.56-.26 1.56l-.74-1.57S73.68 42.27 68.3 53.41z" fill="#92985c"/>
<path class="st6" d="M68.3 53.41s5.9 1.12 7.8-2.89c0 0-.05 1.52-.43 2.11-.38.6 4.01-3.83 6.01-8.71-.03.06-3.36 9.03-4.29 10.01-.05.06-3.94 4.7-9.09-.52zM82.61 29.73s6.91 1.39 7.65 1.43c.73.04 1.22-.39 1.54-.15 0 .04-.17-.31-1.32.4-.01-.04.21.42-7.87-1.68z"/>
<path d="M69.14 53.41s4.44-12.01-3.34-11.06c-7.78.94-7.15-6.84-7.15-6.84" fill="none" stroke="#3a2e18" stroke-width=".576" stroke-miterlimit="10"/>
<circle class="st8" cx="70.07" cy="41.27" r="1.92"/>
<path class="st8" d="M74.38 54.44s7.58-4.77 7.91.8-4.83 7.44 2.2 10.95"/>
</g>
</svg>
</div>
<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Greensock -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenMax.min.js"></script>
<script src="js/progressbar.js/dist/progressbar.js"></script>
<script src="js/scripts.js"></script>
</body>
答案 0 :(得分：2)
我对progressbar.js并不熟悉，所以我真的不能为您提供太多帮助。
但是，使用CSS动画和过渡非常简单。结合了少量的Javascript。
为了演示设置越来越多的进度，我使用了一个简单的requestAnimationFrame()动画循环。
其余代码的工作方式在代码中。
var mysvg = document.querySelector("#animated svg");
//
// Call this function to set the amount of progress (0 .. 1)
//
function setProgress(progress)
{
// For debug purposes only: show the progress amount in a div so we can see the progress
document.getElementById("test").textContent = progress.toFixed(2);
// When progress is complete (1) start the pumpkin animation by adding a class to the SVG
if (progress >= 1) {
mysvg.classList.add("show-pumpkin");
} else {
mysvg.classList.remove("show-pumpkin");
}
}
// Set the initial state of the progress to 0
setProgress(0);
// Everything else below is just to simulate you calling setProgress() with an increasing value.
//
// A little animation that increments the progress amount for us.
// In a real situation you would be setting this yourself based on how much of your initialisation is complete etc.
//
var amt = 0;
function incrementPogress() {
amt += 0.005;
setProgress(amt);
if (amt <= 1)
window.requestAnimationFrame(incrementPogress);
}
// Start our progress incrementing simulation
window.requestAnimationFrame(incrementPogress);svg {
width: 500px;
}
/* pumkin starts out very small and invisible */
#pumpkin {
transform-box: fill-box;
transform-origin: 50% 50%;
transform: scale(0.0001);
opacity: 0;
}
/* When the "show-pumkin" class is added to the SVG, wait 0.5s, then
make the pumkin visible, and scale it up with a bounce easing function. */
.show-pumpkin #pumpkin {
opacity: 1;
transition: transform 0.5s;
transition-delay: 0.45s;
transform: scale(1);
transition-timing-function: cubic-bezier(0.550, 1.650, 0.615, 0.840);
}
/* The group of seeds rotates constantly */
#seeds {
transform-origin: 72px 72px;
animation: rotate-clockwise 2s linear infinite;
}
/* The individual seeds have their own rotations.
With varying durations and directions. */
#seeds g {
transform-box: fill-box;
transform-origin: 50% 50%;
animation: rotate-clockwise 1.8s linear infinite;
animation-direction: reverse;
}
#seeds #seedTwo {
animation-direction: normal;
animation-duration: 10s;
}
#seeds #seedThree {
animation-duration: 1s;
}
/* Keyframe definition to cause a 360 degree rotation.
Used for the group and individual seed rotations. */
@keyframes rotate-clockwise {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* When the "show-pumkin" class is added to the SVG, start shrinking the seeds
towards the centre of the SVG. We apply this transform to a new "seed-container"
group so that it doesn't interfere with the rotation transform that's already
happening to "#seeds". */
.show-pumpkin #seeds-container {
transform-origin: 72px 72px;
transition: transform 0.5s;
transform: scale(0.1);
transition-timing-function: ease-out;
}<div id="animated">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 144">
<style>
.st0{fill:#fee0c4}.st1{fill:#fbcaba}.st2{fill:#feeee7}.st4{fill:#d4644b}.st6{fill:#957754}.st8{fill:none;stroke:#3a2e18;stroke-width:.3793;stroke-miterlimit:10}
</style>
<g id="seeds-container">
<g id="seeds">
<g id="seedThree">
<path class="st0" d="M51.78 89.68c0 3.98-3.69 7.2-6.81 7.2-3.13 0-6.81-3.22-6.81-7.2s4.26-15.15 6.81-17.92c2.15-2.34 6.81 13.94 6.81 17.92z"/>
<path class="st1" d="M46.81 74.91s8.99 17.87-1.85 20.98c.07 0 12.63.01 1.85-20.98zM43.26 76.56S40.2 85.3 39.5 88.35c.01 0 1.41-7.12 3.76-11.79z"/>
<ellipse transform="rotate(-18.558 40.64 90.84)" class="st2" cx="40.65" cy="90.84" rx="1.14" ry="1.94"/>
<ellipse transform="rotate(-18.558 40.319 88.068)" class="st2" cx="40.33" cy="88.07" rx=".21" ry=".36"/>
</g>
<g id="seedTwo">
<path class="st0" d="M77.07 49.58c0 3.98-3.69 7.2-6.81 7.2-3.13 0-6.81-3.22-6.81-7.2s4.26-15.15 6.81-17.92c2.15-2.34 6.81 13.94 6.81 17.92z"/>
<path class="st1" d="M72.1 34.81s8.99 17.87-1.85 20.98c.06 0 12.63.01 1.85-20.98zM68.55 36.46s-3.06 8.74-3.76 11.79c.01 0 1.4-7.12 3.76-11.79z"/>
<ellipse transform="rotate(-18.558 65.931 50.743)" class="st2" cx="65.94" cy="50.74" rx="1.14" ry="1.94"/>
<ellipse transform="rotate(-18.558 65.61 47.97)" class="st2" cx="65.62" cy="47.97" rx=".21" ry=".36"/>
</g>
<g id="seedOne">
<path class="st0" d="M100.36 87.93c0 3.98-3.69 7.2-6.81 7.2-3.13 0-6.81-3.22-6.81-7.2S91 72.78 93.55 70.01c2.15-2.34 6.81 13.95 6.81 17.92z"/>
<path class="st1" d="M95.39 73.16s8.99 17.87-1.85 20.98c.06 0 12.63.01 1.85-20.98zM91.84 74.81s-3.06 8.74-3.76 11.79c0 0 1.4-7.12 3.76-11.79z"/>
<ellipse transform="rotate(-18.558 89.215 89.095)" class="st2" cx="89.22" cy="89.09" rx="1.14" ry="1.94"/>
<ellipse transform="rotate(-18.558 88.895 86.322)" class="st2" cx="88.9" cy="86.32" rx=".21" ry=".36"/>
</g>
</g>
</g>
<g id="pumpkin">
<path d="M72.08 50.12S41.63 36.8 26.62 58.96c-11.11 16.4-7.86 43.14 11.56 54.45 11.99 6.98 36.45 9.02 58.99 3.15 23.51-6.12 33.21-33.49 21.8-54.65-2.51-4.61-14.42-20.63-46.89-11.79z" fill="#f89a56"/>
<path class="st4" d="M99.35 56.7s11.81 33.21 6.18 52.43c0 0 10.52-25.04-6.18-52.43zM44.23 55.24s-12.18 25.09-4.16 52.15c-.59-.32-14.85-25.74 4.16-52.15zM72.54 60.93s-4.81 36.14 0 49.93c.23-.01.92-45.46 0-49.93z"/>
<path d="M68.3 53.41s2.94 4.05 7.6 1.84 4.05-17.42 16.93-24.41c0-.37-5.27-3.68-10.18-3.43-.37.12-.26 1.56-.26 1.56l-.74-1.57S73.68 42.27 68.3 53.41z" fill="#92985c"/>
<path class="st6" d="M68.3 53.41s5.9 1.12 7.8-2.89c0 0-.05 1.52-.43 2.11-.38.6 4.01-3.83 6.01-8.71-.03.06-3.36 9.03-4.29 10.01-.05.06-3.94 4.7-9.09-.52zM82.61 29.73s6.91 1.39 7.65 1.43c.73.04 1.22-.39 1.54-.15 0 .04-.17-.31-1.32.4-.01-.04.21.42-7.87-1.68z"/>
<path d="M69.14 53.41s4.44-12.01-3.34-11.06c-7.78.94-7.15-6.84-7.15-6.84" fill="none" stroke="#3a2e18" stroke-width=".576" stroke-miterlimit="10"/>
<circle class="st8" cx="70.07" cy="41.27" r="1.92"/>
<path class="st8" d="M74.38 54.44s7.58-4.77 7.91.8-4.83 7.44 2.2 10.95"/>
</g>
</svg>
</div>
<div id="test"></div>