-1

I need to get progress bar in my email sent through a Perl script.

Below is the JS fiddle link I have used. It doesn't display the progress bar in email, though it is visible in browser.

http://jsfiddle.net/dw34m2j7/1/

Here is the Perl code snippet.

use MIME::Lite;
use strict;

my $mail_body = "";
$mail_body = "
<html lang='en'>
<head>
  <title>Bootstrap Example</title>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css'>
</head>
<body>

<div class='container'>
  <h2>Progress Bar With Label</h2>
  <div class='progress'>
    <div class='progress-bar' style='width:80%'>80%</div>
  </div>
</div>

</body>
</html> ";
 my $msg = MIME::Lite->new(
           From => "me\@do-not-reply",
           To => "abc\@outlook.com",
            Subject => "TEST EMAIL",                                                                                                        
            Type    => 'multipart/mixed'
                                                                                                                    );
                                    $msg->attach(
                                            Type => 'text/html',
                                            Encoding => 'quoted-printable',
                                            Data => $mail_body,
                                            );
                                    $msg->send;

I even used a logic to create progress bar, without JS and Bootstrap, using only HTML and CSS.

Please find the code in the link below.

http://jsfiddle.net/dw34m2j7/

Let me know a way to send this progress bar through email from Perl.

Rob
  • 781
  • 5
  • 19
Gitanjali Srikanth
  • 65
  • 8
  • Outlook and most other mail clients won't include external stylesheets or images (at least not without user approval). Try embedding the stylesheet. – Rob Jul 01 '21 at 14:40

2 Answers2

1

Bootstrap doesn't work well with email for a few reasons. See Has anyone gotten HTML emails working with Twitter Bootstrap? and Can I use bootstrap for designing HTML Email Templates.

You said in your second example you didn't use Bootstrap or jQUery - but you haven't inlined the styles. You also use divs and positioning which are not great starting points. Try tables. Lookup what works and what doesn't on email: https://www.caniemail.com/

It looks like you're new to HTML email--you need to think all over again. Look through this resource page for starters: https://thebetter.email/resources/

Nathan
  • 4,358
  • 2
  • 10
  • 26
1

Here is the solution that worked for me

my $mail_body = "
<html>
<body>
<table cellpadding=\"0\" cellspacing=\"0\" width=\"250\" >
<tr>
  <td col width = 90 bgcolor=\"#f83f83\" style=\" background-color:#f83f83; float:left; height:15px; text-align:center;\">90</td>
  <td col width = 10 bgcolor=\"#cccccc\" style=\" background-color:#cccccc; float:left; height:15px;\"></td>
</tr>
</table>
<br>
<table cellpadding=\"0\" cellspacing=\"0\" width=\"250\"  >
<tr>
  <td col width = \"70\" bgcolor=\"#f83f83\" style=\" background-color:#f83f83; float:left; height:15px;\"></td>
  <td col width = \"30\" bgcolor=\"#cccccc\" style=\" background-color:#cccccc; float:left; height:15px;\"></td>
</tr>
</table>
<br>
<table cellpadding=\"0\" cellspacing=\"0\" width=\"250\"  >
<tr>
  <td col width = \"5\" bgcolor=\"#f83f83\" style=\" background-color:#f83f83; float:left; height:15px;\"></td>
  <td col width = \"95\" bgcolor=\"#cccccc\" style=\" background-color:#cccccc; float:left; height:15px;\"></td>
</tr>
</table>
</body>
</html>";
Gitanjali Srikanth
  • 65
  • 8