ホームページ > 記事 > ウェブフロントエンド > CSSで循環ループのプログレスバーを実装する方法
CSS で円形ループのプログレス バーを実装する方法: 1. 最も外側の親リングを作成します。2. 「クリップ パス」を使用して 2 つの半円を描画し、親円を覆うように絶対配置します。リング。3. 50 未満の場合は、右の半円を回転させて親リングの色をゆっくりと表示します。 4. 50 を超える場合は、右の半円の回転度を 0 に設定し、その境界線の色を変更して次の効果を実現します。最初の 50 です。次に、左の半円を回転させて効果を実現します。
このチュートリアルの動作環境: Windows 10 システム、CSS3 バージョン、DELL G3 コンピューター
循環ループの実装方法CSSのプログレスバー?
clip-path を通して 2 つの半円を描き、親リングを覆うようにそれらを絶対に配置します。
<template> <div> <div></div> <div></div> <div> <span>成功率</span> <span>85%</span> </div> </div></template><script>export default { name: 'CircleProgress', setup() { const renderRightRate = (rate: number) => { if (rate < 50) { return 'transform: rotate(' + 3.6 * rate + 'deg);'; } else { return 'transform: rotate(0);border-color: #54c4fd;'; } }; const renderLeftRate = (rate: number) => { if (rate >= 50) { return 'transform: rotate(' + 3.6 * (rate - 50) + 'deg);'; } }; return { renderLeftRate, renderRightRate, }; },};</script><style>.circle { width: 80px; height: 80px; position: relative; border-radius: 50%; left: 200px; top: 50px; box-shadow: inset 0 0 0 5px #54c4fd; .ab { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } &_left { border: 5px solid #546063; border-radius: 50%; clip: rect(0, 40px, 80px, 0); } &_right { border: 5px solid #546063; border-radius: 50%; clip: rect(0, 80px, 80px, 40px); } &_text { height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #fff; .name { margin-bottom: 4px; } }}</style>効果は次のとおりです:
css実際には、静的と同じです。
この例は固定ペースで書かれており、必要に応じて変更することもできます。
<template> <div> <div></div> <div></div> <div> <span>成功率</span> <span>85%</span> </div> </div></template><script>import { onMounted, ref, Ref } from 'vue';export default { name: 'CircleProgress', setup() { const circleLeft: Ref<HTMLElement | null | any> = ref(null); const circleRight: Ref<HTMLElement | null | any> = ref(null); let timer = 0; let percent = 0; const step = () => { percent += 1; if (percent < 50) { circleRight.value.style.transform = 'rotate(' + 3.6 * percent + 'deg)'; } else { circleRight.value.style.transform = 'rotate(0)'; circleRight.value.style.borderColor = '#54c4fd'; circleLeft.value.style.transform = 'rotate(' + 3.6 * (percent - 50) + 'deg)'; } if (percent < 85) { window.clearTimeout(timer); timer = window.setTimeout(step, 20); } }; onMounted(() => { step(); }); return { circleLeft, circleRight, }; },};</script>効果は次のとおりです:
css ビデオ チュートリアル 」
以上がCSSで循環ループのプログレスバーを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。