tailwindcss实现酷炫环状图表动画显示效果代码-html代码-BFW代码库

tailwindcss实现酷炫环状图表动画显示效果代码

代码语言：html

所属分类：图表

代码描述：tailwindcss实现酷炫环状图表动画显示效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/tailwindcss.3.4.3.js"></script>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />
</head>

<body class="bg-gradient-to-t from-slate-950 to-slate-800 text-gray-700 flex justify-center items-center min-h-screen p-4
        before:bg-[url(//repo.bfw.wiki/bfwrepo/image/6675f60590815.png)]
        before:-inset-0
        before:fixed
        before:opacity-50
        before:bg-cover
        before:bg-center
        before:bg-no-repeat
        before:-z-10
    ">

    <main class="bg-black/20 backdrop-blur-md border border-white/10 text-white p-12 shadow-lg rounded-3xl w-full max-w-sm sm:max-w-xl">

        <h1 class="animate-in font-semibold text-xl" style="--d:300ms">Recycled</h1>

        <section class="flex flex-col sm:flex-row items-center gap-12 mt-6">
            <div>
                <svg id="circular-chart" width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                        <circle cx="100" cy="100" r="90" fill="none" stroke="transparent" stroke-width="20"/>
                        <text x="100" y="85" text-anchor="middle" font-size="12" fill="#FFF">Total</text>
                        <text x="100" y="115" text-anchor="middle" font-size="24" fill="#FFF">$47.1k</text>
                    </svg>
            </div>
            <div id="barChartContainer" class="h-32 w-full text-xs space-y-2
                        [&_.bar]:flex
                        [&_.bar]:items-center
                        [&_.bar]:gap-2
                        [&_.bar_label]:whitespace-nowrap
                        [&_.bar_label]:w-24
                        [&_.bar_p]:font-bold
                        [&_.bar>div]:h-2
                        [&_.bar>div]:rounded-full
                        [&_.bar>div]:w-0
                        [&_.bar>div]:transition-all
                        [&_.bar>div]:duration-300
                        [&_.bar>div]:ease-out
                    "></div>
        </section>

        <button type="button" class="text-slate-900 border-none rounded-md w-full py-2 px-6 flex items-center gap-2 justify-center mt-8 transition-all duration-300 bg-amber-400/50 hover:bg-sky-500/50 focus-visible:bg-sky-500/50 outline-none ring-0">Home<span class="material-symbols-outlined">chevron_right</span>
        </main>
<script type="module">
                        const TRAFFIC = [
    { "color": "hsl(217, 91%, 60%)", "percentage": 40, "label": "Text" },
    { "color": "hsl(20, 90%, 48%)", "percentage": 25, "label": "Images" },
    { "color": "hsl(45, 93%, 47%)", "percentage": 20, "label": "Documents" },
    { "color": "hsl(350, 890%, 60%)", "percentage": 15, "label": "Videos" },
]

let delay = 1000;

function.........完整代码请登录后点击上方下载按钮下载查看